Understanding CSS load order

[ccordes]

Hi Bruce,
Firstly, I want to say I love the ability of quick theming using theme directories - brilliant.
This isn't so much a question of How-to as it is to gain some understanding why it is done so...
In the NT template, CSS files are loaded in this order-

    s_web.AddStyle(clip(g:Theme) & '/jquery-ui.css',true) & |
    s_web.AddStyle('jquery-nt-color.css') &|
    s_web.AddStyle('jquery-nt-menu.css') &|
    s_web.AddStyle('jquery-nt-cal.css') &|
    s_web.AddStyle('netweb.css') &|
    s_web.AddStyle(clip(g:Theme) & '/nettalk-ui.css',true) & |
    s_web.AddStyle(clip(g:Theme) & '/' & clip('csmods.css'),true) & |
    s_web.AddStyle('dstyle.css') &|
    s_web.AddStyle('vtip.css')

This puts the jQuery values at the bottom of the pile. nt-colors and any other css class would take precedence.
The way I see it is that the precesdence should go NetTalk, JQuery, mine.
Tyhe NetTalk css is generally about structure, jQuery (Theme Roller) is generally about style and color, and Mine are usually minor tweaks to each of those.
Here is the way I have reordered the CSS stack -

    s_web.AddStyle('jquery-nt-color.css') &|
    s_web.AddStyle('jquery-nt-menu.css') &|
    s_web.AddStyle('jquery-nt-cal.css') &|
    s_web.AddStyle('netweb.css') &|
    s_web.AddStyle(clip(g:Theme) & '/nettalk-ui.css',true) & |
    s_web.AddStyle(clip(g:Theme) & '/jquery-ui.css',true) & |
    s_web.AddStyle('dstyle.css') &|
    s_web.AddStyle(clip(g:Theme) & '/' & clip('csmods.css'),true) & |
    s_web.AddStyle('vtip.css') &|
    ''

dstyle.css is my tweaks to the standard NetTalk structure and is common to all themes.
csmods.css are my tweaks to the individual theme like browse row colors or form colors that are related to the theme.

So the question is I guess, am I missing something in your logic of the stack arrangement that might get me into trouble without realizing?

Thanks for any comments,
Chris

[Bruce]

Hi Chris,

This is a slightly more explicit specification of the current order;
http://www.capesoft.com/docs/NetTalk6/NetWebThemes.htm#CssOrder

>> This puts the jQuery values at the bottom of the pile. nt-colors and any other css class would take precedence.
>> The way I see it is that the precesdence should go NetTalk, JQuery, mine.

unfortunately it's not that simple.
It's helpful to understand here that CSS contains two (broad) categories. Layout, and Style. The Style stuff applies to color, font and so on, and is easily changed from one theme to the next - the layout stuff is somewhat more complex, and is a little trickier.
the "style" stuff is generally in the Theme folder, the layout stuff is generally in the Styles folder.
To make matters even more exciting, for a small number of layout styles, a browser specific file is required.

In some of the NetTalk files, specifically with regard to new "widgets" (calendar, color lookup, wizard, browse, form and so on) there are minor tweaks which affect the layout. So these NetTalk files come after the root theme files.

The NetTalk css is generally about structure, jQuery (Theme Roller) is generally about style and color, and Mine are usually minor tweaks to each of those.

In short (ignoring the multi-folder complications for the moment) the idea that the files move from "most generic" to "most specific". ie jQuery-UI to NetTalk to Custom.
Because you can override everything in Custom this gives you complete control.

>> So the question is I guess, am I missing something in your logic of the stack arrangement that might get me into trouble without realizing?

the current shipping stack order is carefully selected. So it's unlikely to change. And it should not prevent you doing anything you like. Changing the order is clearly dangerous in some cases because my test will not match your experience. In most cases the change in order is benign, however in a few cases it may lead to unwelcome effects.

Perhaps more pertinently there should be no reason for you to change the order - if you are having a css issue that appears to be fixed by an order change then I would be happy to assist you through that.

cheers
Bruce