• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Table alternate row color on XF pages

Andy.N

Well-known member
#1
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.
 

Jake Bunce

XenForo moderator
Staff member
#2
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.
 

Andy.N

Well-known member
#3
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.
 

Andy.N

Well-known member
#4
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; 
}