Hi Joris,

Just after posting my previous message, I saw what the real problem is: in 
my case, I apply my custom style to the TR element, which is the parent of 
the TD's. (<TR><TD>...</TD><TD>...</TD></TR>) That's why I can write 
.myStyle td.trinidadStyle in my CSS. (In CSS, two class names separated by 
a space means "every element of class trinidadStyle which has a parent of 
class myStyle".) In your case, you're applying your own style to the same 
element the trinidad style is applied to. In that case it should be enough 
to define only your own style in the CSS. The reason you cannot see any 
difference is perhaps that your style is overridden by the trinidad 
style... I'm not a real CSS guru, but I know there are ways to mark 
certain properties as important, so that they will not be overridden. I 
hope that gives you enough hints to Google around a bit more. 

Best regards,
Bart



Joris Kimpe <[EMAIL PROTECTED]> 
19-06-2008 14:16
Please respond to
"MyFaces Discussion" <[email protected]>


To
[email protected]
cc

Subject
Re: [TRINIDAD] Table with each row own css style







Hi Bart,

your answer is very helpfull (I think), but in my html code (in firebug)
shows:
<td class="calculationOverviewTable_week af_column_cell-text
OraTableBorder1111"><!--Start:
org.apache.myfaces.trinidad.Output["j_id_jsp_1239635067_13j_id_1"]-->do,
19-06-2008</td>


In my css file, I added this:
calculationoverviewtable_week td.af_column_cell-text {
background-color:#FFFFFF;
vertical-align:top;
}
.calculationOverviewTable_weekend td.af_column_cell-text {
background-color:#99CCFF;
vertical-align:top;
}


But my style isn't applied...

Do you know what's wrong?

Thanks!



bkummel wrote:
> 
> Hi Joris,
> 
> I think the best thing you can do is reading the documentation on 
Trinidad 
> Skinning first. Trinidad does some "magic tricks" with CSS files, which 
is 
> explained there. The skinning documentation is part of the Developer 
Guide 
> and can be found here (for version 1.2.x): 
> http://myfaces.apache.org/trinidad/devguide/skinning.html. The first 
thing 
> you should change in your application is adding the following setting to 

> your web.xml:
>     <context-param>
>         <param-name>
> org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
>         <param-value>true</param-value>
>     </context-param>
> This will prevent the use of "x7a xbd", which are compressed CSS class 
> names. Then you can see which classes are appended. I had a similar 
> situation and figured out this:
> .selectedRow td.af_column_cell-text-band {
>     background-color: rgb(0, 0, 200);
>     font-weight: bold;
>     color: rgb(255, 255, 255);
> }
> In this case ".selectedRow" is my custom classname. 
> "af_colum_cell-text-band" is the name that Trinidad appended. And "td" 
is 
> the element on which it was applied.
> 
> One last tip: for debugging CSS issues, I highly recommend the use of 
> Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843), a Firefox 

> plugin for debugging HTML, CSS, etc. Good luck!
> 
> Best regards,
> Bart Kummel
> 
> Joris Kimpe <[EMAIL PROTECTED]> wrote on 19-06-2008 10:55:18:
> 
>> 
>> Hi all,
>> 
>> I have a table (containing days) where I want the weekdays to have a
>> different css style than Saturday and Sunday. 
>> 
>> In my jsp I used a variable styleClass:
>>    <tr:table value="#{backingBean.dataModel}" var="row" width="100%">
>>       <tr:column width="10%" styleClass="overviewTable_#{row.dayType}">
>>          <f:facet name="header">
>>             <tr:outputText value="#{text['date']}"/>
>>          </f:facet>
>>          <tr:outputText value="#{row.date}" converter="DateConverter"/>
>>       </tr:column>
>>       ...
>>    </tr:table>
>> 
>> 
>> The generated html looks like this:
>> ...
>> <td class="calculationOverviewTable_week x7a xbd">
>> ...
>> <td class="calculationOverviewTable_weekend x7a xbd">
>> ...
>> 
>> 
>> Why are there some additions (x7a xbd), and how do I have to implement 
> my
>> css file(s)?  Because my styles aren't applied...
>> 
>> 
>> My css file has now this:
>> .overviewTable_week {
>>    vertical-align:top;
>>    background-color:#ffffff;
>> }
>> 
>> .overviewTable_weekend {
>>    vertical-align:top;
>>    background-color:#99CCFF;
>> }
>> 
>> Thanks!
>> 
>> -- 
>> View this message in context: http://www.nabble.com/-TRINIDAD--
>> Table-with-each-row-own-css-style-tp18000357p18000357.html
>> Sent from the MyFaces - Users mailing list archive at Nabble.com.
>> 
> 
> 

-- 
View this message in context: 
http://www.nabble.com/-TRINIDAD--Table-with-each-row-own-css-style-tp18000357p18007656.html

Sent from the MyFaces - Users mailing list archive at Nabble.com.


Reply via email to