Recuerda que las hojas de estilo, usadas conjuntamente con SPIP, permiten adaptar la visualización de los atajos tipográficos al aspecto de la página. Bien, pues sucede lo mismo con los formularios generados por SPIP : su aspecto gráfico se puede modular para integrarse sin diferencias con tu diseño.
Una vez más, no se trata aquí de revisar todos los estilos proporcionados por SPIP. Sin embargo, hay que saber que se puede alterar el aspecto de todos los formularios del espacio público: formulario de respuesta a los foros, de búsqueda, de firma de petición... [1] Vamos a dar algunas recetas.
Los colores y el relieve
Una novedad que va a encantar a los principiantes en CSS : se puede cambiar el color de los campos y los botones de los formularios [2].
Por ejemplo, para que los botones tengan un fondo azul claro, añade la siguiente regla a tu archivo CSS (que, si has seguido este tutorial al pie de la letra, se llama mes_styles.css) :
.spip_bouton {
background-color: #b0d0FF;
color: black;
}Los botones aparecen desde ahora con un fondo azul claro (propiedad background-color), y un texto negro. Fíjate que .spip_bouton es el estilo utilizado por los botones y campos de los formularios SPIP.
Ahora vamos a modificar el aspecto del borde de los botones. El relieve tradicional de los botones HTML ya está un poco anticuado. Podemos decidir aplanar los bordes, y ensancharlos en contrapartida para que sean bien visibles. Por ejemplo :
.spip_bouton {
background-color: #b0d0FF;
color: black;
border: 2px solid #000060;
}La propiedad border definida traza un contorno de 2 pixels de ancho, de aspecto plano («solid» en lenguaje CSS) y de color azul rodeando los botones. Igualmente se puede modificar el tipo de caracteres del botón (con las propiedades font-size y font-family como se ha visto en las etapas anteriores de esta inicición).
¿Y los campos? Basta con aplicar los cambios al estilo .forml en lugar de a .spip_bouton.
Un poco de espacio
Las hojas de estilo permiten no sólo de cambiar los colores y los tipos de fuentes; también se puede gestionar la posición relativa de los objetos dentro de la página. Sin ir más lejos, veamos cómo desahogar un poco los formularios :
.formulaire {
background-color: #e8f4ff;
font-family: Verdana, Arial, sans-serif;
font-size: 90%;
font-weight: normal;
border: 1px solid black; padding: 10px;
}Aquí cambiamos la visualización del estilo .formulaire, que es el estilo principal de todos los formularios generados por SPIP. El interês de modificar este estilo es que se puede gestionar la visualizacióne de todos los formularios. Aquí le hemos aplicado un color de fondo, muy claro, y un estilo de fuentes. Pero, sobre todo, se ha modificado el espaciado interior de cada formulario individual. La propiedad padding es la que permite el efecto de espaciado. Hay que tener en cuenta que la separación se produce precisamente en el interior del borde definido por la propiedad border : el formulario se considera aquí como un bloque rectangular autónomo.
Nota: las hojas de estilo permiten incluso definir la disposición de estos bloques rectangulares entre ellos, sin utilizar tablas para colocarlos. Sin embargo, esta es una materia demasiado larga para tratar en una iniciación.
Aquí termina esta breve introducción de SPIP y los CSS. Sólo nos falta aconsejarte nuestros sitios preferidos para ir más allá.