Changing Individual Elements of Pricing Table

Support
#1

Hi,

My Site: www.thecvcode.com

If you see the top pricing table on my site, how would I make the following changes?:

First column: Title, price and button to be #F26522.
Second column: Title, price and button to be #00AA70
Third column: Title Price and button to be #31B7E7

Regards,

Alex

#2

Hi There,

Add a class to each of your Pricing Table Columns, for example, pricing-table-1 , pricing-table-2 , pricing-table-3

Add the following code to Cornerstone CSS

.pricing-table-1 .x-pricing-column-info .x-btn {
 
    background: black;
    border: black;
}

.pricing-table-2 .x-pricing-column-info .x-btn {

    background: black;
    border: black;
}

.pricing-table-3 .x-pricing-column-info .x-btn {
  
    background: black;
    border: black;
}

Hope it helps

#3

Hi Joao,

Thanks I have tried what you suggested and it worked perfectly, however is there a way to change the colour of the Most Popular heading(at the top of the 2nd column)?

Is there a way to add a small gap between the pricing columns so that they are not pressed up against each other?

Regards,

Alex

#4

Hello There,

Thanks for updating in!

To change the colour of the Most Popular heading, you can make use of this code:

.x-pricing-column h2 .x-featured-sub {
    color: red;
    opacity: 1;
}

Feel free to change the color.

And to add a small gap between the pricing columns, you can make use of this code:

.x-pricing-table.three-columns .x-pricing-column {
    width: 32.666666%;
    margin-right: 1%;
}

.x-pricing-table.three-columns .x-pricing-column:last-of-type {
    margin-right: 0;
}

Hope this helps. Please let us know how it goes.

#5

Hi,

Thanks I played around with the code you gave me, it was very helpful.

For my last modification I would like to change the colour of the ticks in the pricing table at the bottom of my page to green, is this possible?

#6

Hi There,

Please also add this CSS:

.x-pricing-column-info ul>li [class*="x-icon-"] {
    color: #00aa70
}
#7

Brilliant thanks a lot!

#8

You’re welcome.

#9

@thai @Staff :

I need another modification to this item: Is it possible to change the color of the checkmarks to green, and the X’s (times) to red? I thought the “x-icon” would change the X color but it changed them all to the same color. I want to differentiate the check-mark items and the X items.

#10

Hi There,

Please add the following code to Theme Options CSS or Cornerstone CSS

.x-pricing-column-info ul>li [class*="x-icon-check"] {
    color: green;
}
.x-pricing-column-info ul>li [class*="x-icon-times"] {
    color: red;
}

Hope it helps