Custom Widget Styles

By default, WordPress does not offer any kind of widget styling other than plain basic looking widgets in a page. Unless a theme provides you with its own custom default styling, we are at the mercy of using a plugin to achieve this — which is actually a good thing.

Widget Styles for Opportune Pro

I kept the available styles to a minimum because of the design concept of this theme. However, you get to choice of using the default widget styling that comes with WordPress or you can use the custom styles I’ve given you which also includes colours.

  1. Widget Style: Default
  2. Widget Style: Border
  3. Widget Style: Box
  4. Widget Style: Search

widget styles

Colour Styles

In addition to the widget styles you see above, you can also change the colours of them (with exception to the “Default” WordPress style) with the following colour classes in bold:

  1. Default is the light grey you see above.
  2. Blue = black
  3. Tan = tan
  4. Grey = green

Install the Widget CSS Classes Plugin

To achieve the style results you see in the screenshot above, we need a plugin called “Widget CSS Classes” which when activated, adds a small text field at the bottom of every widget. In this field which gets labeled as “CSS Class”, we type in any of the classes I listed above in bold.

  1. Go to Plugins >> Add New
  2. In the Search field to the right, type in Widget CSS Classes, and then this should show up:
    widget css classes
  3. Click to Install and then activate the plugin

Adding a Style to a Widget

When you activate this plugin, it adds a small field to the bottom of each widget. All you need to do is type in the widget style of your choice, or simply leave it empty if you want to use the default WordPress style.

widget style field

EXAMPLE: Lets use the “box” style with the colour “black“. When adding classes, make sure you leave a single space between each class.

add widget class

 Changing the Default Colours

If you want to change the colours of the existing options, you can. You can also add more options if you are comforatble in creating CSS code. For these kinds of changes, you will need to override the theme’s stylesheet by creating a new custom one. This can be done by using a plugin that lets you do just that. Jetpack is one option if you use this already because it has an Edit CSS module you can activate. If you do not use Jetpack, you can use a plugin like “Simple Custom CSS” which is quite popular.¬†

Please note that you should have some basic CSS knowledget in making custom changes to the existing theme styles, such as the widget styles provided in Opportune Pro.