Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
  • #844234

    Hi, the table is located on this page:

    Currently, both columns have blue header rows. I would like to be able to replace all the blue in the first column with a ligher shade of blue.


    Hey Trent,
    Try this code in the General Styling > Quick CSS field:

    .avia-highlight-col li.avia-heading-row, .avia-highlight-col .pricing-extra, .avia-highlight-col  li.avia-pricing-row {background-color: #3e6d99!important; }

    This changes the background-color of the second column to the color it is now, this will allow you to first change the color of both columns to the lighter color you want for the first column in the editor, then use this code.
    The second column has additional class called “avia-highlight-col” so we could target it, while targeting the first column changed the colors of both.

    Best regards,



    Thanks for sending the code. I copied it into the Quick CSS spot and nothing changed. Both columns remain the same color of blue that there were before I inserted the code snippet you provided.

    Perhaps you think I know how to write CSS? I don’t. My skills are limited to copy/paste and perhaps changing a color code number.

    I need instructions that are: step 1: do this, step 2: do this, etc…



    Hi Trent,

    The code Mike gave you is applied, it’s just that there is not a huge difference in color, so it might seem, like nothing has changed.
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    .main_color .pricing-table li.avia-heading-row,
    .main_color .avia-highlight-col li.avia-heading-row, 
    .main_color .avia-highlight-col .pricing-extra, 
    .main_color .avia-highlight-col  li.avia-pricing-row {background-color: #3e6d99 !important; }

    To test this code, you can write “red” instead of hex color and you will see that it gets applied.
    If you need further assistance please let us know.
    Best regards,

    This reply has been marked as private.

    Hi Trent,

    Please you try this code instead:

    .main_color .pricing-table-wrap:first-child .pricing-table li.avia-heading-row,
    .main_color .pricing-table-wrap:first-child .pricing-table li.avia-heading-row .pricing-extra
    .main_color .pricing-table-wrap:first-child .pricing-table li.avia-pricing-row {background-color:#578adb !important;}

    This should change the background colors of the header and pricing rows of the first column to #578adb, the color of your button.

    If that doesn’t work either, we may need temporary admin access into your website so that we can take a closer look.

    Best regards,


    Hi Sarah,

    That didn’t work. temp login details are in the private content area of the original ticket.



    Try this code:

    .main_color .pricing-table-wrap:first-child .pricing-table li.avia-heading-row,
    .main_color .pricing-table-wrap:first-child .pricing-table li.avia-heading-row .pricing-extra,
    .main_color .pricing-table-wrap:first-child .pricing-table li.avia-pricing-row {background-color:#578adb !important;}

    I added the “,” in the second rule.

    Best regards,
    John Torvik


    Still no change. Both columns are the same color.


    I was unable to login, please check user & password

    Best regards,


    Add credentials to Private Content


    OK, I have checked your Quick CSS and found you have javascript mixed in braking the css rules. I moved the css above the javascript and it works fine now. Please see screenshot in private content area. Please clear your cache.

    Best regards,


    That worked. Thanks so much!


    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Need to change the color column 1 of the pricing table’ is closed to new replies.