Esse tutorial e o Layout disponibilizado foi feito quando eu tinha o meu antigo blog, o Poison HTML, por isso que a URL e algumas coisas no lay está escrito o nome do blog.
Veja aqui o resultado final do layout (x)
2. Clique em 'Plano de Fundo' e escolha um background, e clique em concluir. Recomendo esse background aqui.
3. Vá em 'Ajustar Larguras' e coloque 1020px em cima e 330px em baixo.
4. Vá em 'Avançado' > Título do Blog > Deixe Transparente
5. Em 'Avançado' clique em 'Plano de fundo das postagens' e deixe transparente.
6. Em Avançado, vá em 'Plano de Fundo da Barra lateral' e também deixe em transparente.
7. Clique em 'Aplicar Modelo', como mostra essa imagem (x)
8. Vá em 'Editar HTML' > Aperte F3 e procure por .content-outer .content-cap-top {
Abaixo dele, terá esses outros códigos:
.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); }Apague todo o código acima do seu HTML, e no lugar cole esse:
.content-outer .content-cap-top { height: background: } .content-outer { margin: padding-top: } .content-inner { background: background-position: background-color: padding: }Se você visualizar, verá que aquele fundo branco saiu. Esse fundo branco chama-se 'folha', e a retiramos. Salve o modelo.
9. Agora, aperte F3 e procure por /head Logo acima, cole o script dessa fonte:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>Essa vai ser a fonte do título dos widgets e dos posts. Salve.
10. Aperte F3 e busque por /* Posts Logo abaixo você encontrará esse código:
h3.post-title { margin-top: 20px; }Logo abaixo desse código, cole esse:
Ao visualizar, você verá que tem uma linha abaixo do título dos posts. Se ela estiver certinha, salve. 11. Procure por h3.post-title a { Abaixo você verá que tem o lugar para colocar a fonte e a cor da fonte (font e color). Então, vamos mudar. Apague o código da fonte (esse de baixo)
.post-header, .dados { border-top: 1px solid #eee; }
font: $(post.title.font);E cole no lugar dele, este aqui:
font: normal 28px 'Yanone Kaffeesatz', sans-serif;Você pode alterar o '28' se quiser, ele é o tamanho da fonte. Se você visualizar, verá que mudou a fonte do título dos posts. Agora apague o código da cor (esse de baixo)
color: $(post.title.text.color);E cole no lugar, este aqui:
color: #C2D1D9;Você pode alterar o código da cor. Eu coloquei um meio verdinho, se você não alterar vai ficar bonito também. Visualize, e se estiver ok, salve.
.main-inner .column-center-outer { background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }Então, apague todo esse código (o que mostrei acima), e no lugar dele, cole este código:
.post-outer { box-shadow: inset 0 0 0px #E6E6E6, 0 0 5px #d9d7d7; margin: 3px 8px 15px; background:#fff; padding: 5px 5px; padding: 5px; }Se você visualizar, verá que o fundo dos seus posts estão brancos e separados. Se estiver assim mesmo, salve o modelo.
13. Aperte F3 e procure por /* Widgets Logo abaixo você verá que tem um .sidebar .widget { mais o código que o acompanha. Assim:
.sidebar .widget { border-bottom: 2px solid $(widget.border.bevel.color); padding-bottom: 10px; margin: 10px 0; }Então, apague esse código mostrado acima, e no lugar dele cole este aqui:
.sidebar .widget { width:100% !important; background:#fff; padding-left: 10px;padding-bottom: 10px;padding-right:10px;padding-top: 5px;margin: 30px 0; box-shadow: inset 0 0 0px #E6E6E6, 0 0 5px #d9d7d7; }Visualize e verá sua sidebar separada, com sombra e com o fundo branco. Se estiver assim, salve.
14. Aperte F3 e procure por ]]></b:skin> Logo acima dele, cole o seguinte código:
.sidebar h2 { margin-top: 15px; margin-bottom: 5px; font: normal 22px 'Yanone Kaffeesatz', sans-serif; color: #C1D2DB; /* Cor da fonte */ border-bottom: 1px dotted #EDEDED; /* Tipo e cor da borda */ text-align: center; height: 18px; text-shadow: 0px 1px 1px #EDEDED; padding-bottom: 10px; margin: 4px 2px 5px; padding: 5px 10px; }Esse é o script para os títulos da sidebar, altere a desejar.
15. Agora, vamos acrescentar uns scripts para deixar o layout mais agradável. Cole todos os códigos a seguir, acima de ]]></b:skin>
/* Efeito revelar e esconder navbar */ #navbar-iframe { opacity:0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #navbar-iframe:hover { opacity:1; } /* seleção de texto colorida */ *::-moz-selection { background: #f9f9f9; /*---Cor de fundo--*/ color:#483D8B; /*--cor da fonte--*/ } *::selection { background: #f9f9f9;/*---Cor de fundo--*/ color:#483D8B; /*--cor da fonte--*/ } /* Retirar o attribution */ #Attribution1 { clear: both; line-height: 2.5em; display: none; } /* Retirar o Assinar Postagem (Atom) */ .feed-links { height:0px; visibility:hidden; display:none; } /* Barra de rolagem colorida */ ::-webkit-scrollbar {width: 2px; height: 10px; background: #f5f5f5; } ::-webkit-scrollbar-thumb { background: #000; } *{ scrollbar-face-color:#ff004d; scrollbar-highlight-color:#ff004d; scrollbar-3dlight-color:#343434; scrollbar-darkshadow-color:#343434; scrollbar-shadow-color:#ff004d; scrollbar-arrow-color:#343434; scrollbar-track-color:#343434; } /* Negrito, itálico e sublinhado */ b{color: #3DB5D6; text-decoration: none;} /* Estilo do negrito */ i {color: #ccc; text-decoration: none;} /* Estilo do itálico */ u {color: #000; text-decoration: none; border-bottom: 1px dotted #48D1CC; } /* Imagens dos posts com bordas arredondadas */ .post img{ border-radius: 5px; } /* Footer dos posts */ .post-footer-line-1{ border-bottom: 1px dotted #BBB; /* Estilo da borda */ font-size:11px; /* Tamanho da fonte de letra */ } .post-footer-line-1{ border-bottom: 1px dotted #BBB; /* Estilo da borda */ font-size:11px; /* Tamanho da fonte de letra */ } .post-footer-line-2{ border-bottom: 1px dotted #BBB; /* Estilo da borda */ font-size:11px; /* Tamanho da fonte de letra */ }Você pode personalizar ou tirar alguns dos scripts, até porque eu os nomeei para ficar mais fácil. Visualize e se estiver de acordo com o que você quer, salve.
16. Aperte F3 e busque por /* Content Logo abaixo de content, tente encontrar esse código:
a:link { text-decoration:none; color: $(link.color); } a:visited { text-decoration:none; color: $(link.visited.color); } a:hover { text-decoration:underline; color: $(link.hover.color); }Ao encontrar, substitua todo ele por esse:
a:link { color: #C2D1D9; /* Cor do link*/ text-decoration: none; -webkit-transition: color 0.7s ease-out;-moz-transition: color 0.7s ease-out;transition: color 0.7s ease-out; } a:visited { color: #CEDAE1; /*Cor dos links visitados*/ text-decoration:none; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } a:hover { color: #CFCFCF; /*Cor do link quando passa o mouse*/ text-decoration:none; filter:alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }Salve.
17. Aperte F3 e procure por .main-inner h2.date-header { Encontrará o seguinte código:
.main-inner h2.date-header { font: $(date.font); color: $(date.text.color); }Então, substitua o código acima por esse:
.main-inner h2.date-header { border-radius:5px 0px 0px 5px; /* borda */ font: normal normal 12px tahoma; text-transform:uppercase; color: #C2D1D9; background: #f9f9f9; /* cor do fundo da caixa */ width: auto; text-align: right; /* alinhamento do texto */ padding:5px; float: right; /* na direita ou esquerda */ right: 8px; /* mais para direita */ top: 5px; /* altura da caixa */ }Esse código é referente ao estilo da data dos posts. Você pode mudar as cores e posicionar melhor caso não esteja bom. Salve.
Pronto, seu blog estará prontinho, só ira faltar o banner que vai ficar ao seu critério de fazer, enfeitar e tal.
