Table alternate row color on XF pages

Andy.N

Well-known member
Is it possible to use any of XF template color scheme on an HTML table on XF pages?
This is what I have at the moment which uses tablecloth CSS and JS

Does extra.css apply to XF pages?

Ideally, I like to get rid of external css/js and use the default XF resources to keep the maintenance down.

Many thanks.
 
Does extra.css apply to XF pages?

Yes it does. You can copy the contents of tablecloth.css into EXTRA.css.

Though your CSS simply names table tags. No classes are used. You should apply class names to the table. Or apply .pagenode_container to the beginning of each CSS selector to limit the definitions to page nodes. That way you don't affect tables elsewhere in the software.
 
Yes it does. You can copy the contents of tablecloth.css into EXTRA.css.

Though your CSS simply names table tags. No classes are used. You should apply class names to the table. Or apply .pagenode_container to the beginning of each CSS selector to limit the definitions to page nodes. That way you don't affect tables elsewhere in the software.
Thanks a lot Jake.
Let me try to digest what you just said.
 
Yes it does. You can copy the contents of tablecloth.css into EXTRA.css.

Though your CSS simply names table tags. No classes are used. You should apply class names to the table. Or apply .pagenode_container to the beginning of each CSS selector to limit the definitions to page nodes. That way you don't affect tables elsewhere in the software.
Hi Jake,
I redid the table. You can take a look again and let me know. Is there anything I should do to use more CSS3 and less html table?
I just create a table <table id="hor-zebra">
Here is what I add to extra.css
Code:
.pagenode_container #hor-zebra
{
width: 100%;
text-align: left;
border-collapse: collapse;
}
.pagenode_container #hor-zebra th
{
font-size: 13px;
font-weight: bold;
        text-align:center;
padding: 8px;
background: #457491;
border-bottom: 1px solid #fff;
color: #fff;
}
.pagenode_container #hor-zebra td
{
padding: 2px;
        text-align:center;
}
.pagenode_container #hor-zebra .odd
{
background: #e8edff; 
}
 
Top Bottom