Colores¶

Dónde: menú Ajustes > Colores. Quién: los administradores modifican los colores; los editores los consultan y copian sus clases CSS.

Aquí es donde se definen los colores de la identidad visual del sitio, de una vez por todas. Ninguna otra pantalla permite escribir un color libremente: las actividades, los eventos, las páginas y las categorías de entradas eligen uno de los colores definidos aquí.

La ventaja: modificar un color en esta pantalla lo modifica en todas partes a la vez. Si el naranja del sitio pasa a ser un naranja más suave, todas las actividades, páginas y bloques que lo usan cambian de golpe, sin tener que retocarlos uno por uno.

Por qué solo los administradores pueden modificar los colores

Estos colores forman la identidad visual del sitio. Se han pensado con cuidado de antemano, para que combinen entre sí y den al sitio su identidad. Como cambiar uno modifica la apariencia de todo el sitio de golpe, solo los administradores pueden modificarlos.

Los editores ven la misma pantalla en modo de solo lectura, para copiar en ella las clases CSS de los colores (consulta Lo que ven los editores). Si te parece que un color debería cambiar, dirígete al administrador del sitio.

1 Paleta: los colores del sitio. 2 Roles de color: qué color de la paleta colorea qué parte del sitio. 3 Color de los submenús: calculado a partir del color por defecto. 4 Clases CSS antiguas en francés: ajuste de compatibilidad para los sitios antiguos. 5 Guardar cambios: no se tiene en cuenta nada antes de este clic.

Entenderlo en un minuto¶

flowchart LR
    P["Paleta<br>10 colores"] --> A[Actividades]
    P --> E[Eventos]
    P --> G[Páginas]
    P --> C[Categorías de entradas]
    P --> R["Roles<br>cabecera, pie de página,<br>menú, calendario…"]
    P --> K["Clases CSS<br>bloques de las páginas Avada"]

La paleta tiene 10 espacios, numerados del 1 al 10. Cada uno recibe un color y un nombre.
En todos los demás sitios, se elige un espacio en una lista desplegable, donde cada color aparece con su número y su nombre (por ejemplo 2 · orange-light).
El sitio guarda el número del espacio, no el color en sí. Por eso cambiar el color de un espacio se refleja en todas partes.

Lo que ven los editores¶

Un editor abre la misma pantalla, en modo de solo lectura:

un mensaje recuerda que los colores forman parte de la identidad visual;
cada color usado aparece con su número, su nombre, una vista previa y su código, seguidos de los botones Fondo y Texto para copiar su clase CSS;
el botón de copia de Texto blanco sigue disponible;
los roles y el color de los submenús se muestran, sin poder cambiarse;
no hay botón Guardar cambios.

El resto de esta página describe la pantalla tal como la ven los administradores.

La paleta¶

1 Número del espacio. 2 Nombre. 3 Color. 4 Botones de copia de las clases CSS.

Un espacio sin color no se usa: no aparece en ninguna lista de opciones. No estás obligado a rellenar los diez.

Número¶

El número no cambia nunca. Es el que guardan las actividades, las páginas y los demás ajustes: puedes, por tanto, modificar el color o el nombre de un espacio sin que pierdan su ajuste.

Nombre¶

El nombre sirve para crear las clases CSS del color (consulta Botones Fondo y Texto) y lo identifica en las listas de opciones.

Escríbelo en inglés: es lo habitual en CSS, y las clases del plugin también lo están (background-color-…, text-color-…). Por ejemplo orange, orange-light, dark-blue.
Usa minúsculas, cifras y guiones, sin acentos ni espacios. Un nombre escrito de otra forma se convierte al guardar («Dark Blue» pasa a ser dark-blue).
Si se deja vacío, el nombre se sustituye por el número del espacio.
Dos espacios no pueden llevar el mismo nombre.
Algunos nombres están reservados por el plugin y se rechazan: page, page-light, page-clair, default, defaut.
Evita repetir el identificador de una categoría de entradas (su «slug», visible en Entradas > Categorías): ambos se contradirían. Un mensaje te avisa si es el caso.

Consejo: nombra cada color según su tono

orange, blue, green… y añade -light para su versión clara: orange-light. Si algún día la identidad visual evoluciona hacia un naranja ligeramente distinto, cambia el color, no el nombre.

Cambiar el nombre de un color estropea las páginas que lo usan

Si orange pasa a ser amber, la clase background-color-orange deja de existir, y los bloques de las páginas que la usaban pierden su color. El cambio de nombre se memoriza: la pantalla Herramientas > Migración de los colores del sitio propone luego actualizar todas esas páginas. Cambia el nombre de un color solo si es realmente necesario.

Color¶

Haz clic en el botón Seleccionar color para abrir el selector.

1 Elige el color en el cuadrado. 2 Ajusta su tono, más claro o más oscuro, con la barra de la derecha. 3 O pega el código del color que da la identidad visual: un # seguido de seis caracteres, por ejemplo #e67e22. 4 Borrar vacía el espacio.

No vacíes un espacio que todavía se usa

Todo lo que usaba este color lo pierde, pero no de la misma manera:

las páginas y los roles vuelven al color por defecto;
los bloques coloreados con sus botones Fondo o Texto dejan de estar coloreados;
las actividades conservan su antiguo color en el calendario y en los bloques «Próximos eventos», pero su elección de color aparece vacía en su pantalla: habrá que elegirles otro en la próxima modificación.

Antes de vaciar un espacio, elige otro color en todos los sitios donde se usa.

Botones Fondo y Texto¶

Estos botones sirven para colorear un bloque en una página construida con Avada (contenedor, columna, bloque de texto, título…). Solo aparecen en los espacios que tienen un color.

Copian una clase CSS: una pequeña palabra clave que se añade a un bloque para cambiar su apariencia, aquí para darle un color de la paleta.

Haz clic en Fondo para colorear el fondo del bloque, o en Texto para colorear su texto. La clase se copia: el botón muestra ✓ durante un segundo.
En el constructor de Avada, abre los ajustes del bloque que quieres colorear, pestaña General. Por ejemplo un contenedor (Container), es decir, una sección de la página, para colorear su fondo; o un bloque de texto (Text Block), para colorear su texto.
Pega la clase en el campo CSS Class y guarda la página. Para poner varias, sepáralas con un espacio.

Botón	Clase copiada	Efecto
Fondo	`background-color-orange`	fondo del bloque del color `orange`
Texto	`text-color-orange`	texto del bloque del color `orange`

Escribir en blanco. Sobre un fondo de color, añade la clase text-white: todo el texto del bloque pasa a blanco. No forma parte de la paleta (no es un color a elegir, solo «blanco»): tiene su propio botón de copia, justo debajo de la paleta; consulta Texto blanco.

Aclarar un fondo. Añade una segunda clase, separada por un espacio: background-opacity-XX, donde XX es un porcentaje. Por ejemplo, background-color-orange background-opacity-40 da un fondo naranja al 40 %.

Ejemplos

Bloque de Avada	En el campo CSS Class	Resultado
Contenedor (una sección de la página)	`background-color-blue text-white`	sección con fondo azul, texto en blanco
Contenedor	`background-color-orange background-opacity-20`	sección con fondo naranja muy claro
Bloque de texto	`text-color-orange`	texto en naranja

Nombres antiguos

En los sitios más antiguos, quizá encuentres texte-blanc en algunas páginas: es el nombre antiguo de text-white, y sigue funcionando. Para una página nueva, usa text-white.

Nombre nuevo todavía sin guardar

Si acabas de escribir o de modificar un nombre, los botones ya copian la nueva clase, pero esta solo funcionará en el sitio después de Guardar cambios.

Texto blanco¶

Justo debajo de la paleta, un botón Copiar da acceso a la clase text-white: pone el texto de un bloque en blanco, para escribir sobre un fondo de color. Como con los botones Fondo y Texto, basta con hacer clic y luego pegar la clase en el campo CSS Class del bloque en Avada (consulta Botones Fondo y Texto).

Este campo es puramente práctico: text-white no forma parte de la paleta y no se guarda, así que el botón funciona igual de bien para los administradores que para los editores.

Los roles de color¶

Un rol asigna un color de la paleta a una parte concreta del sitio. Cada lista solo propone los espacios que tienen un color, y toma el color de la opción elegida.

1 Color por defecto. 2 Color de los botones del calendario. 3 Color de las barras de desplazamiento. 4 Color de los submenús. 5 Clases CSS antiguas en francés.

Color por defecto¶

El color principal del sitio: es el que determina su color dominante. Colorea:

la cabecera y el pie de página de todas las páginas;
el menú del sitio (el menú deslizante);
las páginas que no tienen color propio (ajuste «Color de la página» de cada página);
los botones de los formularios y varios elementos del diseño;
los bloques «Próximos eventos» y las páginas de evento, cuando la actividad no tiene color.

También tiene sus botones Fondo y Texto, que copian background-color-default y text-color-default: un bloque coloreado así seguirá el color por defecto aunque lo cambies algún día.

Color de los botones del calendario¶

Los botones de navegación del calendario: periodo anterior, periodo siguiente y vuelta al periodo actual. Al pasar el ratón, un botón se aclara; al hacer clic, se oscurece. El botón de vuelta se queda más claro mientras ya se está en el periodo actual.

Su texto sigue lo que se muestra: «hoy» en la vista por mes, «esta semana» en la vista por semana, la de los móviles.

Color de las barras de desplazamiento¶

La parte móvil de las barras de desplazamiento: la de la página, y las de las franjas que se desplazan horizontalmente (próximos eventos, retratos de los maestros).

Note

Firefox no aplica este color y mantiene sus barras de desplazamiento habituales.

Color de los submenús¶

Los submenús del menú deslizante no tienen color propio: retoman el color por defecto, aclarado el número de puntos de luminosidad indicado. Así, el menú y los submenús siguen combinando, incluso cuando cambia el color por defecto.

La vista previa muestra el color del menú (arriba) y el de los submenús (abajo), tal como están guardados.
0: los submenús tienen exactamente el color del menú, ya no se distinguen.
8 (valor por defecto): una diferencia discreta pero visible.
100: los submenús se vuelven blancos.

El tono se conserva: el resultado es el mismo color más claro, no un color desvaído.

A la izquierda, el menú, del color por defecto. A la derecha, un submenú, aclarado.

Clases CSS antiguas en francés¶

Antes de que el plugin pasara al inglés, las clases de color llevaban nombres franceses: fond-couleur-…, texte-couleur-…, fond-opacite-….

Ajuste técnico

Modifícalo solo con el acuerdo del webmaster del sitio.

Deja la casilla marcada si algunas páginas de tu sitio todavía usan estas clases. La pantalla Herramientas > Migración de los colores del sitio lista todas las clases encontradas en las páginas.
Desmárcala en un sitio nuevo, o cuando todas las páginas hayan pasado a las clases en inglés: cada página del sitio será un poco más ligera.

Guardar¶

Reservado a los administradores. Haz clic en Guardar cambios en la parte inferior de la pantalla. El mensaje «Ajustes guardados.» confirma la operación.

Puede aparecer un mensaje de aviso en la parte superior de la pantalla:

Mensaje	Lo que ha pasado
«el nombre … está reservado por el plugin»	El nombre se ha sustituido por el número del espacio. Elige otro nombre.
«el nombre … ya lo usa el color …»	Dos espacios llevaban el mismo nombre: el segundo ha recibido su número en su lugar.
«… es también el slug de una categoría de entradas»	El nombre se acepta, pero puede entrar en conflicto con el color de esa categoría. Elige otro nombre.

En cuanto cambia un color, la caché del sitio se vacía automáticamente: los visitantes ven los nuevos colores en su próxima visita.

Preguntas frecuentes¶

He cambiado un color, pero el sitio no ha cambiado. Comprueba que has hecho clic en Guardar cambios y luego recarga la página del sitio con Ctrl + F5 (en Mac: Cmd + Mayús + R): tu navegador quizá conservaba la versión antigua.

Un bloque de una página ha perdido su color de fondo. Su clase CSS ya no corresponde a ningún color: espacio renombrado o vaciado, o clase antigua de actividad (las actividades ya no generan clases). La pantalla Herramientas > Migración de los colores del sitio localiza esas clases y las sustituye.

El color que busco no aparece en la lista de una actividad o de una página. El espacio no tiene color en la paleta. Rellénalo aquí y luego guarda.

No puedo modificar los colores. Es normal si eres editor: los colores forman parte de la identidad visual, y solo los administradores pueden cambiarlos. Siempre puedes copiar sus clases CSS con los botones Fondo y Texto.

¿Puedo añadir un undécimo color? No, la paleta siempre tiene diez espacios.

¿Puedo usar un color fuera de la paleta? Solo en dos casos: una página («Color de la página» > «Elegir otro color») y un evento («Color personalizado»). Resérvalo para las excepciones: estos colores no seguirán los cambios de la paleta.

Dónde se eligen estos colores¶

Pantalla	Ajuste
Una actividad	Color de la actividad en la agenda y en las páginas de curso y de evento
Un evento	Color de sustitución, solo si debe ser distinto del de la actividad
Una página	Color de la página, en el recuadro a la derecha de la pantalla de edición
Una categoría de entradas	Color de la categoría

Para la lógica de conjunto, consulta Los colores del sitio.