Cor de fundo para sidebar com a mesma extensão dos posts

Para colocar uma cor de fundo na área da sidebar e que essa tenha a mesma extensão do corpo da área de postagem, proceda da seguinte forma.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Primeiro vá até o HTML de seu blog e procure pelo seguinte trecho:



#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}



E troque-o por este abaixo, isso dará uma cor de fundo a sua coluna (sidebar)

#sidebar-wrapper {
background: #cc0000; /*cor de fundo da coluna*/
width: 210px;/*largura da coluna*/
padding: 6px;
margin: 6px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Agora vá até o HTML do seu blog e procure pelo seguinte código:
 
]]></b:skin>

Abaixo dele cole o seguinte script:
 

<script type='text/javascript'>
//<![CDATA[
var blsidebar_i=new Object()
blsidebar_i.bl_igual=["sidebar-wrapper", "newsidebar-wrapper", "main-wrapper"]
blsidebar_i.blaltura_config=function(reset){
var blsidebar_1=0
var resetit=(typeof reset=="string")? true : false
for (var blsidebar_tipo=0; blsidebar_tipo<this.bl_igual.length; blsidebar_tipo++){
if (document.getElementById(this.bl_igual[blsidebar_tipo])!=null){
if (resetit)
document.getElementById(this.length[blsidebar_tipo]).style.height="auto"
if (document.getElementById(this.bl_igual[blsidebar_tipo]).offsetHeight>blsidebar_1)
blsidebar_1=document.getElementById(this.bl_igual[blsidebar_tipo]).offsetHeight
}
}
if (blsidebar_1>0){
for (var blsidebar_tipo=0; blsidebar_tipo<this.bl_igual.length; blsidebar_tipo++){

if (document.getElementById(this.bl_igual[blsidebar_tipo])!=null)

document.getElementById(this.bl_igual[blsidebar_tipo]).style.height=blsidebar_1+"px"
}
}
}
blsidebar_i.resetHeights=function(){
this.blaltura_config("reset")
}
blsidebar_i.blfunc=function(target, functionref, bl_tipo){
var bl_tipo=(window.addEventListener)? bl_tipo : "on"+bl_tipo
if (target.addEventListener)
target.addEventListener(bl_tipo, functionref, false)
else if (target.attachEvent)target.attachEvent(bl_tipo, functionref)
}
blsidebar_i.blfunc(window, function(){blsidebar_i.blaltura_config()}, "load")

blsidebar_i.blfunc(window, function(){if (typeof blsidebar_i.blsidebar_func!="undefined") clearTimeout(blsidebar_i.blsidebar_func); blsidebar_i.blsidebar_func=setTimeout("blsidebar_i.resetHeights()", 200)}, "resize")
 //]]>
</script>

Está pronto.

-------------------.:.-------------------------.:.------------------------.:.-----------------------------

 Agora se vc quiser colocar uma cor de fundo para os widgets, procure pelo seguinte trecho:

.sidebar {

color: $sidebartextcolor;

line-height: 1.5em;

 }





E troque por este

.sidebar .widget{
background: #ffffff;/*cor de fundo dos widgets*/
padding: 10px 2px;
margin: 10px 3px;
color: $sidebartextcolor;
line-height: 1.5em;
}

 Agora procure este código abaixo e apague o que estiver na cor vermelha

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }


Se acaso vc preferir  colocar os títulos dos widgets com uma cor de fundo e ainda centralizar, copie este código abaixo e cole-o depois de

/* Sidebar Content
----------------------------------------------- */

.sidebar h2{
background: #ccc;/*cor de fundo do titulo*/
margin: 6px 2px;
text-align: center;
padding: 10px 2px;
color: #ffffff;/*cor da letra*/
font-size: 14px;/*tamanho da letra*/
}