Oi oi galera!!
Essa é a 4ª parte do tutorial "Criando um Template" do quadro "Para blogueiras(os)" já viu as postagens anteriores? Se não viu ainda, venha conferir, se já viu continue lendo, e confira a continuação do tutorial..
Personalizando os títulos da sidebar e cores de links
Vamos dar continuidade ao tutorial “Criando um Template” do
quadro “Para bloguieras(os), e nesse post vamos aprender como personalizar os
títulos da sidebar e as cores dos links.
Para alterar as cores dos links é bem fácil. Existem duas
opções: mudar nas variáveis ou no CSS, eu prefiro a segunda opção.
Abra o seu editor e use o esqueminha do Crtl+F e na caixinha
digite a:link
Deverá aparecer o seguinte código:
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
Substitua $linkcolor; $visitedlinkcolor; e $titlecolor;
Por códigos Hexadecimais (#FFFFFF) da cor que você deseja
(no fim do post terá um link para o site onde eu encontro os meus códigos).
Dando estilo aos títulos da sidebar
Comece procurando através do esquema Ctrl+F o código
Copie o seguinte código:
.sidebar h2 {
margin:0em 0 .75em;
font:$headerfont;
font-family: Arial; /* Fonte básica Arial*/
line-height:
1.9em;
text-transform:
uppercase; /*Todas as letras em maiusculo */
font-weight: bold; /*Está em negrito */
letter-spacing:.1em;
color: #FFFFFF; /* Letra na cor branco */
background:
#000000; /* Fundo na cor preto */
font-size:
12px;
text-align: center; /* Texto Centralizado */
}
Agora cole-o abaixo de /* Headings
----------------------------------------------- */
Altere o código de acordo com o que você deseja mudar:
Sendo que:
Font: Define o tipo da fonte
Font-family: Define e família de fonte.
Line-height: altura da linha
Text-transform: transformação do texto
Tipos de transformação de texto:
Uppercase – todas as letras
em maiúsculo
Lowercase – todas as letras em minúsculo
Capitalize – apenas a primeira letra em maiúsculo
None – nenhuma transformação
text-decoration: Define se o texto terá alguma decoração.
Tipos de decoração de textos:
Underline – Sublinhado
Overline – Com uma linha em cima
Line-through – Cortado
font-weight: Define o peso da fonte, ela pode ser normal, ou
bold(negrito).
font-style: define o
estilo da fonte.
O estilo da fonte pode ser:
Italic – Itálico
Bold – Negrito
Oblique – Obliqua
text-align: Define o alinhamento
do título.
Tipos de alinhamento:
Left – Esquerda
Right – Direita
Justify – Justificado
Center – Centralizado
Depois de alterar o código da forma que você preferir, e
colocá-lo em seu HTML, o código deverá ficar mais ou menos assim:
Olhe como ficou:
Se gostou do Tutorial deixe seu comentário ai embaixo, o seu comentário serve de incentivo para que haja continuação!!
Se ficou alguma dúvida, ou se você fez e o seu não deu certo, pode deixar sua pergunta nos comentários, responderei e resolverei seu problema o mais rápido possível!!
Links extras:
Template usado para o tutorial: Minima Blogger
Paleta de cores hexadecimais: Cores para HTML
XoXo
0 comentários:
Postar um comentário