Re: css-classes sequence with Trinidad skinning

[Jeanne Waldman]

Hi, The Trinidad code processes the skin's css file and generates a css-2 document that is linked into the rendered page. You'll notice in the generated css file that the style selectors that share the same css properties are grouped together. It does this for performance reasons - it makes the generated css file much smaller. Instead of the selectors being generated in the order you wrote them: .af_foo {font-size: 8px; color: red; font-weight: bold; font-style: italic; font-family: Tahoma} .af_bar {font-size: 12px; color: black; border-width: 1px} .af_zoo {font-size: 8px; color: red; font-weight: bold; font-style: italic; font-family: Tahoma} .af_xyz {color: red} .af_abc {font-size: 12px; color: black; border-width: 1px} You'll see them grouped together: .af_foo, .af_zoo {font-size: 8px; color: red; font-weight: bold;font-style: italic; font-family: Tahoma} .af_bar, .af_abc {font-size: 12px; color: black; border-width: 1px} .af_xyz {color: red} Because of this grouping, it is possible that the order of the skin selectors in the skin css file is not the same as the ordering of the css-2 selectors in the generated css file. The point of telling you about the reordering of the css selectors is so that you know not to rely on the ordering of your css selectors. And if you must, then doing something like what you did (making the specificity stronger) is a workaround. Thanks, Jeanne vogeljo wrote: Hi, i happen to notice that with trinidad skinning my own css-classes are listed in the first place and therefore were overwritten by the following default trinidad css-classes: <div class="myClass af_navigationPane_bar"> To ensure that a navigationPane-link will be rendere in my css-style i have to write .myClass af|navigationPane::bar-active-enabled af|navigationPane::bar-content A { color: #000; } I would like to know if i got that right or if there are easier ways to get that result?