CSS personalizado
Usa el cuadro Custom CSS cuando los controles de diseño no lleguen tan lejos como necesitas.
Todos los tipos de cuenta regresiva terminan sus ajustes de diseño con un cuadro Custom CSS (Developer Zone). Todo lo que escribas ahí se aplica a esa cuenta regresiva en tu tienda online, por encima de lo que hayan establecido los controles visuales.
El cuadro Custom CSS, al final de los ajustes de diseño.
Cuándo resulta realmente útil
Sección titulada «Cuándo resulta realmente útil»- Posicionamiento preciso: ajustar los márgenes de una cuenta regresiva para que encaje bien en un tema con espaciado poco habitual.
- Ajustes adaptables: una media query para un punto de corte que los ajustes para móvil no cubren.
- Igualar un detalle del tema: un radio de borde o una sombra concretos que tu tema usa en todas partes y que los controles no pueden reproducir exactamente.
- Ocultar un elemento: quitar una parte de la cuenta regresiva que no puedes desactivar de otra forma.
Cómo escribirlo
Sección titulada «Cómo escribirlo»El cuadro admite CSS normal (selectores y reglas), sin la etiqueta <style>:
.samita-countdown { margin-top: 24px;}
@media (max-width: 749px) { .samita-countdown { margin-top: 12px; }}El contenedor de la cuenta regresiva lleva la clase samita-countdown, y cada cuenta regresiva mostrada recibe un ID construido a partir de su ID. Para apuntar a algo más concreto, inspecciona la cuenta regresiva mostrada con las herramientas para desarrolladores de tu navegador y usa las clases que encuentres ahí.
Limita su alcance
Sección titulada «Limita su alcance»El CSS de este cuadro no queda limitado automáticamente a la cuenta regresiva. Un selector como img { ... } afectará a todas las imágenes de la página.
Antepón siempre un prefijo a tus reglas para que solo lleguen a la cuenta regresiva:
/* Good — scoped */.samita-countdown img { border-radius: 4px; }
/* Risky — affects the whole page */img { border-radius: 4px; }Pruébalo en una página real
Sección titulada «Pruébalo en una página real»La vista previa del editor no reproduce tu tema, así que el CSS que alinea algo en la vista previa puede no alinearlo en tu página de producto. Guarda, abre una página real y compruébalo, tanto en ordenador como en el móvil.
Si prefieres no escribir CSS
Sección titulada «Si prefieres no escribir CSS»El equipo de soporte puede ayudarte con ajustes específicos del tema. La aplicación ofrece un botón Chat now! junto al cuadro Custom CSS, descrito como “Chat with us to customize countdown in your theme”. También puedes contactar con soporte con un enlace a la página y una descripción de lo que quieres cambiar.