24 de mai. de 2010

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*/
}

4 comentários:

  1. Oi, há muito vinha procurando exatamente o que postaste, PARABÉNS! Porém estou usando um template "Espetacular Ltda" e gostaria muito de aplicar este recurso na coluna esquerda. Podes me ajudar, pelo amor de Deus! Há, somos a Pastoral da Comunicação (Pascom) da Paróquia Nossa Sra. do Rosário de Remanso BA. Que Deus lhe abençoe e ilumine para que continue nos ajudando com seus tutorias maravilhosos. Abraços!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube