How to customize your widgets with style and colour

One of the great features about Preference, along with the help of a special plugin called “Widget CSS Classes” is that we can now control how our widgets look, not just by colour, but also by overall visual style. Looking at the demo website, you can see the different styles Preference comes with:

Widget Style Demo

These are styles that are already part of this theme, but you will need to download a plugin for this to work.

Part 1 – Get the Plugin

1. Go to Plugins >> Add New
2. In the search field, type in: Widget CSS Classes
3. Install and then activate this plugin
4. In the left dashboard admin menu, go to Settings >> Widget CSS Classes
5. Set the following options like you see here in this screenshot:
   
6. Click Save Changes

Part 2 – Widget Classes

There are several styles avalable for your widgets, see the screenshot below:

Each one above represents the 4 styles available, although there is one more that is a blank style, basically the widget title and content only and is Style 0. The style css class is applied to the widget not by “style0” but by the type that equals the value:

• style0 = plain
• style1 = This is the default style
• style2 = bar
• style3 = curve
• style4 = box

The screenshot also displays the default colour that you get but there are other colours available:

• amber
• red
• purple
• mycustom (this is set from the theme customizer options on the colour tab)

Part 3 – Applying a Style

1. Open any widget and you will notice a new form field is added at the bottom of each one that looks like this:
   
2. Using the style class that you want (or classes), you will add them to the field, for example, for the widget style 2 and to make it amber, your field would look like this:
   
3. Save your widget, then style another.

 Adding Your Custom Colour

This theme comes with the ability to set your own custom colour so that if you don’t like the current ones, you can use your own.

1. Go to the main Dashboard admin (home page) and click on the big button “Customize Your Site“
2. Click on the “Colours” tab and scroll to the bottom to find the “Your Custom Colour” setting
   
3. Click on the colour selector there and choose your colour, then save your options.