1. 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

Discussion in 'Styling and Customization Questions' started by Andy.N, Jul 27, 2012.

  1. Andy.N

    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.
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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 likes this.
  3. Andy.N

    Andy.N Well-Known Member

    Thanks a lot Jake.
    Let me try to digest what you just said.
  4. Andy.N

    Andy.N Well-Known Member

    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
    .pagenode_container #hor-zebra
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    .pagenode_container #hor-zebra th
    font-size: 13px;
    font-weight: bold;
    padding: 8px;
    background: #457491;
    border-bottom: 1px solid #fff;
    color: #fff;
    .pagenode_container #hor-zebra td
    padding: 2px;
    .pagenode_container #hor-zebra .odd
    background: #e8edff; 
  5. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Looks good.
  6. Andy.N

    Andy.N Well-Known Member

    Thank for your help, jake

Share This Page