Docs

[clovisd]

Hey Guys!

So I’ve got a basic pricing table and I’m trying to get each section’s header to be a different color.

For example:
Basic would be Red
Standard would be Yellow
Pro would be Blue

I’ve tried just doing: <span style=”color: #5555ff;”>Pro</span> but that doesn’t seem to work.

Any ideas? I wasn’t able to find an mention on the forums about people trying to change it per column.

Thanks!
Cl

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[clovisd]

This reply has been marked as private.

[Christopher]

Hi there,

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

.x-pricing-column:last-of-type h2 {
    background-color: #28ab26;
}
.x-pricing-column h2 span {
    color: #000;
    font-size: 1.3rem;
}
.x-pricing-column h2 {
    background-color: red;
}

Hope that helps.

[clovisd]

Hey!

That does point me in the right direction. I took your response above and modified it. Here’s the CSS I’ve been using/modified from the one above (commented):

/* First Column */
.x-pricing-column:first-of-type h2 {
    color: #FF5555;
    background-color: #ffe5e5;
}
/* Second Column */
.x-pricing-column h2 {
    color: #a81516;
    background-color: #ffadae;
}
/* Third Column */
.entry-thumb:before, .x-pagination span.current, .flex-direction-nav a, .flex-control-nav a:hover, .flex-control-nav a.flex-active, .mejs-time-current, .x-dropcap, .x-skill-bar .bar, .x-pricing-column.featured h2, .h-comments-title small, .x-entry-share .x-share:hover, .x-highlight, .x-recent-posts .x-recent-posts-img:after {
	color: #ffa107;
	background-color: #ffd898;
}
/* Forth Column */
.x-pricing-column:last-of-type h2 {
    color: #4e4fff;
    background-color: #ccccff;
}
/* Alternating Rows */
.x-pricing-column-info ul>li:nth-child(2n+1) {
	background-color: #fff;
}

Using this, I’m able to get the first two rows with different font/background colors (which is what I was trying to achieve). However, I’m also trying to modify the background for the Featured Column but the color’s being overridden (see here: http://imgur.com/a/zBRk8) by the darker variant. Any idea how to achieve that?

I’m trying to achieve something very specific using the pricing table. 🙁

Thanks in advance!

[Rue Nel]

Hello There,

Thanks for updating in! You must add a custom class in your pricing table. You can insert a custom class like my-table in the class field and then you can use a custom code like this:

.my-table .x-pricing-column h2 {
    color: red;
    background-color: black;
}

.my-table .x-pricing-column.featured h2 {
    color: green;
    background-color: yellow;
}

I have used different colors so that it is easy to spot which one is applied. Feel free to change the colors when needed.

Please let us know how it goes.

[clovisd]

This worked great! Thanks for the help. 🙂

[Lely]

You’re always welcome!

Cheers.

[Author]

Posts