Pricing Table Customization

[bluetroop2]

Please see the attached screenshot. Can you send me some CSS code that will allow me to customize the top Header area of the Pricing Table. I’d like to specifically change the text color and the table cell background. Can you please help?

[ruenel]

Hello @bluetroop2,

Thanks for writing in!

By default, the button colors can be changed in X > Theme Options > Buttons. And if you want to have different button colors for the pricing table only, you can make use of this code:

.x-pricing-column .x-btn {
    background-color: green;
    color: yellow;
}

To change the background color of the headline in the pricing columns, you can use this code:

.x-pricing-column h2 {
    background-color: #faf;
}

If you only want to change certain column, you can target the column using this code:

.x-pricing-column:nth-child(3) h2 {
    background-color: red;
    color: white;
}

I used distinct colors for you to easily identify the changes.

Hope this helps.

[bluetroop2]

Thank you. This is helpful, but with regard to the background color of the headlines in the pricing columns, how would I apply customization if I want these areas (a total of 5) to be different colors? For example we are applying a Bronze, Gold, Silver, Platinum, etc. cost tier levels. I also need to know how to apply different colors to the headline text as well. Can you help me with this?

[ruenel]

Hello @bluetroop2,

Thanks for updating in!

if you want to have different colors in each of the columns, simply edit the pricing table and in each of the pricing column, find the class field and insert your custom color class. You can use this custom css to have a different color for the column.

1.)

2.)

3.) Use this code:

 .x-pricing-column.bronze h2 {
    background-color: #e5e5;
    color: white;
}

Repeat #1 to #3 and just replace “.bronze” with whatever is your custom class for the column. And of course, do not forget the change the colors as well.

Hope this helps.

[bluetroop2]

Works great. Thank you very much.

[ruenel]

You’re welcome @bluetroop2!
Thanks for letting us know that it has worked for you.