How to style your widgets with the styles Circumference offers

Circumference offers you several widget styles that you can have when using the optional plugin called Widget CSS Classes. Widget styles you get are:

• Default
• Border
• Solid
• Dot
• Dot Line
• Image
• Menu

To give you an introduction to how the above styles look, you can check out the live demo site here:

Widget Styles

When planning out your web pages that will include widgets, you will want to take note that some widgets may not look good with a particular style, but with another, simply amazing. This also will be dependent on third party widgets you install into your website as well. 

List Based Widgets

You also get to use list styles on your widgets; widgets that are list type:

• list-dash
• list-checkmark
• list-square
• list-circle
• list-curve-arrow
• list-solid-arrow
• list-short-arrow

You can find the HTML Snippets folder in your original theme package download where the above styles  and other classes can be found and used as a reference. For the Image style, this is a special style generally reserved for a text widget that has an inserted image along with content. The snippet text file has a sample for you to use as a starting point.

Install Widget CSS Classes

Installing this plugin is optional, but it will allow you to take advantage of the widget styles this theme has to offer. Unfortunately, this is another feature that WordPress does not have built into its core, so a plugin is required to achieve this capability.

1. Go to Plugins >> Add New
2. Search for Widget CSS Classes
3. Install and Activate

Once you install this plugin, it adds a form field at the bottom of your widgets which is used to enter in the class or classes to style your widget.

With the above list of classes – with the exception of Default – you enter in the name into the form field you see in the screenshot. So if you wanted to style your widget with the Dot Line style, you would enter in: dotline

Widget Colours

You also get the opportunity to use predefined colours for your widgets as well in conjunction with the widget class styles above. Colours you get are:

• grey
• aqua
• brown
• tan
• red
• orange
• green

So with our widget example, if you want to have the style of dot line, plus make it aqua, then in the CSS Classes field, you would enter in:

dotline aqua

Included in your theme download, you get HTML Snippets, and one of them will help you style your widgets as a reference to available styles and colours.

Screencast Tutorial

video