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:
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.
- Go to Plugins >> Add New
- Search for Widget CSS Classes
- 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
