Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 9, 2021 at 12:20 am #1278871
    gregcarrollLMG

    Hi

    i have the same pricing table on three pages
    I would like to change the colours on each table to different colours
    how can i do that ?

    thanks

    February 9, 2021 at 6:55 am #1278935
    Jordan Shannon

    Hey gregcarrollLMG,

    You would need to target each individual table with css. What colors are you needing?

    Best regards,
    Jordan Shannon

    February 9, 2021 at 11:20 am #1279002
    gregcarrollLMG

    Hi

    I don’t know the specific colour as yet. Can i add a hex code to the css ?

    When you say target each table do you mean i have to give each an ID first ?

    what CSS would i need please

    thanks

    February 9, 2021 at 2:53 pm #1279098
    Nikko

    Hi gregcarrollLMG,

    I don’t know the specific colour as yet. Can i add a hex code to the css ?
    Yes.

    When you say target each table do you mean i have to give each an ID first ?
    No, you just need to add an ID to the Color Section.
    Edit the Color Section (where the tables are placed), go to Advanced > Custom ID Attribute put pricing-table

    Then you can use the following CSS code:

    First Column All Cells:

    #top #pricing-table .avia-table > .pricing-table-wrap:first-child li {
    background-color: #0000ff;
}

    First Column Heading Cell:

    #top #pricing-table .avia-table > .pricing-table-wrap:first-child li.avia-heading-row {
    background-color: green;
}

    Second Column All Cells:

    #top #pricing-table .avia-table > .pricing-table-wrap:nth-child(2) li {
    background-color: #0000ff;
}

    Second Column Heading Cell:

    #top #pricing-table .avia-table > .pricing-table-wrap:nth-child(2) li.avia-heading-row {
    background-color: green;
}

    Third Column All Cells:

    #top #pricing-table .avia-table > .pricing-table-wrap:nth-child(3) li {
    background-color: #0000ff;
}

    Third Column Heading Cell:

    #top #pricing-table .avia-table > .pricing-table-wrap:nth-child(3) li.avia-heading-row {
    background-color: green;
}

    Fourth Column All Cells:

    #top #pricing-table .avia-table > .pricing-table-wrap:nth-child(4) li {
    background-color: #0000ff;
}

    Fourth Column Heading Cell:

    #top #pricing-table .avia-table > .pricing-table-wrap:nth-child(4) li.avia-heading-row {
    background-color: green;
}

    Just change the colors as you see fit.
    Hope this helps.

    Best regards,
    Nikko

    February 12, 2021 at 2:11 pm #1280031
    gregcarrollLMG

    hi nothing is changing

    here is what i put in the Quick CSS – this is for the table that can be seen on the “work” page
    }
    Second Column Heading Cell:
    #top #pricing_table_work .avia-table > .pricing-table-wrap:nth-child(2) li.avia-heading-row {
    background-color: #074d8f;
    }

    }
    Third Column Heading Cell:
    #top #pricing_table_work .avia-table > .pricing-table-wrap:nth-child(3) li.avia-heading-row {
    background-color: #074d8f;
    }

    }
    Fourth Column Heading Cell:
    #top #pricing_table_work .avia-table > .pricing-table-wrap:nth-child(4) li.avia-heading-row {
    background-color: #074d8f;
    }

    February 14, 2021 at 3:59 am #1280347
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    February 15, 2021 at 11:11 am #1280487
    gregcarrollLMG

    Hello i have tried that but it is still not working

    February 17, 2021 at 2:03 pm #1281734
    Ismael

    Hi,

    Thank you for the update.

    We adjusted the css code a bit and disabled the Performance > File Compression settings temporarily. The changes are now being reflected on the front end, and all you need to do now is adjust the color values as you prefer.

    For example, this code changes the heading of the first column inside the #pricing_table-lwp section.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:first-child li.avia-heading-row {
    background-color: #0000ff;
}

    And this one changes the heading of the second column inside the same section.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:nth-child(2) li.avia-heading-row {
    background-color: green;
}

    And for the third column.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:nth-child(3) li.avia-heading-row {
    background-color: red;
}

    It is done using the nth-child selectors, so you can just follow the same pattern for the succeeding columns.

    Best regards,
    Ismael+

    February 17, 2021 at 5:03 pm #1281813
    gregcarrollLMG

    hi thats great

    great, what would i have to add to change the text colours for elements within the table to a hex code for example
    If i wanted to change the colour away from the default green that this goes to. is this something i can do in the cell or is it on a more general CSS level like changing the backgrounds above

    <u>1 App Membership</u>
    Live + Work + Play

    February 19, 2021 at 1:08 pm #1282203
    Ismael

    Hi,

    Yes, you would have to adjust it with css if you want the color of that particular table to be different from the default color.

    To change the style of the elements inside a specific column or table, we will try to explain what we did above. This selector targets the first column of the table inside the pricing_table-lwp section.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:first-child

    .. so if you want to change anything inside that column, just prepend the selector of the target element to that selector. In order to change the style of the first cell inside the first column, you can try this css code.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:first-child .pricing-table li:nth-child(2) {
    background: red;
}

    For the second cell.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:first-child .pricing-table li:nth-child(3) {
	background: red;
}

    Third:

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:first-child .pricing-table li:nth-child(4) {
	background: red;
}

    Again, we are using nth-child selectors to target a child element inside a parent container.

    // https://css-tricks.com/almanac/selectors/n/nth-child/

    As you may have noticed, we did not use nth-child(1) because the first cell is the heading row, which we already adjusted above using its unique class name avia-heading-row.

    #top #pricing_table-lwp .avia-table .pricing-table-wrap:first-child li.avia-heading-row {
    background-color: #0000ff;
}

    Best regards,
    Ismael

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