Docs

[Shan_HBG]

Hello,

I have been searching the forum and trying suggestions to format my pricing table. (See screenshot, attached.)

Can you please help me with the right CSS selectors so that I can change the border-width and color for the “featured” column? (I don’t want the thick, dark blue border you see in the screenshot.)

Also, can I please have CSS selectors to play with the format on the title, price and interval (e.g., “Mini”, “$75” and “Limited Offer” from my screenshot.) And also the CSS selector for the background color in the main box (the same box the price and “buy now” button are in.)

I’m would really appreciate it! I tried several variations last night in my code, but couldn’t quite figure it out. I looked at the inspector in Chrome, and tried the selectors that seemed appropriate. I get a little confused about that part …

Thank you so much!
Shannon

[Shan_HBG]

This reply has been marked as private.

[Shan_HBG]

Trying to attach the screenshot, again. I don’t see it in my post above.

[Friech]

Hi There,

Thanks for writing in! To style the feature column heading border, you can add this under Custom > CSS in the Customizer.

body .x-pricing-column.featured h2 {
    border: 5px solid #000;
}

Or if you need it to remove just replace the value with none. (e.g. border: none;)

And this is to style the column heading, price, and interval.

body .x-pricing-column h2,
body .x-pricing-column-info .x-price,
body .x-pricing-column-info span {
	color: blue;
	font-size: 1.1em;
    font-style: italic;
    font-weight: bold;
}

Hope it helps, Cheers!

[Shan_HBG]

Oh, thank you so much! I will try this code out in the morning. 🙂

Also – how can I change the background color in the main box (the same box the price and “buy now” button are in.), please?

It is so great to work with X … this forum is a lifesaver. Thank you, again.

[Christopher]

Hi there,

The provided URL displays 404 page, please check it.

Thanks.

[Shan_HBG]

This reply has been marked as private.

[Shan_HBG]

Nevermind – got it:

.x-pricing-column-info {
background-color: #ffffff;
}

Thank you! The rest of the css worked great. 🙂

[Rad]

You’re welcome!

[Author]

Posts