Personalizar el diseño (CSS)

El configurador debe parecerse a su tienda: colores, fuente, esquinas, el aspecto de los campos de selección. Todo esto se adapta con CSS, sin nada de JavaScript. Esta página se aplica al motor de frontend V3. Legacy genera otro HTML, por lo que allí no funcionan las variables y clases que se describen a continuación.

Lo que el configurador ya toma de la tienda

En una tienda –a través de un plugin de tienda o del fragmento HTML– el configurador toma de su tema la fuente, el tamaño de fuente y el color del texto. Para ello no tiene que hacer nada. Solo tiene que adaptar lo que el configurador trae consigo: color de acento, bordes, fondos, esquinas.

Si lo integra con data-configento-embed-mode="admin-preview", muestra él mismo el título, el precio y el resumen y también usa sus propios colores para los textos. Incluso entonces hereda la fuente de la página.

Dónde va su CSS

Tiene dos lugares:

• El tema de su tienda: lo adecuado si todos los configuradores deben tener el mismo aspecto.
• CSS personalizado en la Configuración del componente, en Diseño: lo adecuado para un solo componente. Se carga con el configurador, en la tienda y en la vista previa del admin.

Escriba [data-configento] delante de las reglas para elementos individuales, p. ej. [data-configento] .cfg-toggle-item__price. El configurador carga su propio CSS después de su tema; con este prefijo, su regla prevalece de todos modos. Para las variables de abajo no hace falta.

Colores, fuente y esquinas

La adaptación más sencilla: definir variables en :root. Actúan en todo el configurador y también en la vista ampliada de imágenes y en las ventanas de información, que se abren fuera del configurador.

:root {
  --configento-color-accent: #1d3c78;
  --configento-color-border: #c8d0e0;
  --configento-radius-md: 0;
}

Los nombres de estas variables se mantienen iguales en todas las versiones 3.x.

Color activo: si en la configuración del componente, en Diseño, hay un Color activo definido, este se aplica a ese componente en lugar de --configento-color-accent. Deje el campo vacío si el color debe venir de su CSS.

Otra fuente: si el configurador debe usar una fuente distinta de la de la página, defínala en el elemento con data-configento. La fuente debe estar cargada en la página, por ejemplo a través de su tema.

[data-configento] { font-family: 'Source Sans 3', sans-serif; }

Diseñar elementos individuales

Para ir más allá de las variables existen clases y atributos que garantizamos: se mantienen iguales en todas las versiones 3.x y solo cambian con una nueva primera cifra de versión. Las demás clases y el resto de la estructura HTML pueden cambiar.

Marco de cada característica

Botones de radio y casillas de verificación

Al estado seleccionado se accede a través del input, p. ej. .cfg-toggle-item__label:has(input:checked).

Campos de entrada y listas de selección

Si el CSS no basta porque una característica debe tener un aspecto y un comportamiento totalmente distintos (por ejemplo, como una matrícula), dibújela en JavaScript con una representación propia.

La forma más sencilla de dirigirse a una característica concreta es una clase propia: introdúzcala en el editor, en el campo Clase CSS de la característica, y aparecerá en el elemento .cfg-char.

Ejemplos

Botones de radio propios: círculo con CSS en lugar del estándar del navegador y fila elegida resaltada:

[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--configento-color-accent);
  border-radius: 50%;
}
[data-configento] [data-configento-char-type="radiobuttons"] .cfg-toggle-item__label > input:checked {
  background: radial-gradient(var(--configento-color-accent) 45%, transparent 50%);
}
[data-configento] .cfg-toggle-item__label:has(input:checked) {
  background: var(--configento-color-accent-soft);
}

Para ello, defina --configento-color-accent y --configento-color-accent-soft en :root, como se muestra arriba.

Mostrar los errores con más claridad:

[data-configento] .cfg-char[data-configento-invalid] .cfg-char__title { color: var(--configento-color-error); }
[data-configento] .cfg-char[data-configento-invalid] .cfg-input { border-color: var(--configento-color-error); }

Ocultar los recargos, por ejemplo si su tienda los muestra de otra forma:

[data-configento] .cfg-toggle-item__price { display: none; }

Solución de problemas

Próximos pasos

• Configuración del componente: Color activo y CSS personalizado
• Integración fragmento HTML
• Interfaz JavaScript (V3): si quiere intervenir más allá del aspecto
• Motor de frontend: Legacy o V3