24 Jul

How can you customize your WordPress widgets with no CSS knowledge?

wc-widget-full

Have you ever wanted to style your widgets differently than your current theme design is? Tried searching the Web for it and found only complex CSS classes and complex codes that you don’t understand? Can this be done the simple way like WordPress is meant to be? Well now it’s official. Yes you can!

The simple plugin called Widget Customizer for WordPress, which is sold exclusively at CodeCanyon does the trick in no time. With this plugin you can easily switch between already made presets or create your own. Let me guide you true the process.

When you install this plugin a new widget will appear in your WordPress widgets area. Let’s insert the Recent Comments widget in the sidebar we’re using. Now select the +Widget Colorizer and drag it before this Recent Comments widget. Set the Recent Comments widget and open the Widget Colorizer.

Here you have a bunch of options including Import/Export functions and the Presets Manager. For now we will be explaining the Custom Preset or exactly how to make your own style and we’ll deal with the Export/Import and Presets later.

Let’s say we want to use some different fonts for our new widget. Choose Raleway font for your titles and PT Sans for your text. The title size we’ll set at 20px, line height at 24px, our style will remain normal and we’ll set the 200 for font weight. Now let’s setup the text font. We’ll choose the 14px, 24px line height, normal for style and 400 for our text font weight.

Now we are going to set some colors. We’ll use dark gray for the title and text, and set some link colors and hovers. Background will remain unchanged. Now let’s setup border colors. We are going to use light gray shades here. Also set the borders width to 1. As we are using borders, we’re probably going to need padding also. So let’s set padding spaces to 24.

We’ll also use the border radius feature and set it to 12px. In the box shadow field paste in this code 3px 3px 3px rgba(0,0,0,0.2).

Now our widgets looks a lot better and we’ve spent only a few moments here. Now you can save this preset and use it with your other sidebar widgets. You can also export your styles and import them on another site.

Now this is all done in a really easy fashion. Thanks to the Widget Customizer for WordPress. This plugin is so advanced that it lets you even write in your own custom CSS. When writing in the CSS all you need to do is enter @widget and this string will be replaced with the widget class. So to style up some simple things, like we don’t want our links to be underlined, we’ll just enter the @widget a {text-decoration:none;}. This opens up a lot of possibilities for your advanced designs.

Developers can also use it. They can now include a set of presets for their themes which users can use with ease.

This plugin is a really good tool for every WordPress developer. You can get it at this link Widget Customizer for WordPress. It only costs 14$ and you will be amazed with the results.

wc-widget

Widget Customizer for WordPress – Customization time ~ less than 30sec.

View official plugin website @ this LINK

View more samples @ this LINK

GET Widget Customizer FREE VERSION at WordPress.org @ this LINK

Buy Widget Customizer PREMIUM VERSION @ this LINK

 

2 thoughts on “How can you customize your WordPress widgets with no CSS knowledge?”

  1. Some people are always seeing new creative ways to improve design and functions. This is another brilliant idea that will really make your site ‘pop’ with style and colour. Many Thanks to the developer!

  2. Wow, what an amazing tool! Will definitely buy and use on all my websites, current and future. Well done on the great idea. This look like something that could be very, very useful for both novice and experienced users. Good job!

Leave a Reply