Introduction to Widget Styles

June 16, 2014| Sushil Adhikari

Preferential includes a series of preset widget styles that you can use for almost all widgets. You get 7 widget styles included with Preferential, plus you get a preset of available colours, including one custom colour that you can set from the theme customizer. The current colours available are:

  • Grey (default)
  • Dark Blue
  • Blue
  • Light Blue
  • Orange
  • Green
  • Red
  • Brown
  • Custom (your choice)

Although the styles are coded in the theme’s stylesheet, you will need a plugin called “Widget CSS Classes” to apply the styles by using CSS classes in your widgets. When this plugin is installed, it puts an input field at the bottom of your widget where you type in the class for the style(s) you want for that particular widget.

pref-widgetstyleclass

Available Widget Style Classes

  • default (no class needed)
  • halfbar
  • bar
  • box
  • border
  • header
  • widget-shadow
  • listlines (for bullet list style widgets)

For example, if you want a widget to use the “Halfbar” style, you would type in:

halfbar

If you want to add colour to it instead of the default grey, you can add a colour like this:

halfbar orange

To see the available widget styles and colours, check out the live demo site here:

Widget Styles

Screencast – Widget Styles

Categories: Setup Tutorials for Preferential

Leave a Reply