Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 21, 2014 at 8:20 am #307213
    Sladestyle

    Hi, I realize this has been asked to death but I have tried several different solutions that were given on this support forum and none of them seem to be able to change the colors.

    I have 1 Pricing table with 3 columns. I need each column to have a different color. The site is here: http://sladestyle.com/melita-group/test2/

    I have added the Custom CSS Class ‘product-pricing’ for this pricing table.

    Here is the latest CSS I’ve placed into the custom CSS:

    .product-pricing .alternate_color .pricing-table li.avia-pricing-row:nth-child(0), .alternate_color .pricing-table li.avia-heading-row:nth-child(0){
    background-color: #0073D0;
    }
    .product-pricing .alternate_color .pricing-table li.avia-pricing-row:nth-child(1), .alternate_color .pricing-table li.avia-heading-row:nth-child(1){
    background-color: #44AC4F;
    }
    .product-pricing .alternate_color .pricing-table li.avia-pricing-row:nth-child(2), .alternate_color .pricing-table li.avia-heading-row:nth-child(2){
    background-color: #F16C43;
    }

    What am I doing wrong?

    Thanks!
    Slade

    August 21, 2014 at 10:39 am #307253
    Günter

    Hey Slade!

    Thank you for using our theme.

    Try the following and adjust the value of the color for each nth-child:

    
.pricing-table.avia-center-col > li:nth-child(5) {
    background-color: red !important;
}

    Cheers!
    Günter

    August 21, 2014 at 10:51 am #307256
    Sladestyle

    Hi Gunter! Thanks for the reply.

    That code changes the color of a specific row within the column…but it also changes the row of all 3 columns. Altering the “li:nth-child(#)” moves which row is being altered but that isn’t what I need.

    I need each column (the pricing table has 3) to have their own color scheme.

    Is that possible?

    August 21, 2014 at 11:06 am #307263
    Günter

    Hi!

    This should do for a single column:

    
.avia-pricing-table-container > .pricing-table-wrap:nth-child(1) > .pricing-table.avia-center-col > li:nth-child(5) {
    background-color: red !important;
}

    Best regards,
    Günter

    August 21, 2014 at 11:25 am #307271
    Sladestyle

    ah yes! worked perfect! Thanks!

    August 21, 2014 at 12:24 pm #307295
    Günter

    Hey!

    Glad I could help you. Come back with any further questions.

    Enjoy the theme.

    Regards,
    Günter

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Different Colored Pricing Table Columns’ is closed to new replies.