Se conhece a linguagem CSS (caso contrário, leia primeiro este artigo: «Introdução às folhas de estilo»), pode muito facilmente alterar a aparência do seu site, sem sequer precisar de conhecer a linguagem de loops e tags do SPIP.
Crie a sua folha de estilo
Durante a instalação do SPIP, os templates são distribuídos com várias «folhas de estilo externas» que reúnem as definições do projeto gráfico do site. Pode modificar esses ficheiros e incluir as suas próprias definições de estilo, mas é preferível fazê-lo no seu próprio ficheiro CSS, para evitar que os seus ajustes sejam «sobrepostos» ao instalar uma nova versão do SPIP.
Importante: nunca trabalhe diretamente nos ficheiros fornecidos por padrão, caso contrário, arrisca-se a perder todas as suas alterações a cada atualização do SPIP! Para evitar isso, faça uma cópia dos ficheiros que pretende modificar.
1. Crie um ficheiro meus_styles.css (ou qualquer outro nome que preferir) e guarde-o na sua pasta «squelettes». insira neste ficheiro as definições de estilos que deseja usar e modificar. Mas, neste tutorial, assumiremos que está a começar com uma folha em branco.
2. Referencie esta folha de estilo no cabeçalho do seu template, ou seja, entre as tags <head> do ficheiro HTML (ao lado da title e de outras meta), como abaixo:
<link rel="stylesheet" type="text/css" href="#CHEMIN{meus_styles.css}" />
Normalmente, uma única folha de estilo é suficiente para todo o design gráfico de um site, mas pode declarar quantas folhas de estilo forem necessárias dessa forma.
- **SPIP facilita-lhe a vida: perso.css**
Para explorar um pouco a personalização dos estilos, pode simplesmente criar um ficheiro perso.css na pasta squelettes/css/.
Como o SPIP carrega este ficheiro por último no <head>, os estilos aí definidos ou redefinidos terão prioridade sobre os definidos nas folhas de estilo referenciadas anteriormente. O uso deste ficheiro é especialmente útil para:
- alterar um ou outro estilo
- testar alterações
- declarar estilos personalizados
Para desenvolvimentos e personalizações mais avançadas, continua a ser recomendado usar as suas próprias folhas de estilo, declaradas conforme indicado acima.
Respeite a «cascata»
É importante ter em mente o funcionamento «em cascata» do CSS (Cascading Style Sheets significa literalmente «folhas de estilo em cascata»): quando várias definições de estilo afetam o mesmo elemento, aplica-se prioritariamente o estilo mais próximo do elemento. Portanto, a ordem em que os estilos são «lidos» é relevante.
- Folhas de estilo externas
Se usar várias folhas de estilo, note que a ordem em que estas são chamadas no cabeçalho da página é crucial. Se chamar primeiro meus_styles.css e depois spip_style.css, os estilos desta última, mais próxima, terão prioridade sobre os seus. Portanto, pense em fazer o contrário:
<link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}">
<link rel="stylesheet" type="text/css" href="#CHEMIN{meus_styles.css}">
- Estilos definidos no código HTML
Se não desejar mexer nos ficheiros CSS, pode continuar a inserir, em determinados locais, as indicações gráficas diretamente no código HTML dos seus templates: definindo alguns estilos no head, e/ou colocando as indicações de estilo diretamente nas tags HTML da página.
Os estilos colocados diretamente nas tags, por estarem mais próximos dos elementos em questão, terão prioridade sobre os definidos no head, que, por sua vez, terão prioridade sobre os das folhas de estilo externas.
Estilos com «classe»
Como fazer então para mudar, por exemplo, a aparência de todos os entretítulos do SPIP? É muito simples. Abra o seu ficheiro meus_styles.css num editor de texto e adicione a seguinte linha:
h3.spip { color: red; font-size: 18px; }
Recarregue a página: todos os entretítulos aparecerão como por magia em vermelho; repare ainda que os outros h3 da sua página, se existirem, não serão exibidos em vermelho.
Explicando brevemente a sintaxe desta regra de formatação:
- h3.spip logo antes das chavetas define que a regra se aplica apenas aos <h3> que possuem um atributo class igual a «spip». Note bem: nem os <h3> que não têm esse atributo, nem as tags que têm esse atributo mas não são <h3>, serão afetados.
Se adicionar os seus próprios estilos, saiba que o valor atribuído ao atributo class é totalmente arbitrário. A única coisa que importa é que use o mesmo nome no código HTML (class="toto") e na sua folha de estilo CSS (.toto { ... }).
Lembre-se, contudo, que não pode renomear as class associadas ao código gerado pelo SPIP (cujas definições de estilo estão agrupadas no [spip_style.css->7060]).
- As chavetas contêm a lista das propriedades gráficas associadas ao estilo assim definido. Aqui vemos que a cor é definida como vermelho e que a fonte deve ser exibida com um tamanho de 18 pixels.
Note-se que todas as propriedades não definidas nesta lista manterão o seu valor habitual para a tag considerada; neste caso, o h3 gerará sempre um texto em negrito, porque nada nesta definição de estilo diz o contrário.
A gestão do cache
O facto de os estilos estarem definidos num ficheiro separado tem uma consequência importante. De facto, este ficheiro, ao contrário dos seus templates, não é gerido pelo SPIP (não há necessidade disso!). Isso significa que se alterar uma folha de estilo, não precisa de limpar o cache do SPIP: basta recarregar a página no seu navegador. Isto torna o ajuste do layout ainda mais simples.
Lembre-se, no entanto, que a sua folha de estilo deve ser declarada nos seus ficheiros HTML, e que estes devem ser recalculados uma primeira vez para que essa declaração seja levada em conta. ... </quote>