Diversos formulários são usados no site público, pelo motor de busca interno, a redação das mensagens dos fóruns, as inscrições para a área restrita etc.
Différents formulaires sont utilisés dans le site public, pour le moteur de recherche interne, la rédaction des messages des forums, les inscriptions à l’espace privé, etc. O mesmo se aplica para os formulários SPIP como para o resto: a sua aparência gráfica pode ser alterada via CSS para se adaptar corretamente ao seu design.
Para aproveitar esta matéria, é melhor conhecer as tags HTML próprias dos formulários.
A cada formulário o seu estilo
Todos os formulários SPIP usados no site público estão envolvidos numa div com o mesmo estilo, .formulaire_spip, que permite aplicar facilmente uma alteração a todo o conjunto de formulários.
Por exemplo, para por em negrito todas as descrições dos campos de entrada (<label>) dos seus formulários, deve estilizá-los assim:
.formulaire_spip label {
font-weight: bold;
}
Cada formulário tem também o seu próprio estilo. Isto permite, inversamente, alterar cada a aparência de certos formulários individualmente, sem interferir nos outros.
Cada um desses estilos é nomeado com o mesmo nome da tag que chama o formulário e o seu template. Por exemplo, o ficheiro HTML do formulário de busca é formulaire_recherche.html; este é inserido nos templates graças à tag #FORMULAIRE_RECHERCHE; e o estilo a que está associado é, portanto, .formulaire_recherche.
Após o SPIP 1.9, os templates foram recolocados e assim renomeados: dist/formulaires/recherche.html.
Estilos dos campos de entrada
O estilo .forml é aplicado aos campos de entrada dos formulários. Isto permite definir a cor de fundo e a largura dos campos de entrada, bem como o tamanho e a fonte de caracteres. Por exemplo:
.forml {
width: 99%;
padding: 1px;
border: 1px solid #666;
font-family: Verdana;
font-size: 11px;
}
Este estilo é particularmente útil para unificar o conjunto dos campos de entrada, sejam quais forem as tags que os recebem, tais como <input> e <textarea> ambos presentes no formulário de fórum.
Cada campo de entrda é rotulado com um termo explicativo, envolvido numa tag HTML <label>. Pode-se alterar a aparência desses tótulos com esta definição de estilo: .formulaire_spip label.
Os estilos CSS permitem não apenas alterar as cores e as fontes de caracteres, mas também gerir o posicionamento relativo dos objetos na página. É possível mesmo definir com precisão a disposição dos elementos entre eles (por exemplo: <input>, <textarea> e <label>), sem usar <table> para a montagem do layout.
Botões com as suas cores
Uma novidade que empolgará os iniciantes em CSS: pode-se alterar a cor dos campos, mas também dos botões dos formulários [1]. O estilo .spip_bouton é o usado pelos botões dos formulários SPIP.
Por exemplo, para que os botões tenham um fundo azul claro e uma borda suficientemente visível (espessura, relevo e azul escuro), altere a regra como a seguir na sua folha de estilo:
.spip_bouton {
background-color: #b0d0FF;
border: 2px outset #000060;
color: black;
}
O formulário de fórum oferece uma barra de atalhos tipográficos. A sua aparência é controlada pelo estilo .spip_barre. Assim, para alterar a aparência dos ícones que a compõem e, por exemplo, destacá-los ao sobrepor o rato, defina os estilos para .spip_barre a img e .spip_barre a:hover img.
Organizar esses elementos de modo visivelmente lógico
Os diferentes elementos de um formulário são mais rigorosamente reagrupados em «blocos lógicos» com as tags HTML dedicadas <fieldset> e <legend>. A aparência delas é controlada por .formulaire_spip fieldset e .formulaire_spip legend, simplesmente (novamente realizado com .spip_encadrer). Útil para enquadrar cada parte de uma borda e arejar os seus formulários, espaçando estes blocos entre si, por exemplo.
Alguns estilos complementares permitem ajustar ainda mais a apresentação dos seus formulários:
- A aparência das mensagens de erro e outras respostas reenviadas pelos formul;arios podem ser personalizadas pelo estilo .reponse_formulaire.
- Alguns formulários permitem visualizar os dados informados antes do envio. A aparência dessa visualização é controlada pelo estilo .previsu.
- Por fim, este último estilo não é usado nos formulários, mas está relacionado ao formulário de busca interno do site: .spip_surligne permite destacar os termos buscados nas páginas de resultado.