sexta-feira, 8 de junho de 2012

Criando um Layout Básico...

Yoooooooooo *---------*
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...
Beleza, agora vamos começar a editar...vá em Design~Editar HTML e marque a caixinha Expandir modelo dos widgets...agora, procure por esse código:
.content-outer .content-cap-top {
Achou?Se tiver achado, ele vai estar assim:
.content-outer .content-cap-top {
  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);
}
Se estiver assim, ótimo! Agora é pra você apagar as partes em laranja...e cuidado com a vírgula!!
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 {
  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;
}
Pare...ainda não terminamos...procure por /* Tabs, depois, logo abaixo você verá esse código:
.tabs-inner {
margin: 1em 0 0;
 padding: 0;
}
Apague o que está de laranja..agora, a última parte!!
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