Style Guide

Below you will find the basic style guide for the Total theme including the default accent colors, gray color scheme, headings, grid system, buttons and more. This page is to showcase the defaults used in the theme, but you can of course always change your site colors via the Customizer or choose variations when working with the WPBakery page builder.

Looking for the theme’s CSS utility classes?

Primary Colors

Total uses 2 primary accent colors throughout the default design which can be easily altered in the Customizer to whatever you want!

Accent
HEX – #2c87f0

Accent Alt (hover)
HEX – #1175e9

Gray Tones

The theme’s CSS utility framework includes built-in classes to apply gray tones as backgrounds, colors or borders.

Black
HEX – #000000

Gray 900
HEX – #222222

Gray 800
HEX – #424242

Gray 700
HEX – #616161

Gray 600
HEX – #757575

Gray 500
HEX – #9e9e9e

Gray 400
HEX – #bdbdbd

Gray 300
HEX – #e0e0e0

Gray 200
HEX – #eeeeee

Gray 100
HEX – #f7f7f7

Elements

Styling examples of some of the theme’s basic elements.

Preformatted Text

.sample-classname {
      background: #000;
      color: #fff;
}

Theme Button

Sample Button

Blockquote

If you set your goals ridiculously high and it’s a failure, you will fail above everyone else’s success.

Alerts

This is an “info” alert notice.

This is an “success” alert notice.

This is an “warning” alert notice.

This is an “error” alert notice.

jQuery Tabs & Accordions

The tabs and accordions are technically WPBakery Page Builder elements but the theme includes it’s own custom “Style” which you can see below.

Tab 1
Tab 2

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, lectus non lacinia commodo, dolor dolor ornare purus, nec pellentesque magna massa at erat. In hac habitasse platea dictumst. Fusce vitae risus ullamcorper nisl facilisis congue et id erat. Pellentesque rhoncus ut elit sit amet accumsan.

The included Grid System in the WPBakery Page Builder.

1/1

1/2

1/3

1/4

1/5

1/6

2/3

1/3

1/4

3/4

5/6

1/6

Preformatted Text

Theme Button

Blockquote

Alerts

Tab 1

Tab 2

Section 1

Section 2