Preguntas frecuentes
arrow_back_ios
¿Puedo personalizar el diseño del widget para que se integre con mi sitio web?
En el panel de Diseño, selecciona el tema claro u oscuro para que coincida con el diseño de tu sitio web. Luego, elige un color de acento para los botones y los campos de formulario.
Si necesitas una personalización avanzada del diseño, puedes modificar la apariencia del widget usando CSS. Esto te permite cambiar las fuentes, colores y formas de cualquier elemento del widget. Se requiere conocimiento básico de HTML y CSS.
Los estilos del widget están estructurados según la metodología BEM. Cada elemento tiene su propia clase.
Para personalizar el diseño de un elemento específico, identifica su clase CSS. Puedes hacerlo fácilmente usando las herramientas de desarrollador de tu navegador. Por ejemplo, en Chrome, haz clic derecho sobre el elemento y selecciona Ver código.
Por ejemplo, la clase para el nombre del día en el calendario es day.
Ahora, vamos a escribir una regla CSS simple para cambiar el fondo, el color y la fuente:
.day {
background: #fdeedb;
font-weight: 700;
color: #8a5714;
}
background: #fdeedb;
font-weight: 700;
color: #8a5714;
}
Finalmente, abre la configuración del widget y ve al panel de Diseño. Marca la opción Estilo CSS personalizado y pega tu código CSS.
El resultado se verá así:
Si quieres agregar una fuente personalizada o un estilo externo usando la directiva @import de CSS, sigue estos pasos:
- Agrega tu declaración @import al principio de tu CSS personalizado. Por ejemplo:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); - Inserta el bloque [bukza_theme_styles] debajo de todas tus declaraciones @import.
- Agrega el resto de tu CSS para sobrescribir los estilos del tema según lo necesites.
El bloque [bukza_theme_styles] se reemplazará automáticamente por los estilos del tema. Si este bloque no está presente, los estilos del tema se aplicarán antes que tu CSS personalizado.
