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!

Answer 1

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

Question

1 answers

solution1
1 2012-12-07 07:36:50

Dojo Dijit styling issues

Question

1 answers

solution1 1 2012-12-07 07:36:50

solution1
1 2012-12-07 07:36:50