How to style your widgets with the styles Lavish Pro Offers

February 20, 2014| Sushil Adhikari

Flat Responsive 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.

widget-class-field

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

Categories: Setup Tutorials for Lavish Pro

Leave a Reply