Tag: Style

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.

Read more