terça-feira, 30 de agosto de 2011

Tutorial-Duas colunas com fundo colorido

Bom, vou postar o tão pedido tutorial das duas colunas de um lado, com fundo colorido (duas cores). As colunas só podem ser do mesmo tamanho, para colocar o fundo vai ser necessário editar uma imagem. Vamos lá:

1. Vá em "Design", depois em "Designer do Modelo" e clique em "Layout":


Salve clicando em "Aplicar ao Blog".

2. Agora vá em "Ajustar larguras":


Salve novamente clicando em "Aplicar ao Blog".

3. Agora é preciso editar uma imagem para usar como fundo:


Aki a  imagem para você usar como base na sua edição (lembrando que ela tem 400px, ou seja, 200px pra cada cor), se quiser usá-la sem editar, fique à vontade! Se desejar colocar 500px, você terá que editar uma imagem de 500px avá com 250px para cada cor, e assim por diante.

Depois de editar, hospede a imagem no Imageshack, ou em qualquer outro site de hospedagem de imagens e guarde o link.

4. Por fim, vá novamente em "Design", depois em "Editar HTML", dê Ctrl+f e;

 se você escolheu as colunas do lado direito, procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

se você escolheu as colunas do lado esquerdo, procure por:

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Vai aparecer assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Substitua a parte destacada em vermelho por:

background: url("URL DA IMAGEM") repeat;

Obs.: Não retire as aspas. Url da imagem é o link da imagem que você hospedou, ok?

Agora visualize, se estiver tudo certo, salve.
Atenção esse tutorial pertence ao blog Menina Nerd.Se reblogar dê os créditos :)

Um comentário:

  1. no meu não aparece so aparece assim
    .main-inner .column-right-outer {
    width: $(main.column.right.width);
    width: $(main.column.right.width);
    margin-right: -$(main.column.right.width);

    me ajuda please!!!

    ResponderExcluir