You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Joris Kimpe <jo...@get.be> on 2008/06/19 10:55:18 UTC
[TRINIDAD] Table with each row own css style
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.
Re: [TRINIDAD] Table with each row own css style
Posted by Scott O'Bryan <da...@gmail.com>.
Yes. Likewise if you wanted to skin it you could do:
af|column::cell-text .overviewTable_weekend {
}
That would work as well from a skinning file and should work when you
re-enable content compression. :)
Scott
Joris Kimpe wrote:
> It seems I had to do this:
>
> td.overviewTable_week {
> vertical-align:top;
> background-color:#ffffff;
> }
>
> td.overviewTable_weekend {
> vertical-align:top;
> background-color:#99CCFF;
> }
>
>
>
> bkummel wrote:
>
>> 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 <jo...@get.be>
>> 19-06-2008 14:16
>> Please respond to
>> "MyFaces Discussion" <us...@myfaces.apache.org>
>>
>>
>> To
>> users@myfaces.apache.org
>> 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 <jo...@get.be> 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.
>>
>>
>>
>>
>>
>
>
Re: [TRINIDAD] Table with each row own css style
Posted by Joris Kimpe <jo...@get.be>.
It seems I had to do this:
td.overviewTable_week {
vertical-align:top;
background-color:#ffffff;
}
td.overviewTable_weekend {
vertical-align:top;
background-color:#99CCFF;
}
bkummel wrote:
>
> 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 <jo...@get.be>
> 19-06-2008 14:16
> Please respond to
> "MyFaces Discussion" <us...@myfaces.apache.org>
>
>
> To
> users@myfaces.apache.org
> 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 <jo...@get.be> 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.
>
>
>
>
--
View this message in context: http://www.nabble.com/-TRINIDAD--Table-with-each-row-own-css-style-tp18000357p18008995.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
Re: [TRINIDAD] Table with each row own css style
Posted by Ba...@Koopmanint.com.
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 <jo...@get.be>
19-06-2008 14:16
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
users@myfaces.apache.org
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 <jo...@get.be> 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.
Re: [TRINIDAD] Table with each row own css style
Posted by Ba...@Koopmanint.com.
Hi Joris,
The first thing I notice, is that the first entry in you CSS does not
start with a period (.). The second thing is probably a typo too: in your
CSS the letters O and T in calculationOverviewTable should be capitals.
Could that be the problem?
Best regards,
Bart
Joris Kimpe <jo...@get.be>
19-06-2008 14:16
Please respond to
"MyFaces Discussion" <us...@myfaces.apache.org>
To
users@myfaces.apache.org
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 <jo...@get.be> 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.
Re: [TRINIDAD] Table with each row own css style
Posted by Joris Kimpe <jo...@get.be>.
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 <jo...@get.be> 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.
Re: [TRINIDAD] Table with each row own css style
Posted by Ba...@Koopmanint.com.
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 <jo...@get.be> 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.
>