An introduction to custom widget styles

Emotions 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. Line syle – Use the class line
  2. Bar style – Use the class bar
  3. Box style – Use the class box
  4. About style – Use the class about
  5. Search style – Use the class search

widget styles

about stylesearch 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 “about“.

css classes field

The About Widget

The “about” class will add some padding and will center the content. If you decide to use social icons (from font-awesome), this class style will also style your icons. Please note that you will need to add HTML code to a text widget to get an About widget in place like you see in the screenshot above. To get you started, here is the HTML code snippet you can use for your own template of creating a similar “About” widget:

<img style="margin-top: 77px" src="http://demos.shapedpixels.com/emotions/wp-content/uploads/sites/17/2016/05/aboutme-widget.jpg" alt="About Me"/> <p class="about-name">Andrew Lorem</p><p class="about-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ad minim veniam.</p> <p class="about-social"><a target="_blank" href="http://www.twitter.com"><span class="fa fa-twitter"></span ></a><a target="_blank"  href="http://www.facebook.com"><span class="fa fa-facebook"></span ></a><a target="_blank"  href="http://www.wordpress.com"><span class="fa fa-wordpress"></span ></a><a target="_blank"  href="http://plus.google.com"><span class="fa fa-google-plus"></span ></a></p>

All you need to do is copy the above code, paste it into a text widget, and then change the content to your own:

  • The inline CSS style you see of 77px is optional. I added this to horizontally align the top of the photo with that of my first blog post featured image. You can remove that style code if you wish, or simply modify the top margin value.
  • Path to your image
  • Name
  • Some Information about yourself
  • Then using Font Awesome icons as a reference, create your social profile links. You don’t have to use all the ones in the snippet, only the ones pertaining to you. 

The Search Widget

The search widget has some minor styling by default, but adding the “search” class will center the content and colour the background elements.

Default Style

default search

Search Style

search style

Customize Widget Style Colours

Emotions only offers one colour for each of the styles that you see above. However, what I did was add a colour selector option to the customizer, giving you the option to change the colour for each widget style.

  1. Go to Appearance >> Customize >> Widget Style Options
    widget style options
  2. Make any colour changes for each widget style using the selectors
  3. Click “Save & Publish

NOTE Changing the colours for the widget styles will affect all widgets that uses that style.