Widget Title CSS Customization

• 

  vlogazul · Member · Sep 7, 2014 at 7:42 pm

  • Copy link
  • Add topic to favorites

  Hello, I am currently using the forever theme and I would like to know if there’s a snippet to make the widget titles in the sidebar identical as the widget titles on the footer section with the blue background and white text. I was trying to use the same snippet as the one on the footer section, it appears but all of the sudden it doesn’t match the alignment of the picture and the poll. It looks bigger from both sides and I would like it for that to be the same size of widht as the picture in title #1 in the sidebar.

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Sep 7, 2014 at 9:04 pm

  • Copy link

  Is there a reason you are setting specific styles for each widget individually rather than applying one set of styles to all widget titles in one go? It makes it really hard to check which CSS rules will take effect if you have other custom styles that take precedence because they’re set to specific widget IDs.

  What you ask for is definitely possible, it’s just probably much easier to delete a whole load of your existing CSS modifications and start styling the widget titles from the theme defaults.

• 

  vlogazul · Member · Sep 8, 2014 at 6:21 am

  • Copy link

  the only reason is cause at the moment i don’t want for all of the widget tittles on the sidebar or footer to have that particular background so that’s why i am only targeting it by widget image or text. so there would be a snippet for it? thanks

• 

  hallluke · Member · Sep 8, 2014 at 9:45 am

  • Copy link

  Here is how to target the sidebar widget titles:

  #secondary .widget .widget-title {
    color:#f00;
  }

  It is better practice to target types of widgets using their widget class (for example:

  .widget_image, .widget_text {
    font-size:1.2em;
  }

  rather than setting the styles individually for each widget ID. It means if you need to change one of the properties (background colour/font size/etc.) you can make one modification to your CSS rather than having to go through each widget ID declaration and making multiple changes. Also, if you add more widgets in future they will automatically get these styles without you having to go back in to the CSS and add in the new IDs.