El CSS personalizado no se aplica en el reproductor de cursos

Solucionar paso a paso

1. Guarda el CSS y vuelve a cargar la página de la tienda

Después de editar el cuadro CSS personalizado, haz clic en Guardar en la barra de guardado. Alva Courses lee tu CSS cada vez que se carga el reproductor de cursos, así que no hay nada que publicar. Vuelve a cargar la página de la tienda: una página que ya estaba abierta no recoge el cambio por sí sola.

La Vista previa del storefront de esa pestaña muestra el estilo del menú móvil, nunca tu CSS personalizado.

2. Corrige los errores de sintaxis

Un mensaje en rojo bajo el cuadro, No se pudo analizar el CSS. Comprueba si hay errores de sintaxis. o uno que empieza por Es posible que el CSS contenga errores de sintaxis, suele significar que el navegador ha descartado algunas reglas. El CSS se guarda igualmente tal como lo escribiste, así que las reglas rotas llegan a tu tienda y no hacen nada.

Busca una llave de cierre que falte, que puede tragarse todas las reglas que vienen detrás, y elimina cualquier etiqueta <style>: el cuadro admite solo CSS. Liquid no funciona aquí, así que usa URL absolutas para los archivos de fuentes.

3. Comprueba que el selector coincide

En tu tienda, haz clic derecho en el elemento y elige Inspeccionar en tu navegador. Compara su ID y sus clases reales con tu selector; el enlace Guía de selectores CSS bajo el cuadro enumera los principales del reproductor.

Una regla que aparece tachada en el panel Estilos ha perdido frente a otra regla: consulta los pasos 4 y 5. Una regla que no aparece en absoluto no ha coincidido. Empiézala con #alva-courses y comprueba cada nombre de clase.

4. Refuerza las reglas dentro de @media y de los estados hover

Una regla que solo recibe la copia de la hoja de estilos debe superar a la hoja de estilos del reproductor. Termina cada declaración con !important y haz el selector más específico que la regla del reproductor que muestra Inspeccionar: por ejemplo, #alva-courses .lesson-content p en lugar de #alva-courses p.

Algunos estilos del reproductor se definen en el propio elemento con !important, y ninguna regla de hoja de estilos los supera. Saca esa regla de @media al nivel superior, donde se aplica la copia en línea. Las pantallas de los cuestionarios definen sus colores, tamaños de texto y espaciados en cada elemento con !important y se dibujan después de que se aplique la copia en línea, así que el CSS personalizado normalmente no puede cambiarlos. La Guía de selectores CSS también indica que no envuelvas las clases del menú móvil en @media.

5. Descarta el CSS de tu tema

El reproductor de cursos se ejecuta dentro de la página de tu tema, no en un marco aparte, así que las hojas de estilos de tu tema se cargan junto a él. Si Inspeccionar muestra que gana una regla del tema, haz tu selector más específico que el del tema.

6. Comprueba que tu CSS llega a esa página

El CSS personalizado solo llega a la lista de cursos de la tienda y a las páginas de curso, no a la página de perfil del alumno, a la página Mis cursos de las cuentas de cliente ni a los bloques de agradecimiento y estado del pedido.

Las ventanas emergentes, como la ventana de finalización del curso y el visor de imágenes, están fuera de #alva-courses, así que los selectores que empiezan por él no pueden alcanzarlas. Los vídeos incrustados de YouTube, Vimeo y Loom son marcos independientes: tu CSS puede ajustar el tamaño del marco, no lo que se reproduce dentro.

7. Carga la fuente que nombra tu CSS

Una regla font-family solo funciona si la fuente se carga. Alva Courses carga Montserrat y Poppins automáticamente cuando tu CSS las nombra; cualquier otra fuente solo se ve si tu tema o el dispositivo del alumno ya la tienen. Aplica la fuente a los elementos que quieras cambiar, no solo a #alva-courses: el reproductor da a cada elemento de su interior una fuente propia.

Para otra fuente web, pon una línea @import de Google Fonts al principio del todo del cuadro, o añade una regla @font-face con una URL absoluta de la fuente. Un @import situado debajo de cualquier otra regla se ignora.