Cómo personalizar los colores del Widget de TuCalendi

Este tutorial explica cómo personalizar los colores del Widget de TuCalendi desde una plantilla de apariencia. Los colores determinan la identidad visual del widget y permiten adaptarlo a la imagen de marca de cada negocio.

Cuando se crea una nueva plantilla de apariencia, todos los campos de color se rellenan automáticamente con una configuración predefinida. A partir de ahí, es posible modificar cada color de forma independiente para conseguir el aspecto deseado.

El widget dispone de seis campos de color individuales y un campo adicional para el tema general:

Color primario. Color principal de la interfaz: botones, días y elementos destacados.
Color secundario. Color de apoyo para elementos secundarios.
Color principal del texto.
Color secundario del texto.
Color de resaltado. Utilizado para resaltar elementos del widget.
Color de fondo
Tema de color. Modo visual general: Auto, Claro u oscuro.

Antes de empezar

Para seguir este tutorial, debes acceder a la sección de Apariencia del widget y tener una plantilla de apariencia creada para editarla. El proceso completo de creación y asignación de plantillas se explica en el tutorial general sobre cómo crear y asignar una plantilla de apariencia del Widget.

Paso 1. Acceder a la apariencia del widget

Desde el menú lateral de TuCalendi, accede a la sección "Widgets" y selecciona la opción "Apariencia".

Paso 2. Crear o editar una plantilla de apariencia

Dentro de la sección "Apariencia", crea una nueva plantilla o edita una plantilla existente haciendo clic en "Editar".

Paso 3. Revisar la configuración predefinida de colores

Al crear una nueva plantilla, todos los campos de color se rellenan automáticamente con valores predefinidos. La siguiente captura muestra el aspecto del editor con la configuración de colores por defecto.

Paso 4. Personalizar los colores de la plantilla

Haz clic en cualquiera de los campos de color para abrirlo y seleccionar el valor deseado. Puedes modificar cada campo de forma independiente:

Color primario: afecta a los botones principales, los días seleccionados en el calendario y los elementos más destacados de la interfaz.
Color secundario: se aplica a los elementos de apoyo de la interfaz.
Color principal del texto: controla el color del texto principal visible en el widget.
Color secundario del texto: controla el color de los textos secundarios, como descripciones y etiquetas.
Color de resaltado: se utiliza para destacar elementos especiales, como avisos o acciones importantes.
Color de fondo: define el color del fondo del widget.
Tema de color: permite elegir entre Auto (el widget adapta su apariencia al modo claro u oscuro del sistema del usuario), Claro (siempre en modo claro) u Oscuro (siempre en modo oscuro).

La siguiente captura muestra el editor con los colores de TuCalendi aplicados como ejemplo de personalización.

Paso 5. Guardar los cambios

Después de configurar todos los colores deseados, haz clic en "Guardar" para aplicar los cambios en la plantilla de apariencia.

Paso 6. Comprobar la asignación de elementos

Una vez guardada la plantilla, comprueba que esté asignada al hub o encuesta con enrutamiento correspondiente. Si la plantilla no está asignada a ningún elemento, los cambios no se verán reflejados en ningún widget.

Paso 7. Comprobar el resultado en el widget

Una vez configurados los colores y guardado los cambios, el widget mostrará la nueva paleta en todas sus pantallas. La siguiente captura muestra cómo se refleja la personalización de colores en el widget visible para el usuario final.

Resumen del proceso

Para personalizar los colores del Widget, accede a la "Apariencia del Widget", crea o edita una plantilla y modifica los campos de color disponibles: Color primario, Color secundario, Color principal del texto, Color secundario del texto, Color de resaltado, Color de fondo y Tema de color. Al crear una nueva plantilla, todos los campos se rellenan con valores predefinidos que puedes modificar libremente. Haz clic en "Guardar", verifica que la plantilla esté asignada al hub o encuesta correspondiente y comprueba como se muestra el widget después de la personalización de los colores.