Customizing the Sidebar – Can you help me with selectors and code?

  • Hello,
    I started to customize the sidebar of my child theme. I found out the selectors to change the background-color, but now I’m stuck with further customization. Here is a link to my site michaeltaube.net so that you can have a look. What I want is to remove the background from the widget-title, having all spans centered, remove the background from the spans and changing the font-color of the spans to somekind of green.

    When I canged the border bottom of widget-title to none in firebug it worked, but inserted into my style.css this change does not apply.

    Here is the code I have for now

    #secondary {
	background-color: #F9F2E7;
}

#secondary .widget {
	background-color: #F9F2E7;
}

#secondary .widget-title {
	background-color: white;
	border-bottom: medium none;
}
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi Micheal,

    The following should remove the background colors, center the titles, and change the font-color to green:

    #secondary .widget-title {
	border-bottom: none;
	text-align: center;
}
#secondary .widget-title span {
	background-color: transparent;
	color: #00c681
}

    Hope this helps!

    Thread Starter michaeltaube

    (@michaeltaube)

    Hey Christi,
    thank you. You’re code worked but also I started to using plugin to work on my CSS which is a way more comfortable then the standard wordpress editor. Can you help me with another adjustment of the sidebar? The widget-title/span are now centered. The change I want to make now is that the widget-title uses all of its space to the left and the right so that is’s left and right borders are in line with the widget itself. Is that possible?

    I added some padding to the widget itself but now the background of the widget-title does not cover the widget background. Here is my code for now

    /*Sidebar*/
#secondary .widget {
 background-color: #F9F2E7;
 padding-left: 5%;
 padding-right: 5%;
 padding-bottom: 1%;
 border-left: 2px solid #AEE239;
 border-right:  2px solid #AEE239;
 border-bottom: 2px solid #AEE239;
}

#secondary .widget-title {
  border-bottom: none;
  text-align: center;
  background-color: white;
 }

#secondary .widget-title span {
	background-color: transparent;
	color: #8FBE00;
}

    Maybe it would be easier to move the div for the widget-title on top of the widget, but I don’t know how to do this.

    Hi Michael,

    Add this to the #secondary .widget-title block:

    margin: 0 -5% 15px;

    That will offset the padding and pull the widget title out to meet the edges of your widget.

    Sidenote: If moving the title outside of the widget is even possible (which I don’t think it is) it wouldn’t be an easy process.

    Let me know if that works!

    Thread Starter michaeltaube

    (@michaeltaube)

    Hey Christi,
    it works. I changed the values a bit, but it was the code I needed. Thank you!

    Awesome! Can you mark this thread as resolved? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customizing the Sidebar – Can you help me with selectors and code?’ is closed to new replies.