Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How To Simply Add Custom CSS Styles To WordPress Widgets

In this article, we will prove you how to simply add Custom Css Styles to WordPress widgets. Most of the sidebar widgets in WordPress sites usually look the same.

It would be fine if all your widgets had the same importance, but the truth is that some of the widgets are more significant for your site’s growth than others.

For example, an email list subscription widget is certainly more significant than an archives widget.

Wouldn’t it be gracious if you could easily style important widgets differently?

Add Custom CSS Styles to WordPress Widgets

The very first thing, you need to do is just install and activate the Widget CSS Classes plugin.

After activation, go to Appearance » Widgets and then click on any widget in a sidebar to expand.

Download Widget CSS Classes Plugin

You will notice a new Custom Css Class field, below your widgets area, thus you can easily define a CSS class for each widget individually.

For example, we added the subscribe class to our subscription form widget.

Now you can work to your theme’s stylesheet and add your style rules there.

Like this one:

.subscribe {
background-color: #858585;
color:#FFF;
}

You can add any custom CSS code you want such as add a background color, change margins, change the width and height, use different colors, etc.

Manually Adding Custom CSS Styles To WordPress Widgets

If you don’t want to use any custom CSS plugin for applying styles, then you can manually add custom styles to your WordPress widgets.

By default, WordPress allows you to adds CSS classes to different elements including widgets.

Each widget in your sidebar has a numbered widget class. Like widget-1, widget-2, widget-3, widget-4, widget-5 etc.

Using Google Chrome’s Inspect Element tool, you can easily find the CSS class for the widget you want to customize.

As you can see in the above screenshot, the widget I want to customize has the widget-2 class added to it by WordPress as default. Now you can go to your theme’s stylesheet and add your custom style rules here.

.widget-2 {
background-color: #858585;
color:#FFF;
}
.widget-2 .widget-title {
font-weight:bold;
}

That’s all right.

We hope this article helped you easily Add Custom Css styles to your WordPress widgets.

Work with the CSS and experiment with new different colors. I recommend, Also use A/B split testing to figure out which CSS styles work best for your website.

I’m wishing you the best of luck!

Get started on WordPress today and start turning your spare time into spare cash.

Don’t forget to share this article with your friends.

Best of luck and have a great flight!

If you liked this article, then please subscribe to our YouTube Channel for WordPress, Blogging & SEO video tutorials. You can also find us on Facebook and Twitter.

How To Simply Add Custom CSS Styles To WordPress Widgets is a post from Creativedreamtech - SEO, SMO, Blogging, WordPress, Web Hosting, Make Money Online Tips.



This post first appeared on SEO, Blogging, WordPress, Web Hosting, Make Money Online,Mobile & Email Marketing Tips, please read the originial post: here

Share the post

How To Simply Add Custom CSS Styles To WordPress Widgets

×

Subscribe to Seo, Blogging, Wordpress, Web Hosting, Make Money Online,mobile & Email Marketing Tips

Get updates delivered right to your inbox!

Thank you for your subscription

×