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...

Era pra fazer só o trabalho de casa, né?...
Não consegui...
Adoro fazer isso aqui, então aproveitei e alterei a largura do template, de 660px (original do Mínima) para 980px.
Na parte do código CSS alterei apenas o que está em vermelho:



#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

e

#header-wrapper {
  width:660px;
  background: $cordasidebar;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
para:

#outer-wrapper {
  width: 980px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

e

#header-wrapper {
  width:980px;
  background: $cordasidebar;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

obs:
Tem que alterar o header para que o cabeçalho também aumente para a largura da pág., mas dá pra deixar ele menor, só não sei ainda como colocar no lado esquerdo para poder colocar alguma widget do outro lado.

em breve eu consigo.

Trabalho de Casa: Criar váriáveis e alterar a cor de outros seletores.

bom, trabalho de casa feito!
achei que ficou feia a cor que escolhi para "body", mas o resultado ficou bom, só não combinou em nada...rsrs

ok,ok... isso é só um blog de aprendizagem...

Alterando Códigos CSS e HTML do Template Mínima

 Aula dada pela Ariane do Blog Templates Novo Blogger


1ª aula.



estou tentando...
a primeira parte foi bem, consegui trocar a cor do header e da sidebar.