Skip to main content

Styling

The plugin comes with two default colour themes. You can use any of them as basis and tweak some elements. Or you can rewrite them completely.

How it works​

The theming is done via a CSS class in the parent div. For example, if you choose the Alfred theme, the class alfred is added to the div, wrapping the content of the pages.

To modify a style of the selected theme, you should take it into the account.

The example below shows how the style for a form button is defined.

.alfred .wsb-content .wsb-form__btn {
    background-color: #4a90e2;
    border-radius: 5px;
    font-weight: 400;
    font-size: 18px;
}

Tweaking a default theme​

To alter some elements of the existing theme is easy.

  1. Go to Workshop Butler plugin settings in WordPress
  2. Open Custom CSS tab
  3. Add the styles and click Save

Creating your own theme​

If none of the default colour themes suits you, make your own!

  1. Go to Workshop Butler plugin settings in WordPress
  2. Open General tab
  3. Select Custom from the list of themes, and add the name of your theme. This name will be added as class
  4. Open Custom CSS tab
  5. Add the styles and click Save