Temas y Colores

Para qué sirve

Aquí se eligen los colores del sitio público: la cabecera, los botones, los títulos destacados, los subrayados y el fondo del pie de página. Puedes partir de un tema predefinido y, si quieres, ajustar cada color a mano.

Los colores del panel de administración no cambian: este módulo solo afecta al portal que ven los visitantes.

Cómo acceder

Menú lateral → Personalización → Temas y Colores (/admin/temas).

La pantalla tiene dos tarjetas, una al lado de la otra: los temas predefinidos a la izquierda y el editor de colores a la derecha.

Elegir un tema predefinido

Cada tarjeta muestra los colores de un tema y su nombre. El tema en uso lleva la etiqueta Activo.

1. Pulsa la tarjeta del tema que quieras.
2. Los ocho colores de abajo se rellenan con los de ese tema.
3. Pulsa Guardar tema.

Elegir un tema no lo guarda

Al pulsar una tarjeta solo se cargan sus colores en el formulario. Si sales de la página sin pulsar Guardar tema, el sitio público sigue con el tema anterior.

Personalizar los colores

En la tarjeta Personalizar colores hay una fila por cada color del tema, con su nombre y el código que usa el sitio. Cada fila tiene dos formas de cambiar ese color, y las dos hacen lo mismo:

• El recuadro de color, que abre el selector del navegador.
• El campo de texto, para escribir el código del color en formato #RRGGBB (almohadilla y seis caracteres, por ejemplo #0D1B3E). Si escribes algo con otro formato, el campo vuelve al color anterior.

En cuanto cambias un color, el tema pasa a llamarse Personalizado y ninguna tarjeta de arriba queda marcada como activa. Para terminar, pulsa Guardar tema: aparece «Tema guardado» en verde y el cambio se aplica al sitio público de inmediato (recarga la página del portal para verlo).

Campos del formulario

Campo	Obligatorio	Descripción
Color primario oscuro	Sí	El color base del sitio: nombre del instituto en la cabecera, títulos de sección, fondo de las portadas de página y de los botones principales. Es el color que más se ve.
Color primario medio	Sí	Variante del anterior para degradados y para el fondo de los botones principales al pasar el ratón.
Color primario claro	Sí	Variante clara del primario, para los degradados de las portadas de página y para los botones secundarios al pasar el ratón.
Color acento	Sí	El color que destaca: subrayados de títulos, íconos, botones de llamada a la acción y detalles de la portada.
Color acento claro	Sí	Variante del acento para degradados y para los elementos resaltados al pasar el ratón.
Fondo acento (muy claro)	Sí	Tono muy suave del acento, usado como fondo de tarjetas, íconos y etiquetas. Conviene que sea casi blanco.
Color secundario	Sí	Color de apoyo: enlaces dentro del texto, etiquetas informativas y algunos íconos.
Fondo del footer	Sí	Fondo del pie de página. Suele ser el color más oscuro de la paleta.

Todos los colores se guardan juntos al pulsar Guardar tema.

Cómo se ve en el sitio público

Página de inicio (/): el nombre del instituto y los textos destacados usan el color primario, y el acento aparece en el subrayado de la opción activa del menú, en el botón de Aula Virtual y en el botón de la portada.

Pie de página, con el color Fondo del footer:

Notas y buenas prácticas

• Empieza por un tema predefinido y cambia como mucho uno o dos colores. Las paletas ya están probadas y mantienen el texto legible.
• Cuida el contraste: el texto que va encima del color primario y del acento (botones, portadas de página, banda del menú) es blanco, así que los dos deben ser lo bastante oscuros para que se lea. Un acento amarillo claro o un primario casi blanco dejan ese texto ilegible.
• Revisa el portal después de guardar, sobre todo la página de inicio y una página de programa: son las que más combinaciones de color usan.
• Los colores no cambian el logo ni las imágenes. Si el nuevo tema desentona con el logo del instituto, sube una versión del logo que le acompañe desde General.
• Anota los códigos de los colores institucionales antes de cambiarlos: el panel no guarda un historial de temas anteriores.