Gente, a maioria das blogueiras e até os blogs mais famosos usam o famoso Travel como layout...mas muitos encomendam, tipo a Dudinha que encomendou com a Raissa...hoje eu vou ensinar arrumar o Travel para que ele fique assim, igual o nosso....então, bora ver o tuto? Já sabem o que fazer ;)
Primeiro vamos escolher o modelo básico. Vamos usar o Travel na versão que tem umas "bordinhas" de papel no cabeçalho. Ele pode parecer bem feinho a primeira vista, mas depois vamos deixá-lo super lindo...para isso vá em Design~Designer do Modelo~Modelos e escolha esse modelo:
Círculo fail... |
.content-outer .content-cap-top {Achou?Se tiver achado, ele vai estar assim:
.content-outer .content-cap-top {Se estiver assim, ótimo! Agora é pra você apagar as partes em laranja...e cuidado com a vírgula!!
height: $(content.imageBorder.top.space);
background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}
.content-inner {
background: $(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color: $(content.background.color) ;
padding: $(content.padding);
}
Bem...agora, procure por esse código:
.main-inner .column-right-inner {Achou? Se sim, apague as partes destacadas de laranja:
.main-inner .column-right-inner {Pare...ainda não terminamos...procure por /* Tabs, depois, logo abaixo você verá esse código:
margin-left: $(content.padding);}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: $(content.padding); background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner {
margin-right: $(content.padding);}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: $(content.padding); background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.tabs-inner {Apague o que está de laranja..agora, a última parte!!
margin: 1em 0 0;
padding: 0;
}
Procure mor .main-inner {, e logo abaixo desse código, você vai acrescentar essa linha:
margin-top: -20px;Agora é só modificar o número 20 até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos.
Tirei do: Cherry Bomb
ACABOU! Agora é só salvar e modificar o resto, lembrando que o cabeçalho tem que ser da mesma ou menor largura do Blog...Espero que tenham gostado do tutorial! Bezoos ;*
Nenhum comentário:
Postar um comentário