Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 20, 2022 at 3:00 am #1336283
    prerules

    I am hoping to get some help on customizing the colors of the pricing tables.
    I have various pages on my site that have tables where I would like to change the background color of the heading row and the pricing row. I know this is a CSS thing, but I don’t understand that.

    I have a page here: https://www.coloradorunnerevents.com/santa/registration/
    I want the heading row red and the pricing row blue, like in the logos in the right column (red = #bf2029, blue = #4eb2cd).

    Then on a different page, I want different colors: https://www.coloradorunnerevents.com/cookie/registration/
    I want the heading row the light brown of the button and the pricing row the dark brown of the logo (light = #daa24e, dark = #5b4f46)

    I think I can do this via a custom CSS block at the start of the page, but I am not sure how to do it.

    Once I understand how to do it, then I can do it on the 10 other pages where I want to make a change to different colors.

    I would also want to know how to change the text color from white to black if I need to.

    Thanks!

    January 20, 2022 at 7:28 am #1336296
    Rikard

    Hey prerules,

    Please try the following in Quick CSS under Enfold->General Styling:

    First page:

    .page-id-4166 .pricing-table li.avia-heading-row {
    background-color: #bf2029;
    border-color: #bf2029;
}

.page-id-4166 .pricing-table li.avia-pricing-row {
    background-color: #4eb2cd;
    border-color: #4eb2cd;
}

    Second page:

    .page-id-4468 .pricing-table li.avia-heading-row {
    background-color: #daa24e;
    border-color: #daa24e;
}

.page-id-4468 .pricing-table li.avia-pricing-row {
    background-color: #5b4f46;
    border-color: #5b4f46;
}

    Best regards,
    Rikard

    January 20, 2022 at 6:14 pm #1336426
    prerules

    This works perfectly! Thank you.

    I actually used a custom CSS box on the page itself to help with overall site speed. I feel if I add up to 20 different CSS options in the Quick CSS box, then it will slow the site down a bit. Do you think this is the case?

    January 21, 2022 at 6:59 am #1336470
    Rikard

    Hi,

    Thanks for the update. If the CSS is page specific as in this case, then it’s likely better to put it in the custom CSS box, yes :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.