WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Style Widgets Individually – Beginners Guide

In this tutorial, you’ll learn how to easily style many different widgets WordPress includes by default in every installation.

I’ll also provide before and after images which where taken using the Genesis Sample child theme.

And i’ll also include the CSS code to style a couple of Genesis widgets individually as well.

Note: All CSS code should be copied and pasted at the end of your child themes style.css file.

Click any images to enlarge.

One Text Widget

default text widgettext widget after styling

Style the background color & text color of one specific text widget

#text-52 {
background: #699135;
color: white;
}

Style the widget title color & font size.

#text-52 .widget-title {
font-size: 2.7rem;
color: white;
}

One Category Widget

default category widgetstyle category widget

Styles the background color & text color of one category widget.

#categories-24 {
background-color: #EC6351;
color: white;
}

Style the widget title color & font size.

#categories-24 .widget-title {
font-size: 2.7rem;
color: white;
}

One Genesis User Profile Widget

default user profile widgetgenesis user profile widget styling

Styles the background color & text color of one Genesis user profile widget.

#user-profile-4 {
background: #EB7513;
color: white;
}

Style the widget title color & font size.

#user-profile-4 .widget-title {
font-size: 2.4rem;
color: white;
}

Makes the avatar image for this specific widget round.

#user-profile-4 .avatar {
border-radius: 50% 50% 50% 50%;
}

One Search Widget

default search boxstyle search box

Styles the background color & adds a border to one search widget.

#search-19 {
background-color: #366774;
border: 3px solid #999;
}

Style the widget title color & font size.

#search-19 .widget-title {
font-size: 2.0rem;
color: white;
}

One eNews Subscribe Widget

default enews widgetstyle genesis enews widget

Styles the background color & text color of one Genesis eNews subscribe widget.

#enews-ext-12 {
background-color: #FFD2D4;
color: #AF100A;
border: 3px dotted #AF100A;
}

Styles the font color and size.

#enews-ext-12 .widget-title {
color: #AF100A;
font-size: 1.7rem;
}

Styles the background color or the submit button.

#enews-ext-12 input[type="submit"] {
background-color: #AF100A;
}

Styles the hover & text color of the submit button.

#enews-ext-12 input:hover[type="submit"] {
background-color: yellow;
color: #AF100A;
}

Other Examples

Some themes use the .entry-title class rather than .widget-title.

The following example changes the front-size and color of the home-top and home-bottom widgets when using the Enterprise Pro child theme:

.home-top h2.entry-title a {
   font-size: 96px;
   color: #fff;
}

.home-top h2.entry-title a:hover {
    color: #333;
}

.home-bottom h2.entry-title a {
   font-size: 19px;
   color: orange;
}

.home-bottom h2.entry-title a:hover {
    color: #333;
}

Finding The Right Widget Class

To find the right widget class to use in your child themes style sheet, simply inspect the individual widget you want to style using Firebug and look for the section i.d.

section i.d

In the above screenshot, the section i.d is named toc-widget-5 for the table of contents sidebar widget.

With i.d selector classes, you always use # before the class rather than a .

In this example, you simply use:

#toc-widget-5 {
Add CSS declarations here
}

Another option is to use:

.sidebar .toc_widget {
Add CSS declarations here
}

Add Background Image To One Widget

To add a background image to any specific widget, simply upload your background to your child themes images folder.

You can then add the CSS code to style your widget.

#enews-ext-17  {
background: #333 url(images/dashed.png);
}

The above CSS code styles one eNews widget by adding both a background fallback color of #333 and an image with the file name dashed.png.

That’s the shorthand way method of writing CSS code however there is another method you could also use which requires more CSS.

#enews-ext-17  {
background-color: #333; 
background-image: url('images/simple_dashed.png');
}

If for some reason your image doesn’t load, the fallback color will display so its a good idea to use a color which is as close as possible to the background color of your image.

I hope that helps you better understand how to style specific widgets individually in WordPress.

Related Posts

Reader Interactions

Comments

  1. Hi Brad, I had this working, then accidentally used the wrong file in my text edit and lost all my changes. I am putting the code below at the end of my style.css and nothing is happening. I just can’t figure out why. It’s the free estimate section I am looking to change. Thanks so much!!!

    }
#text-7 {
    background-color: #333333;
}

#text-7 .widget-title {
color: #ffffff;
}

  2. Hey thanks for this post. I found it really helpful because by default, Genesis is not that stylized, but with this post I can add unique styles to really make my site pop. Thanks.

  3. Hi,

    Thanks for this tutorial. Did you choose the number 52 for the text widget on porpoise? And, will it change all the text widgets color? How can i change background only for one text widget?
    Thanks for your help

    • Hello Vincenzo

      52 is the section i.d class for that specific widget generated by WordPress on my installation so it won’t be the same for you.

      You have 2 options.

      1. Use Firebug to find the section i.d class for your specific text widget when it is active in the sidebar.
      2. Or use multiple classes. You can find an example of how to do this near the end if the post.

      Hope that helps

      • Hi,
        thanks for your answer, i found the widget id and i added the code to the child theme css and it seems to work fine the only thing is that it seems to slow the page loading time 🙁 is it possible?

  4. How do i center my avatar widget and drop the text down below it and center that, I figured out how to center it with margins and padding but when i go on a tablet or my phone its all messed up.

  6. Hello Brad
    I am trying to change the padding on one specific widget and can’t seem to find the right css.

    #id .sidebar .widget ??
    I am using news pro

    Your help would be appreciated
    Raffa

    • You can use the widgets section i.d or the widget class after the div class.

      #toc-widget-5 {
Add CSS declarations here
}

.sidebar .toc_widget {
Add CSS declarations here
}

      You may need to change the padding on the widget area rather than the widget.

  7. THANK YOU!!! I am a total novice at CSS and have been trying to modify spacing between my widgets for days. Your tutorial finally helped me figure it out. Thanks again!

    • Happy to help Stephanie.

      Rather than use the widgets sections i.d, you can also use something like this:

      .site-header .enews-widget {
your declarations
}

  8. Great article. How do I style the avatar margin, (or maybe it’s padding) though? The user profile box looks fine, but the avatar has too much space below it. I tried a universal (not id specific) css.

    .user-profile .avatar {
    margin: 0px;
    }

    Nothing changed. What did I mess up?

  9. Hi Brad

    What you provide here is exactly what I’ve been looking for.

    I want to change the color of my submit button to red.

    At the bottom of the style sheet for my Focus Theme, I copied and pasted

    #enews-ext-12 input[type=”submit”] {
    background-color: #AF100A;
    }

    There is no change to the page itself though.

    Would you know why?

    Best
    Miki

        • Hi Miki

          Update: Just tested the code locally and it works perfectly.

          You may need to check your code as it may be wrong.

          You may also need to clear your server cache or you may need to clear a caching plugin if installed.

          I know some hosts use very aggressive server side caching and changes can take days to show up.

          Example: I changed the background color of my header yesterday to white and its still black using Firefox from where i am located.

          Otherwise you may be using the wrong i.d class.

  10. Great tutorial, thks Brad.

    This work for styling the header and background of the Recent Posts widget.

    But not the title of each ‘recent post’ on the list. That seems to pull CSS from elsewhere.

    Any tutorials on how to write CSS to list the h or text style, to change it in individual widgets?

    Thks!

  11. Hi Brad,

    These tuts are great! I’m still struggling with find the right widget class. I use Chrome because Firefox was a dog on my pc, and I use the “Inspect element” thing all the time, but I can’t seem to get a grasp on where I am supposed to look to find the right widget class. When I find what I think is the right ID, it never is. Any suggestions?

    • I just published a post on styling the Genesis eNews Widget.

      It includes the CSS to align the subscribe button side by side with the email input.

      Try using Google Chrome and inspect the element to find the section i.d which will look something like enews-ext-14

  12. Smashing! I paid for a premium plugin to do this to my widgets (does some other stuff, too) when the problem is addressed this simple. Great post; I’m going to implement this on my blog, the colored widgets are really cool and make some messages to stand out.

  14. Hi, I am brand new to Genesis and I just cannot get this to work. I followed the directions but the changes are not displaying. My site is if you want to look. I must being doing something wrong! Yikes, Joomla is so much easier. Thank you for all your help. I really appreciate the tutorials.

      • I did just that and when I was using the Minimum Pro theme, it worked, but when I switched to Epik, then it disappeared. I don’t understand, so I’m sure I am missing something.

        • Hi Kimberly

          You will need to copy the CSS code to the Epik themes style.css file.

          And you may need to change the i.d for the widget if using a different widget.

          • Do I need to copy something extra or just the code you have highlighted in each example? Because I did add the code the the Epik styles.css but it does no work. I also changed the widget ids per your instructions.

          • It depends on which code you have copied but its fairly basic.

            Each example only targets one class so i’m not sure how much you want to style your widget.

            Link to your site please and let me know what you want styled on your widget.

          • I added this code to style.css for the Epik theme only.

            #search-4 {
            background-color: #366774;
            border: 3px solid #999;
            }

            #categories-4 {
            background-color: #EC6351;
            color: white;
            }

          • I would have to login and check all the files.

            I did test it locally using a copy of your style sheet and it didn’t work.

            Not sure what color you’re using but the code works on all StudioPress themes.

            I see you have added it correctly to your style sheet.

            If you changed themes to the Genesis 2.0 Sample theme the code will work.

            Did you ask in your theme forum?

          • Kimberly

            I just tested the code on a fresh download of your theme and it works perfectly so the problem is in your style sheet.

            If you want me to find it, please use the contact form.

          • Thank you so much for going to all that trouble. Maybe I’ll just try uploading a fresh version copy of the style sheet and see if that fixes it.

            I’m thinking of moving away from that theme and going to just stock Genesis. When I followed your directions on Minimum, it worked flawlessly.

            Thank you for all your kind help.

          • I think you’ll also find the SP community forums are very helpful.

            I’m writing code for a page template like Epik which you can use on most SP themes.

        • Shelley

          You can save yourself a lot of time and frustration by using a framework which has been built to make designing with WordPress easy.

          I don’t have any experience with your theme however i have tried many others and Genesis with a StudioPress child theme makes life easy.

          Far easier to customize and achieve the result you want than using a free theme which doesn’t provide the level of resources to help you achieve your goals.

Leave a Reply