Customizing pricing tables (Width, Height, Sizes & Colors)

Support
#1

Hello, I’m wondering if it’s possible to customize the width on my pricing tables and add a little bit of shadow behind each table so it looks more “popout” than just a layer on the background.

Is it possible to make buttons smaller but still same look as global settings? Also, is it possible to change the color of all the text and for example the background in the “PRO Table header”

The pictures above is from Mobile and PC view.

Edit: Is it even possible maybe to make the pricing table side by side on mobile view? Like 2 and 2.

Thanks,
Max

#2

Hi Max,

Thank you for writing in, please add this to your Page > CSS

/*change the text color*/
.x-pricing-table {
	color: red;
}
/*shadow around the table columns*/
.x-pricing-table.four-columns .x-pricing-column {
	box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.50);
}
/*adjust button size*/
.x-pricing-column-info .x-btn {
	font-size: 16px;
    padding: 0.5em 1em;
}
/*featured column background color*/
.x-pricing-column.featured h2 {
	background-color: red;
}

Fill free to adjust those color values.

Regretfully we can not change the width of the table column because that will mess up the responsiveness in mobile. It is possible to make the table columns inline in mobile, but we can’t recommend that because your content inside the column will look squeeze on a small screen.

Hope it helps,
Cheers!

1 Like
#3

Thanks, worked really well.

If it’s okay I would like to ask if it’s possible to change the color of a specific button. If I wanna make the pricing table “PRO” button white for example?

All the best,
Max

#4

Hey Max,

Please try this code:

.x-pricing-column.featured a.x-btn {
    border-color: #fff;
    background-color: #fff;
    color: rgb(255,69,0);
    text-shadow: none;
}

Here are some related links for further reading:

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.