09/07/13
- Sidebar e título dos gadgets:
.sidebar .widget {background-color: #ffffff;border-radius: 10px;padding: 10px;box-shadow: 4px 3px 5px rgba(50, 50, 50, 0.42);box-shadow: inset 0 0 4px #eee, 0 0 10px #eee;border-bottom: 2px solid #A2B5CD;outline-offset: -3px;outline: 1px dashed #ffbfd6;}.sidebar .widget:hover {background: #cor;border-radius: 12px;border-bottom: 2px solid #CDC1C5;outline: 1px dashed #ffbfd6;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);
}
Agora procura por: .sidebar h2 { e substitua desde essa linha até à chaveta abaixo por isso:
.sidebar h2 {font-family: Terminal Dosis;text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.52);font-size: 25px;font-color: #ffffff;background: url("URL-DA-RIBBON") no-repeat center;height: 30px;width: 270px;text-align: center;float: right; /*você pode colocar left se ficar melhor*/}.sidebar h2:hover {text-align: right;}
- Área de post:
Procure por: .main-inner .column-center-outer { ou .post-outer { e substitu desde essa linha até a primeira chaveta abaixo por:
.post-outer {background-color: #ffffff;border-radius: 10px;padding: 10px;box-shadow: 4px 3px 5px rgba(50, 50, 50, 0.42);box-shadow: inset 0 0 4px #eee, 0 0 10px #eee;border-bottom: 2px solid #A2B5CD;outline-offset: -3px;outline: 1px dashed #ffbfd6;}.post-outer:hover {background: #cor;border-radius: 12px;border-bottom: 2px solid #CDC1C5;-webkit-transform: rotate(7deg);-moz-transform: rotate(7deg);-o-transform: rotate(7deg);outline: 1px dashed #ffbfd6;
}
- Explicando:
- Nunca se esqueça dos sinais de pontuação, eles fazem toda a diferença!!!
- Background corresponde ao fundo:
se você quiser uma cor sólida, coloque» background-color: #cor;
se você quiser uma imagem, coloque» background: url("url da imagem") repeat;
- O que está a negrito é para você mudar a cor, se quiser.
Tem uma tabela aqui: www
- Em termos de sombras, nós temos:
box-shadow» sombra externa
box-shadow: inset» sombra interna
- Em termos de medidas (a itálico), nós temos:
padding» é uma espécie de acolchoamento, mas não indico que mude.
width» largura, da imagem ou de outras coisas, que você pode mudar conforme quiser
height» altura, da imagem ou outras coisas, que você pode mudar conforme quiser
- Em termos de texto:
Font-family» tipo de letra
Font-size» tamanho da letra
Font-color» cor da letra
Text align» alinhamento. Está center (centrado), mas você pode trocar:
Center - centrado; Justify - justificado; Rigth - à direita; Left - à esquerda;
- Quanto às bordas (sublinhado)...
border-radius» bordas arredondadas. Quanto maior o número, mais redonda. Está a toda a volta, mas você pode especificar a zona:
- em cima à esquerda: border-top-left-radius: 20px;
- em cima à direita: border-top-right-radius: 20px;
- em baixo à esquerda: border-bottom-left-radius: 20px;
- em baixo à direita: border-bottom-right-radius: 20px;
border-bottom» borda colorida, quanto maior o número de px mais grossa fica. Bottom fá-la ficar em baixo, mas você pode colocar noutro lugar. Além disso, a palavra solid implica uma borda lisa, mas você pode colocar tracejado ou assim (www):
bottom - baixo; top - cima; left - esquerda; right - direita;
solid - sólida; dashed - tracejado; dotted - pontilhado; grove - cor dupla; ridge - cor dupla invertida;
- Rotate é a inclinação dos gadgets. Se não quiser inclinados, certifique-se de apagar todas as linhas em que essa palavra aparece.
- Outline é uma borda tracejada com alguma distância do limite da caixa
- Outline é uma borda tracejada com alguma distância do limite da caixa
- Todas as linhas que contém ":hover" significa que mudam quando se passa o rato por cima.
se você não quiser que mude nada ao passar o rato, apague desde a linha com a palavra hover até à primeira chaveta abaixo dela (.sidebar .widget:hover {; .sidebar h2:hover {)
dentro das chavetas você pode colocar tudo o que quiser mudar, mas eu só costumo colocar background, border, ou inclinação. Personalize do seu jeito ^^
- Você pode retirar as linhas do que não quiser colocar, com exceção da primeira linha, e das linhas background/background-color, padding, height e width.
- Mais tutos:
separar os gadgets em caixas: www (só a segunda parte)separar os posts em caixas: acrescente abaixo de .post-outer { a linha margin-bottom: 10px;colar a área de post à sidebar: wwwsubir a área de post/sidebar: www
{ 4 sapas opinaram... read them below or Comment }
☾ Sim, fui eu que criei o layout. Este é precisamente um blog de testes.
☾ Aceito afiliações.
☾ Até faria templates, mas não sei disponibilizar.
☾ Posso te divulgar, porém só se te achar digna de nota ou uma boa pessoa.
☾ Quanto a comentários:
♥ Os pedidos são aceites nos comentários.
♥ Não aceito xingações nem ofensas, gostos não se discutem e cada um é como é. Se quiser uma crítica, que seja construtiva.
♥ “Seguindo, segue de volta?”, só serão aceites como erro no caso de blogs principiantes – e eu irei confirmar ao blog. Caso contrário será ignorado.
♥ Deixe o link do seu blog no fim do comentário e eu faço questão de pelo menos visitar e comentar.
Me ajudou muitoo...obrigado!
ResponderEliminarÓtimo post, me ajudou bastante, mas quando eu procuro por .sidebar h2 { não aparece nenhum resultado, tem como resolver isso?
ResponderEliminarÓtimo post, me ajudou bastante, mas quando eu procuro por .sidebar h2 { não aparece nenhum resultado, tem como resolver isso?
ResponderEliminarAh que legal, me ajudou muito estava louca atrás deste tuto
ResponderEliminar