24/08/13
 |
| www |
Importante!!!
- Algumas áreas começam só com o nome, mas outras vêm antecedidas de pontos ou cardinal ("." ou "#"), então atento a isso. Eu só darei o nome, nada de modelos ou assim
- Sempre que você vir uma vírgula, significa que os efeitos serão aplicados na área antes e na área depois da vírgula. Se quiser que tenham efeitos diferentes, é só uma questão de colocar em áreas separadas - mas isso é mais para profissionais...
- Não se esqueça que os códigos de personalizações devem ser colocados dentro das chavetas {}. Eu só darei o nome seguido da chaveta que abre, então não se esqueça de fechar.
- Lembrando que para facilitar a pesquisa, você clica na caixa do HTML e depois dá Ctrl + F. Aparecerá uma caixa de pesquisa onde pode escrever o nome da área que quer e ao dar enter é levado lá
Sobre os hovers
- São o aspeto que alguma área ganha quando se passa o rato
- Para fazer, é só repetir o nome da área que quer escrevendo :hover (sim, com dois pontos e a palavra hover sem dar espaço) à frente, e depois manter a chaveta que abre e fecha. As alterações ficarão dentro das chavetas, naturalmente, e pode mudar QUALQUER coisa
- Repete-se o nome da área com hover depois de fechar a chaveta da parte sem hover. Afinal, estamos a criar uma nova área, e não uma personalização da original.
- Indico, para a mudança ser gradual, que escreva dentro das chavetas com e sem hover -webkit-transition-duration: .60s;
- Exemplo sem hover: .sidebar h2 {} Exemplo de hover: .sidebar h2:hover {}
- No HTML, fica assim: www «imagem
Áreas de personalização que já existem
Área de post:
- .main-inner .column-center-outer {
- .post-outer { »»»» caso no seu HTML não haja o primeiro código~
- com hover, adicione abaixo: .post-outer:hover {
Título da postagem:
- h3.post-title {
- com hover, adicione: h3.post-title:hover {
Sidebar
- .sidebar .widget {
- com hover, adicione: .sidebar .widget:hover {
Data
- .main-inner h2-date-header {
- Com hover, adicione: .main-inner h2-date-header:hover {
Mensagens antigas, home, e recentes
- Procure por: <data:newerPageTitle/> «para as recentes (esquerda)
- Procure por: <data:homeMsg/> «para a home (centro)
- Procure por: <data:olderPageTitle/> «para as antigas (direita)
- Substitua os 3 por: <img src="URL DA IMAGEM" />
Áreas de personalização que você tem de adicionar
Título da sidebar
- Procure por /*Mobile
- Adicione abaixo do tracejado (-----) .sidebar .widget h2 {
- Com hover, adicione: .sidebar .widget h2:hover {
Post footer
- Procure por ]]></b:skin>
- Acima escreva: .post-footer {
- Para hover, escreva também: .post-footer:hover {
Blockquote
- Procure por ]]></b:skin>
- Acima escreva: blockquote {
- Com hover, adicione: blockquote:hover {
Negrito, itálico, sublinhado e tachado
- Procure por ]]></b:skin>
- Escreva acima os seguintes códigos do que quer personalizar:
- Negrito: b {
- Negrito em hover: b:hover {
- Itálico: i {
- Itálico em hover: i:hover {
- Sublinhado: u {
- Sublinhado em hover: u:hover {
- Tachado: strike {
- Tachado em hover: strike:hover {
Leia mais
- Procure por ]]></b:skin>
- Escreva acima: .jump-link { » nessa parte você trata da forma e fundo
- Escreva também: .jump-link a { » nessa parte você trata do texto
- Com hover na forma, adicione: .jump-link:hover {
- Com hover no texto, adicione: .jump-link a:hover {
Seleção colorida
- Procure por ]]></b:skin>
- Escreva acima: ::-moz-selection {
- Escreva também: ::selection {
- As personalizações dentro de cada área devem ser iguais. Mude só o fundo e a cor do texto, e ponha sombra se quiser, mas não adianta colocar mais nada.
- Não é possível fazer hovers
Fonte geral do blog
- Procure por ]]></b:skin>
- Acima cole: div {
- Não é possível fazer hovers
Menus
- Procure por ]]></b:skin>
- Acima cole: .nome-do-menu { »»» aí você substitui pelo nome do menu que pegou ou criou, e deverá ser substituído também no hover e no gadget do menu
- Para hover, adicione: .nome-do-menu:hover {
Efeitos de imagem
- Procure por ]]></b:skin>
- Acima cole: .nome-do-efeito { »»» aí você substitui pelo nome correspondente, e o mesmo no hover e no gadget que quer aplicar
- Para hover, adicione: .nome-do-efeito:hover {
Marcadores
- Procure por ]]></b:skin>
- Acima cole: .widget ul, .widget #archivelist ul.flat {
- Cole também: .widget ul li, .widget #archivelist ul.flat li {
- Para hover, adicione: .widget ul li:hover {
Barra de rolagem
- Procure por ]]></b:skin>
- Acima escreva: ::-webkit-scrollbar-thumb:vertical { ««barra que se move
- Escreva também: ::-webkit-scrollbar { ««barra fixa
- Hover na barra que move: ::-webkit-scrollbar-thumb:vertical:hover {
- Hover na barra fixa: ::-webkit-scrollbar:hover {
Cortinas
- Procure por </body>
- Acima escreva: <div style=" background-image: url('URL DA IMAGEM'); top: 0px; right: 0px; width: 100%; height: 50px; z-index: 100; position: fixed;"></div>
- Substitua a url da imagem, a altura e largura, e onde diz top pode mudar para o local que quiser (bottom - baixo; right - direita; left - esquerda)
Outros
Estes são constituídos por muitas personalizações, então indico que use os links de modelos que deixarei aí caso queira personalizar essas áreas:
É isto, espero que seja útil, para mim pelo menos é caso esteja mais esquecida >.<
