Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #221050

    Hi, I was able to change my table colors on one page, but it’s conflicting with a table in another page.

    Here’s the first page that I changed by adding to the Quick CSS that I found on a different post:
    http://simplyfp.com/how/

    I’m having problem with this page:
    http://simplyfp.com/pricing/

    The pricing table is using the same color as the first table on the ‘how’ page. Is there any way to change the colors on the header and pricing rows on the ‘pricing’ page. Basically, I’m trying to make it so that ‘Simply Starting’ is dark blue and ‘$79/month’ is light blue. Then ‘Advanced Planning’ is dark green’ and ‘$99/month’ is light green and so on for the other column.

    Any help would be appreciated. Thanks!

    #221423

    Hey!

    Try pre-fixing the Page ID to the CSS selectors you are using, for example, for the How page:

    .page-id-1212 table{
    ...
    }

    And for the Pricing one:

    .page-id-1167 table{
    ...
    }

    Best regards,
    Josue

    #222009

    Hi Josue, thanks for the reply. I tried that, but it didn’t seem to work (I’m probably doing something wrong). Here’s what’s in the Quick CSS box:

    .page-id-1212.avia-table-1 .pricing-table li.avia-heading-row { background-color: #2d5c88; color: #ffffff; border-color: #2d5c88; }

    .avia-table-2 .pricing-table li.avia-heading-row { background-color: #2d8949; color: #ffffff; border-color: #2d8949; }

    .avia-table-3 .pricing-table li.avia-heading-row { background-color: #bf6c30; color: #ffffff; border-color: #bf6c30; }

    .avia-table-4 .pricing-table li.avia-heading-row { background-color: #582e87; color: #ffffff; border-color: #582e87; }

    .page-id-1167 table-1 .pricing-table li.avia-heading-row { background-color: #bf6c30; color: #ffffff; border-color: #bf6c30; }

    #222013

    Hey!

    This will do it:

    .page-id-1212 .avia-table-1 .pricing-table li.avia-heading-row { background-color: #2d5c88; color: #ffffff; border-color: #2d5c88; }
    
    .page-id-1167 .avia-table-2 .pricing-table li.avia-heading-row { background-color: #2d8949; color: #ffffff; border-color: #2d8949; }
    
    .page-id-1167 .avia-table-3 .pricing-table li.avia-heading-row { background-color: #bf6c30; color: #ffffff; border-color: #bf6c30; }
    
    .page-id-1167 .avia-table-4 .pricing-table li.avia-heading-row { background-color: #582e87; color: #ffffff; border-color: #582e87; }
    
    .page-id-1167 .avia-table-1 .pricing-table li.avia-heading-row { background-color: #bf6c30; color: #ffffff; border-color: #bf6c30; }

    Change the id-xxx as needed.
    Regards,
    Josue

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Changing multiple table colors on different pages’ is closed to new replies.