Dojo Dijit styling issues

Question

I'm trying to use a dijit/layout/TabContainer with a modified dijit theme. I need to modify some of the styling of the TabContainer tabs such as the padding of the tabs, boldness, etc. However the styling commands specific to the pages that use the TabContainer are not working.

This piece of code is on my home page's CSS file.

.myTheme .homeTabContent
{
    font-weight: bold !important;
}

.myTheme .homeTabContent .dijitTab /* The .dijitTab is the original CSS class of the tab*/
{
    font-weight: bold !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

The tabs' padding and font-weight remain unchanged despite the !important. Editing the TabContainer CSS file in myTheme isn't a practical solution because I that will just mess up the styling of a different page. What happens is that as I load the page with the styling, my commands appear to be working for a split second, however all of that is undone when the TabContainer finishes loading. Can anyone tell me why or offer me a solution? Thanks in advance!

My first step in a problem like this is to inspect the misbehaving node in Firebug (or IE's equivalent) and see which styles are applied and what overrides what. — usethe4ce, Oct 27 '12 at 20:38
I did in Firebug. The correct CSS gets applied during loading. But disappears after loading is complete. On Firebug, it never mentions the CSS from the home page's CSS file. — Math is Hard, Oct 27 '12 at 23:48

score 1 · Answer 1 · answered Dec 07 '12 at 07:36

Here is a working solution. http://jsfiddle.net/oamiamgod/rd58M/

I have included class myTheme to body tag. Like this

<body class="claro myTheme">

I'm not good at english but I will try to explain.

If you write css like this .myTheme .homeTabContent .dijitTab that mean an element of class homeTabContent have to stay inside some element that has class myTheme

Like this

<body class="claro myTheme">
    <div class="homeTabContent">
        <div class="dijitTab"></div>
    </div>
</body>

But if you write css like this .myTheme.homeTabContent.dijitTab (with no space) it will be

<div class="myTheme homeTabContent dijitTab"></div>

Dojo Dijit styling issues

1 Answers1