Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 27, 2016 at 11:36 am #572753
    dcashion

    Hi there,
    I have a pricing table with four columns and I’d like to change the background colour of the header row and pricing row in each column, so have four different colours across the table. Could you please give me some pointers as to how I might go about doing this?
    Thanks

    January 27, 2016 at 6:55 pm #573171
    dcashion

    Sorry,
    Just to be clear on the above query. There are other rows in the table that I want to have the standard colour – essentially I’m looking to change the colours of the cells in the first and second row but each column is a different colour.
    See attached link below.

    January 28, 2016 at 3:46 pm #573784
    Vinay

    Hi!

    It’s not clear what you exactly what to do. But as i understand you need to change the background color to a different color for each pricing table correct?

    please try this CSS below 

    
.pricing-table > li:nth-child(2) {
    background:gold!important;
}

    If this is not something you are trying please create a mockup and share the screenshot with us upload the image to imgur.com

    Best regards,
    Vinay

    January 29, 2016 at 6:53 pm #574752
    dcashion

    Hi Vinay
    Thanks for the response. Here’s a visual of what I’m trying to produce. As you can see, I am trying to change the colour of each of the cells in the first two rows of the table. Any suggestions on how I might go about this?
    Thanks
    /D

    February 1, 2016 at 8:28 pm #576003
    Vinay

    Hey!

    Please add the below code in Enfold > General Styling > Quick CSS

    
.pricing-table-wrap:nth-child(1) .avia-heading-row {
background: #818181!important;
}

.pricing-table-wrap:nth-child(1) .avia-pricing-row {
	background: #747371!important;
}

.pricing-table-wrap:nth-child(2) .avia-heading-row {
background: #4C5296!important;
}

.pricing-table-wrap:nth-child(2) .avia-pricing-row {
	background:#3C4086!important;
}

.pricing-table-wrap:nth-child(3) .avia-heading-row {
background: #DD5C4F!important;
}

.pricing-table-wrap:nth-child(3) .avia-pricing-row {
	background: #D05341!important;
}

    Cheers!
    Vinay

    February 1, 2016 at 9:43 pm #576023
    dcashion

    Thanks so much, Vinay.
    That worked perfectly.
    /D

    February 1, 2016 at 10:18 pm #576047
    Basilis

    Hi!

    Glad you got it short out!
    Please do let us know if we can do anything else for you, we will be more than happy to help!

    Regards,
    Basilis

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Changing column colours in pricing table’ is closed to new replies.