Esta é a segunda parte que apresento do tutorial sobre como editar um tema WordPress, realizando a edição do ficheiro style.css que modifica toda a aparência do blog. No tutorial 1 você aprendeu como inserir o cabeçalho no arquivo e como definir os atributos da página de maneira geral. Agora veremos como tratar outros elementos.
Pode haver alguma diferença de um tema para outro, mesmo assim é possível por comparação editar outro ficheiro style.css desde que se conheça a linguagem de formatação css.
Os links: Os valores que os links devem apresentar quando não forem declarados nenhum atributo em específico para determinada área, podem ser declarados logo depois do body. Um possível exemplo:
a, a:visited {
color: #2255AA;
text-decoration: none;
}
a:hover {
color: #7DAE12;
text-decoration: underline;
}
a img {
border: none;
}
Explicando o código: A declaração a (âncora ou link) e a:visited (link visitado) servem para marcar ou definir os aspectos visuais do link e do link visitado, respectivamente. Perceba que na maioria dos blogs a cor do link depois de ser clicado não é mais o mesmo.
O valor de “color” define a cor do link que deve ser escrito em código hexadecimal para cores. Isso nos dá uma boa variedade de cores disponíveis; Segue alguns exemplos:
#FFFFFF – preto
#008000 – verde
#0000FF – azul
#FF0000 – vermelho
#FF8000 – laranja
#FF00FF – pink
O valor de ”text-decoration” define se o texto apresentará alguma “decoração”. Pode-se definir: none (nenhum); underline (sublinhado); overline (traço acima do texto), são os valores mais comuns para links.
Neste exemplo ainda temos um link de imagem. Para este, o atributo border foi definido como sem borda. Em outras palavras, a imagem não apresentará bordas (como se fosse uma moldura).
O header ou cabeçalho pode apresentar os seguintes elementos:
#header { height: 115px; } Usado para definir a altura do cabeçalho.
#header h1 {
margin-bottom: 0px ;
padding: 32px 0 0 0;
font-family: Arial, Helvetica, Sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 48px;
}
O header h1 geralmente é usado no título do blog. O margin-bottom define a margem de espaço abaixo do título e o padding define o espaço entre o título e a margem. Font-family e font-weight são usados para definir a família da fonte usada e o tipo de fonte, geralmente é usado normal ou bold (negrito). Uppercase transforma todos os caracteres em letras maiúsculas e font-size o tamanho da fonte do título.
#header h1 a, #header h1 a:visited {
color: #39382f;
text-decoration: none; }
Como o título geralmente é um link para home do blog, defina a cor [color] e declare como none a decoração para evitar o sublinhado padrão usado nos links.
#header h2 {
color: #7b7b76;
font-size: 14px;
line-height: 14px;
font-family: Arial, Helvetica, Sans-serif; }
O header h2 geralmente é usado para o slogan do blog. Quase sempre usa os mesmos atributos do h1, mas com um tamanho de fonte menor.
.logoimg {
margin: 30px 0 0 0; }
Alguns temas usam uma imagem de logotipo que são posicionadas acima do nome do blog. Definir o logo é necessário saber se seu tema suporta ou então pode ficar mal posicionado.
Boa parte dos temas apresentam uma barra de menus, seja para expor as páginas do blog ou as categorias. Alguns blogs, podem apresentar ambas. As definições da navbar (barra de navegação) varia muito de um tema para outro. Vejamos aqui um exemplo menos complexo.
.nav {
height: 30px; //define a altura da barra de navegação;
padding-left: 1px; //espaçamento esquerdo de um pixel;
border-bottom: 1px solid #008000; //borda de baixo com um pixel de espessura, sólido (linha vísivel) e de cor verde;
border-top: 2px solid #008000; //borda de cima com os mesmos valores do item acima;
background:#FFFFFF; //cor de fundo da navbar
}
Por se tratar de exibir uma lista de páginas ou categorias, é necesario atribuir valores para ul (tag de lista).
#nav, #nav ul {
padding: 0; //sem espaçamento entre os termos da lista e a margem;
margin: 0; //sem espaçamento de margem;
list-style: none; //retira o padrão das listas (vertical) e podendo se mostrada na horizontal.
line-height: 1; // define a espessura da linha de base.
}
O trecho abaixo define a formatação dos links da barra de navegação. Perceba que muitos dos elementos já foram tratados, atribuindo-se valores diferentes apenas.
#nav li a, #nav li a:link {
color: #39382f;
display: block;
margin: 0px 6px 0px 0;
padding: 10px 14px 11px 12px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-serif;
Findo aqui a segunda parte de nosso tutorial. Mesmo assim com o pouco que aqui foi apresentado já é suficiente para realizar grandes mudanças no visual do blog. Mantenha seu arquivo original e trabalhe sempre com uma cópia. Teste, teste e mais testes, apenas com prática se consegue obter resultados.
Em breve postarei como definir outros valores de uma ficheiro style.css.
