An introduction to custom widget styles

Incept offers optional custom widget styles that changes the look to widgets when applied. When we say “optional”, we mean that they are available to you if the “Widget CSS Classes” plugin is installed and activated. Unfortunately, WordPress does not have this feature capability built into it, so we need a plugin to add this function. There are not a lot of plugins available that can do this, but the one I recommend is called “Widget CSS Classes” by C.M. Kendrick.

In addition to the standard widget style, you get these 4 styles:

  1. Bar style – Use the class bar
  2. Pattern style – Use the class pattern

bar style

pattern style

When adding the style class to a widget, you will see a form field at the bottom of your widget that is labeled as “CSS classes” where I entered in the style class “pattern aqua” for the pattern style but I also add the colour “aqua” to use the aqua colour version.

add widget classes

Customize Widget Style Colours

This theme offers several colours for each of the styles that you see above. 

preset colours

You also have the option to customize each of the preset colours by changing their tone with the theme customizer. Each colour has a colour selector that begins with the default colours you see here, but they allow you to change them. For example, if you do not like the “aqua” colour tone, you can change it. 

IMPORTANT When modifying the default colours, this will affect “all” instances of that colour throughout your website. It should also be noted that the “Pattern” style will not be affected when you modify a colour because the pattern styles are images that were preloaded with the colour already applied. To change the tone of a pattern style, you will need to use an image program that can do that by opening the pattern image and making your changes from that.