Support » Theme: ColorMag » 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!

    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!

    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.