Quantcast

tab color control

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

tab color control

notjoshing
This post was updated on .
Users have posted here before about controlling tab color, but not about how to control tab color dynamically, through the style sheets.  Ideally, you'd be able to dynamically swap in a new style sheet and have your tab colors updated.  In practice, that doesn't work.  

If you create an image with non-Dojo colors and attempt to override the image settings for the associated Dojo tab styles, the new image settings do not seem to take:

.dojoTabPaneTab {
        background : url(MyImageURL) no-repeat left top;
}

The only way I've figured out thus far to override the default color settings is to either modify the Dojo templates, or to override the template used with templateCssPath.  Neither of these solutions allows for dynamic switching between styles.  

Any thoughts or feedback on this would be appreciated.

Josh
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: tab color control

Dustin Machi
You probably need to use more sepcific css rules like:

#tabContainer .dojoTabPaneTab { /* stuff */ }

Here is an example of what we succesfully use (note that these specific
rules are for trunk which has had some css name changes):

.workspaceTabsContainer .dojoTab {
         position : relative;
         float : left;
         padding-left : 9px;
         background : url("/images/workspaceTabLeft.gif") no-repeat left
top;
         cursor: pointer;
         white-space: nowrap;
         z-index: 3;
         margin-top:3px;
         margin-left:5px;
         font-size:0.8em;
         border-bottom:1px solid #727272;
}


.workspaceTabsContainer .dojoTab div {
         display : block;
         padding : 7px 15px 4px 6px;
         background : url("/images/workspaceTabRight.gif") no-repeat
right top;
         color : #05090c;
         font-size : 90%;
         height:13px;
}

.workspaceTabsContainer .dojoTab.current {

         border-bottom : 0;
         background-position : 0 -150px;
         border-bottom:1px solid #727272;

}

.workspaceTabsContainer .dojoTab.current div {
         padding : 7px 15px 4px 6px;
         height:13px;
         font-weight:bold;
         background-position : 100% -150px;
}

Dustin



notjoshing wrote:

> Users have posted here before about controlling tab color, but not about how
> to control tab color dynamically, through the style sheets.  Ideally, you'd
> be able to dynamically swap in a new style sheet and have your tab colors
> pdated.  In practice, that doesn't work.  
>
> If you create an image with non-Dojo colors and attempt to override the
> image settings for the associated Dojo tab styles, the new image settings do
> not seem to take:
>
> .dojoTabPaneTab {
> background : url(MyImageURL) no-repeat left top;
> }
>
> The only way I've figured out thus far to override the default color
> settings is to either modify the Dojo templates, or to override the template
> used with templateCssPath.  Neither of these solutions allows for dynamic
> switching between styles.  
>
> Any thoughts or feedback on this would be appreciated.
>
> Josh
_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
[hidden email]
http://dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: tab color control

notjoshing
Dustin, your post helped me find the answer.  Instead of specifying an ID to assign to, as you suggested, you can change the settings for all the tabs by modifying the Dojo class subclass settings:

.dojoTabContainer .dojoTabPaneTab {
        background: url(LeftTabImage) no-repeat left top;
}
.dojoTabContainer .dojoTabPaneTab span {
        background: url(RightTabImage) no-repeat right top;
}
/* We need these to reset. */
.dojoTabContainer .dojoTabPaneTab.current {
        background-position: 0 -150px;
}
.dojoTabContainer .dojoTabPaneTab.current span {
        background-position: 100% -150px;
}

With this, you can set up a series of style sheets to dynamically switch between different tab images, automatically updating the look and feel of all your tabs.

Thanks for the assist.

Josh

Dustin Machi-2 wrote
You probably need to use more sepcific css rules like:

#tabContainer .dojoTabPaneTab { /* stuff */ }

Here is an example of what we succesfully use (note that these specific
rules are for trunk which has had some css name changes):

.workspaceTabsContainer .dojoTab {
         position : relative;
         float : left;
         padding-left : 9px;
         background : url("/images/workspaceTabLeft.gif") no-repeat left
top;
         cursor: pointer;
         white-space: nowrap;
         z-index: 3;
         margin-top:3px;
         margin-left:5px;
         font-size:0.8em;
         border-bottom:1px solid #727272;
}


.workspaceTabsContainer .dojoTab div {
         display : block;
         padding : 7px 15px 4px 6px;
         background : url("/images/workspaceTabRight.gif") no-repeat
right top;
         color : #05090c;
         font-size : 90%;
         height:13px;
}

.workspaceTabsContainer .dojoTab.current {

         border-bottom : 0;
         background-position : 0 -150px;
         border-bottom:1px solid #727272;

}

.workspaceTabsContainer .dojoTab.current div {
         padding : 7px 15px 4px 6px;
         height:13px;
         font-weight:bold;
         background-position : 100% -150px;
}

Dustin



notjoshing wrote:
> Users have posted here before about controlling tab color, but not about how
> to control tab color dynamically, through the style sheets.  Ideally, you'd
> be able to dynamically swap in a new style sheet and have your tab colors
> pdated.  In practice, that doesn't work.  
>
> If you create an image with non-Dojo colors and attempt to override the
> image settings for the associated Dojo tab styles, the new image settings do
> not seem to take:
>
> .dojoTabPaneTab {
> background : url(MyImageURL) no-repeat left top;
> }
>
> The only way I've figured out thus far to override the default color
> settings is to either modify the Dojo templates, or to override the template
> used with templateCssPath.  Neither of these solutions allows for dynamic
> switching between styles.  
>
> Any thoughts or feedback on this would be appreciated.
>
> Josh
_______________________________________________
Dojo FAQ: http://dojo.jot.com/FAQ
Dojo Book: http://manual.dojotoolkit.org/DojoDotBook
Dojo-interest@dojotoolkit.org
http://dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...