Pricing Tables CSS Customization

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:

/css/pricingtables.css

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;

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;

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.