[eveallParticipant]

Hi there, i’ve searched the knowledge base but only came upon short codes.

How can i change the look of the pricing table in Corner Stone? I’d like the header a different colour and maybe alternate rows different shading, and customize the link in the button. Is this all done via CSS or can you actually do it right in cornerstone?

Thanks in advance,

Steve

[RupokMember]

Hi Steve,

Thanks for writing in! If you just want to change color, add shadows etc. then it would be possible through custom CSS. Let’s provide your URL where you have used the table and provide a mockup of what you are trying to achieve. We’ll try to tailor some code for you.

Cheers!

[eveallParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-pricing-column h2 {
    background-color: #416941;
    color: #fff;
}
.x-pricing-column ul.x-ul-icons li:nth-child(2n+1) {
    background-color: red;
    color: #fff;
}
.x-pricing-column ul.x-ul-icons li:nth-child(2n) {
    background-color: #00ff11;
    color: #fff;
}
.x-pricing-column-info h3 {
    background-color: #000;
    color: #fff;
}

.x-pricing-column ul.x-ul-icons {
    margin: 0;
}
.x-pricing-column-info {
    padding-top: 0;
}

Hope that helps.

[eveallParticipant]

Great. Don’t like the look, but at least i can see what to change. How about the columns. Right now the rows are different colours. Say i wanted the first header to be green, the second to be red, and the third to be green. How would i do that. From there, i’d probably just keep the pricing the way you have it and then for the features just keep it like it was in the original.

[JoaoModerator]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

.x-pricing-column h2 {
    background: red;
}

.x-pricing-column h2:nth-child(2n+1) {
    background: yellow;
}

.x-pricing-column h2:nth-child(2n) {
    background: green;
}

Hoow that helps

Joao

[eveallParticipant]

Hey there, thanks so much, I think i’ve figured most of it out with your help. Four more questions though:

1. I’m trying to change the colour of the featured column header using this code:

/* Featured Column Header Color */

.x-pricing-column.featured h2 { 
    background: #d0021b;
}

but it’s not changing.

2. How can I change the font size of the price? It’s very large and dominating.

3. How can I change the colour and border of the buy now buttons?

4. How can I make this CSS only apply to a specific table?

Here’s the entire code I’m using, along with a little translation for me since i don’t speak this language at all!

/* Pricing Table Code */

/* First Row Main Header */

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

/* Features Odd Rows */

.x-pricing-column ul.x-ul-icons li:nth-child(2n+1) {
    background: #e5e5e5;
    color: #000;
}

/* Features Even Rows */

.x-pricing-column ul.x-ul-icons li:nth-child(2n) {
    background-color: #cccccc;
    color: #000;
}

/* Pricing Row */

.x-pricing-column-info h3 {
    background-color: #000;
    color: #fff;
}

/* Featured Column Header Color */

.x-pricing-column.featured h2 { 
    background: #d0021b;
}

/* Featured Column Header Color */

[type="submit"] {
   background: ##d0021b;
   border-color: ##940113;
}

/* Check Mark Color  */

.x-pricing-column i.x-icon-check {
    color: #416941;
}

/* Times Color  */

.x-pricing-column i.x-icon-times {
    color: #d0021b;
}

[FriechModerator]

Hi There,

#1 That code works, I am not seeing it on your Custom CSS on Customizer. Where did you place it?

#2 Add this on your custom CSS, feel free to adjust the 250% value

.x-pricing-column-info h3.x-price {
	    font-size: 250%;
}

#3 Add this CSS

.x-pricing-table .x-btn,
.x-pricing-table .button,
.x-pricing-table [type="submit"] {
	border-color: black;
    background-color: red;
}

#4 Add a class to your table (e.g my-table), and then update your custom CSS to this:

/* Pricing Table Code */

/* First Row Main Header */

.my-class .x-pricing-column h2 {
    background: #416941;
    color: #fff;
}

/* Features Odd Rows */

.my-class .x-pricing-column ul.x-ul-icons li:nth-child(2n+1) {
    background: #e5e5e5;
    color: #000;
}

/* Features Even Rows */

.my-class .x-pricing-column ul.x-ul-icons li:nth-child(2n) {
    background-color: #cccccc;
    color: #000;
}

/* Pricing Row */

.my-class .x-pricing-column-info h3 {
    background-color: #000;
    color: #fff;
}

/* Featured Column Header Color */

.my-class .x-pricing-column.featured h2 { 
    background: #d0021b;
}

/* Featured Column Header Color */

.my-class [type="submit"] {
   background: ##d0021b;
   border-color: ##940113;
}

/* Check Mark Color  */

.my-class .x-pricing-column i.x-icon-check {
    color: #416941;
}

/* Times Color  */

.my-class .x-pricing-column i.x-icon-times {
    color: #d0021b;
}

Hope it helps, Cheers!

[eveallParticipant]

Hey, totally helped! Think i might post the final code in a new thread so it makes it easier for people to adjust. Especially for those who like me, don’t speaka the codey language

1. It’s in the css in my child theme. I tried adding !important to it and that did the trick.
2. Perfect.
3. Right on.
4. So to implement this, i would put “my-class” in the class section of the pricing table in CornerStone? Or is it “.my-class”?

Thanks again for your help.

[ChristianModerator]

You need to use “my-class”. No dot.

Thanks.

[eveallParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

Please add the following code to Appereane > Customizer > Custom > CSS

.x-pricing-column.featured .x-pricing-column-info {
     padding-bottom: 0px;
}

.x-pricing-column-info {
    border: none;
}

[eveallParticipant]

That worked perfectly! Thanks so much for all your help!

Cheers,

Steve

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts