terça-feira, 2 de setembro de 2008

Meus aprendizados sobre Sidebar

Como eu não suporto esse template original com duas colunas, tive que tentar dar meu toque nesse aqui, é fácil... é só repetir o código da sidebar abaixo do código da sidebar e trocar a palavra sidebar por outra...(tanto no CSS quanto no HTML) e trocar a largura de cada sidebar. No meu caso ficou assim:

Chamei a segunda sidebar de "twosidebar" e a terceira de "trisidebar":

Nos códigos CSS

#sidebar-wrapper {
width: 440px;
background: $cordasidebar;
float: right;
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 */
}

#twosidebar-wrapper {
width: 220px;
background: $cortwosidebar;
float: right;
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 */
}

#trisidebar-wrapper {
width: 220px;
background: $cortrisidebar;
float: right;
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 nos códigos HTML:

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
</b:section>
      </div>

      <div id='twosidebar-wrapper'>
        <b:section class='sidebar' id='twosidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>
</b:section>
      </div>

      <div id='trisidebar-wrapper'>
        <b:section class='sidebar' id='trisidebar' preferred='yes'/>
      </div>
Todas as modificações estão em vermelho.

Só não consegui alterar a largura das margens...
Mas isso é só questão de tempo...

Nenhum comentário: