In this tutorial you will learn how to customize the CSS of your Pricing Tables.

All of the CSS used by the Pricing Tables is found in the following file:


You can customize this file directly to change color schemes, spacing and more.

Customization Examples

In this section we will look at how to make customizations to the style of the Pricing Tables using the above CSS file.

Color Scheme (Buttons)

All colors are defined using CSS variables at the top of the CSS file. You can easily edit the values of each to customize the table color scheme.

For example the button color scheme is set with the following:

/* Button color */

--tables-button-background: #f09546;
--tables-button-background-gradient-top: #f09546;
--tables-button-background-gradient-bottom: #f09546;
--tables-button-background-border: #df7e37;
--tables-button-background-shadow: #000;	
--tables-button-foreground: #f1f1f1;
--tables-button-foreground-shadow: #000;
Button color scheme
Button color scheme

This CSS allows you change the color of every element such as the background, border, foreground etc. Let's say for example you wanted to change to a blue color scheme, all you need to do is edit the above block changing the hex codes. For example:

/* Button color */

--tables-button-background: #2f43c2;
--tables-button-background-gradient-top: #2f43c2;
--tables-button-background-gradient-bottom: #0a20a3;
--tables-button-background-border: #000;
--tables-button-background-shadow: #000;	
--tables-button-foreground: #fff;
--tables-button-foreground-shadow: #000;
Button color scheme changed
Button color scheme changed

Border Radius

The border radius is set with a single variable:

--tables-border-radius: 5px;

You could set this to 0px to remove the curvature of all elements.


If you have any questions please leave a comment below or contact our support.