• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  • Add Full Width Background Color To Sidebar Widget Title
  • Center HTML Content In Sidebar Text Widget

Reader Interactions

Comments

  1. julie says

    June 18, 2014 at 6:36 pm

    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;
    }
    Log in to Reply
  2. Adam Preiser says

    March 16, 2014 at 10:52 pm

    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.

    Log in to Reply
  3. vincenzo says

    March 6, 2014 at 1:17 pm

    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

    Log in to Reply
    • Brad Dalton says

      March 6, 2014 at 1:48 pm

      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

      Log in to Reply
      • vincenzo says

        March 6, 2014 at 3:36 pm

        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?

        Log in to Reply
        • Brad Dalton says

          March 6, 2014 at 6:05 pm

          I doubt it because its only a few lines of CSS which wouldn’t have any effect.

          Log in to Reply
  4. ben says

    March 1, 2014 at 7:58 pm

    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.

    Log in to Reply
  5. ws24 says

    February 27, 2014 at 1:56 pm

    Thanks for this tutorial!

    Log in to Reply
  6. raffa says

    January 31, 2014 at 1:33 pm

    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

    Log in to Reply
    • Brad Dalton says

      January 31, 2014 at 1:54 pm

      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.

      Log in to Reply
      • raffa says

        January 31, 2014 at 2:36 pm

        Thanks a bunch Brad…it worked!

        #text_icl-13 {
        }
        .sidebar .widget text_icl_13 {
        }

        Log in to Reply
  7. Jessica Hewitt says

    January 25, 2014 at 11:23 pm

    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!

    Log in to Reply
    • Brad Dalton says

      January 26, 2014 at 4:40 am

      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
      }
      Log in to Reply
  8. Stephen says

    December 3, 2013 at 12:19 pm

    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?

    Log in to Reply
    • Brad Dalton says

      December 3, 2013 at 1:11 pm

      Hello Stephen

      Try margin-bottom.

      Log in to Reply
  9. miki says

    November 6, 2013 at 1:28 pm

    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

    Log in to Reply
    • Brad Dalton says

      November 6, 2013 at 11:41 pm

      Try adding the CSS code at the end of your style sheet.

      Log in to Reply
      • miki says

        November 7, 2013 at 9:18 am

        As mentioned in my message, that’s what I did. Afterwards I cleared the cache several times, and I checked in 24 hours later too. There’s no change.

        Log in to Reply
        • Brad Dalton says

          November 7, 2013 at 10:03 pm

          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.

          Log in to Reply
  10. Mike says

    October 23, 2013 at 9:01 am

    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!

    Log in to Reply
    • Brad Dalton says

      October 23, 2013 at 11:31 am

      Hi Mike

      How about something like this:

      #recent-post-3 widget-title {
      your declarations
      }

      I covered widget titles in this post already.

      Log in to Reply
  11. Alycia says

    September 18, 2013 at 4:14 pm

    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?

    Log in to Reply
    • Brad Dalton says

      September 18, 2013 at 4:18 pm

      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

      Log in to Reply
  12. Zimbrul says

    September 18, 2013 at 9:52 am

    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.

    Log in to Reply
  13. Todd says

    September 16, 2013 at 1:25 am

    This one I need to dissect this one.

    Thanks!

    Log in to Reply
    • Brad Dalton says

      September 16, 2013 at 8:01 am

      No worries Todd.

      Its pretty straight forward and i’m sure you can do a better job with the styling than i did in my examples.

      Log in to Reply
  14. Kimberly Reynolds says

    September 15, 2013 at 10:52 pm

    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.

    Log in to Reply
    • Brad Dalton says

      September 15, 2013 at 11:14 pm

      Hi Kimberly

      All you need to do is copy and paste the code into your style sheet.

      What did you do?

      Log in to Reply
      • Kimberly Reynolds says

        September 24, 2013 at 2:54 am

        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.

        Log in to Reply
        • Brad Dalton says

          September 24, 2013 at 2:57 am

          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.

          Log in to Reply
          • Kimberly Reynolds says

            September 24, 2013 at 9:12 pm

            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.

          • Brad Dalton says

            September 24, 2013 at 9:18 pm

            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.

          • Kimberly Reynolds says

            September 24, 2013 at 9:22 pm

            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;
            }

          • Brad Dalton says

            September 24, 2013 at 9:44 pm

            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?

          • Brad Dalton says

            September 24, 2013 at 9:48 pm

            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.

          • Kimberly Reynolds says

            September 24, 2013 at 9:57 pm

            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.

          • Brad Dalton says

            September 24, 2013 at 10:05 pm

            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.

  15. Shelley says

    September 15, 2013 at 2:12 pm

    Hi Brad. Are these tutorials applicable to Genesis framework only or can I make the changes to any theme?

    Log in to Reply
    • Brad Dalton says

      September 15, 2013 at 2:51 pm

      Hi Shelley

      Some work with any theme and some use hooks and filters which only work on Genesis.

      What theme are you using?

      Log in to Reply
      • Shelley Graves says

        September 15, 2013 at 11:18 pm

        Hey Brad….I’m using the ‘Striking’ theme.

        Log in to Reply
        • Brad Dalton says

          September 16, 2013 at 8:00 am

          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.

          Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.