Conforme prometido no artigo temas-para-wordpress-como-editar quando mostrei que é possível editar um tema do wordpress, dou início ao tutorial sobre a edição do arquivo style.css para modificar a aparência de seu blog wordpress.
O arquivo style.css que é o ficheiro padrão em qualquer tema wordpress tem como função montar o aspecto gráfico do blog. Todos os elementos visuais são definidos neste ficheiro. Assim, saber editá-lo é saber alterar a aparência do blog.
Quando se abre o editor do wordpress, as primeiras linhas de código que observamos são comentadas (estão entre os /* e */), isso faz com que possamos iserir ou mesmo apagar alguns dados sem algum problema. Certamente o arquivo que você vai trabalhar não se encontrará exatamente como o abaixo, pois esta já se encontra editado. Veja o exemplo:
/*
Theme Name: O nome do tema aqui
Theme URI: End. URL para seu tema (caso queira distribuí-lo)
Description: A descrição para o tema.
Version: 1.0
Author: Seu nome
Author URI: End. URL para site pessoal do autor
Tags: Palavras que identifiquem o tema (p.e. cor, colunas, etc.)
*/
É quase certo que logo abaixo virá o body e seus atributos
body {
font-size: 12px
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background: #d5d6d7 url(‘images/nome-da-imagem.jpg’);
color: #333;
text-align: center;
}
Explicando um pequeno trecho do código:
Os valores apresentados referem-se ao corpo da página (body). Todos os valores entre as chaves, definem aspectos para toda a página.
font-size: define o tamanho da fonte em 12px, isto significa que o tamanho da letra padrão nos posts e links são de tamanho 12;
font-family: define que o tipo de letra usado será da família Lucida grande, na impossibilidade desta as demais serão usadas, respeitando-se a ordem;
background: define a cor do plano de fundo da página e uma imagem de plano de fundo. A imagem será salva na pasta images e sua extensão pode ser jpg, gif ou png. Caso a imagem não carregue corretamente no browser, a cor será exibida;
color: define a cor da letra (fonte) para toda a página;
text-align: define o alinhamento do texto, que neste exemplo se encontra centralizado.
Outros elementos podem aparecer ou não. Isso pode variar com o tema.
a: define a cor dos links no tema. Aceita cores, sublinhado, tachado ou sobrescrito.
a:hover: define a cor do link quando o mouse está posicionado sobre o link.
h2: define os valores dos títulos h2 nos artigos do blog.
#content: admite vários atributos e valores do conteúdo do blog.
.post: admite valores e atributos de formatação do post. define a posição, limites, margens e bordas da area textual.
Se você visualizar o ficheiro style.css verá que aparece muitos outros atributos e valores que não mostro aqui. Mas que também podem ser devidamente alterados.
A vantagem de se trabalhar com CSS é a possibilidade de mudar o valor do atributo. Assim se foi definnido como padrão a cor da fonte como #333 (código hexadecimal para cores), não significa que sejamos obrigados a usar esta fonte do início ao fim do blog. Caso se queira posteriormente pode-se mudar para qualquer valor, uma parte do exto, ou mesmo uma letra apenas em todo o site, sem afetar o resto do projeto.
Muito ainda tem para ser explicado e seria demasiadamente grande publicar em um único artigo. Num outro tutorial mostro como modificar os links, o head (cabeçalho), content (conteúdo)… Até o próximo.
Internet, tecnologia, dinheiro e informao com qualidade……
Aprenda como editar o ficheiro style.css de seu tema wordpress e o torne nico. Acesse a primeira parte do tutorial……
Muito obrigado pela matéria, era isso mesmo que eu estava procurando !!!
Um abraço.