Tutorial: Barra lateral ao lado do cabeçalho



Eu sei, eu ando sumida, mas o meu mal não é falta de tempo e sim não saber como administrar ele, e a semana de provas está próxima o que significa blog abandonado (mais abandonado? Quase impossível). Mas hoje eu trouxe um tutorial super simples pra vocês, para acabar com o atraso de uma semana, vamos aprender (ou lembrar) como colocar a barra lateral ao lado do cabeçalho. Um pouquinho de atenção não faz mal a ninguém 


1.Vá em design, depois em editar HTML e procure por:
.main-inner .column-left-outer {
(Obs: Se a sua coluna for a direita mude o que esta em negrito para right)

Devera ficar assim:
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}

 2. Acrescente antes da chaves: margin-top: -150px;

As letras vão subir, para fazer com que a coluna também suba, e procure por:
.main-inner .fauxcolumn-left-outer {

(Obs: Se a sua barra for a Direita mude o que esta em negrito por right)

Devera ficar assim:
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}

3. Acrescente novamente antes da chaves: margin-top: -150px; 

Ajuste o tamanho para ficar do seu gosto, visualize e se estiver tudo certo salve.

3 comentários:

  1. Olá, tem selinhos para você lá no blog!
    Beijos teenagedreamsbymoni.blogspot.com.br

    ResponderExcluir
  2. Aceita afiliação?Meu blog:http://jeitinhodenerd.blogspot.com.br/

    ResponderExcluir
  3. Bom tutorial...
    =D

    Já viu o novo sorteio do Like An American girl??
    http://likeaamericangirl.blogspot.com.br/2012/05/voce-e-inteligente.html
    Dê uma olhadinha, e participe! ;)
    bye!

    ResponderExcluir