Los colores del sitio¶
Los colores del sitio no se eligen libremente, pantalla por pantalla: todos proceden de una misma paleta, definida de una vez por todas. Esta página explica este principio y sus consecuencias. El detalle de la pantalla está en Colores.
En un minuto¶
- La paleta tiene diez colores, ordenados en espacios numerados del 1 al 10. Se ajusta en Ajustes > Colores.
- En todos los demás sitios (una actividad, una página, una categoría de entradas), se elige uno de estos colores en una lista. Nunca se introduce un código de color.
- El sitio guarda el número del espacio elegido, no el color en sí.
De ahí la consecuencia principal: cambiar un color de la paleta lo cambia en todas partes a la vez. Si el naranja del centro pasa a ser un naranja más suave, todas las actividades, páginas y bloques que lo usan lo siguen, sin tener que retocarlos uno por uno.
Quién puede modificar los colores¶
Los colores forman la identidad gráfica del sitio: solo los administradores pueden modificarlos. Los editores abren la misma pantalla en modo de solo lectura, para copiar en ella las clases CSS de los colores (consulta más abajo).
Si crees que un color debería cambiar, dirígete al administrador del sitio.
Dónde se usa cada color¶
Un color de la paleta puede usarse en cuatro sitios.
Las actividades. Cada actividad recibe un color. Sus sesiones toman este color en el calendario público, en los bloques «Próximos eventos» y en la página del evento. Un evento puede, de forma excepcional, recibir un color propio (consulta más abajo).
Las páginas y las categorías de entradas. Una página puede recibir su propio color; si no, toma el color por defecto del sitio. Lo mismo ocurre con una categoría de entradas.
Los roles. Algunas partes del sitio tienen un color asignado, elegido en la paleta:
| Rol | Lo que colorea |
|---|---|
| Color por defecto | El color dominante del sitio: cabecera, pie de página, menú, páginas sin color propio. |
| Color de los botones del calendario | Los botones de navegación del calendario público. |
| Color de las barras de desplazamiento | Las barras de desplazamiento de la página y de las franjas que se desplazan. |
Los submenús no tienen color propio: retoman el color por defecto, un poco aclarado. Así siguen a juego con el menú cuando este cambia.
Los bloques de las páginas de Avada. Un bloque de una página (una sección, un texto, un título…) puede tomar un color de la paleta (consulta más abajo).
Colorear un bloque de una página¶
En las páginas construidas con Avada, un bloque se colorea añadiéndole una clase CSS: una pequeña palabra clave, pegada en el campo CSS Class de los ajustes del bloque. Cada color de la paleta tiene dos clases, que se copian desde la pantalla Colores:
background-color-seguido del nombre del color, para colorear el fondo del bloque (background-color-orange);text-color-seguido del nombre del color, para colorear su texto (text-color-orange).
La clase text-white escribe el texto en blanco, sobre un fondo de color.
El procedimiento y algunos ejemplos están en Botones Fondo y Texto.
El nombre de un color importa
Las clases se fabrican a partir del nombre del color. Si orange pasa a llamarse
amber, la clase background-color-orange deja de existir, y los bloques que la usaban
pierden su color. Cambiar el tono de un espacio, en cambio, no rompe nada.
Consulta Nombre.
Las excepciones¶
Dos ajustes aceptan un color fuera de la paleta:
- una página: «Color de la página» > «Elegir otro color»;
- un evento: «Color personalizado», cuando debe distinguirse de su actividad.
Estos colores no siguen los cambios de la paleta. Resérvalos para las verdaderas excepciones.
Cuándo se ve el cambio¶
En cuanto un administrador guarda una modificación de los colores, se vacía la caché del sitio: los visitantes ven los nuevos colores en su siguiente visita. Si tu propio navegador sigue mostrando los antiguos, recarga la página con Ctrl + F5 (en Mac: Cmd + Mayús + R).
Para saber más¶
- Colores: la pantalla, ajuste por ajuste.
- Eventos, actividades y sesiones: el papel de las actividades en la agenda.