Aplicar colores al frontend nativo de LearnPress con CSS
LearnPress tiene su propio estilo visual: badges, botones, íconos y barras de progreso. El problema es que estos elementos usaban el color rojo del Customizer que probamos antes. En esta lección vas a ver exactamente qué partes del LMS se colorearon con nuestra paleta y por qué el sitio ahora se ve coherente.
El problema que teníamos — y cómo se veía
Antes de esta lección, los elementos de LearnPress tenían colores mezclados: algunos rojos (del Customizer viejo), otros amarillos (el default de LP). Esto es lo que veías:
❌ Antes — Colores mezclados (rojo de Divi + colores de LP)
Botón rojo → color del Customizer viejo
El resultado después de aplicar los colores — lo que ves ahora
✅ Después — Paleta coherente con nuestras variables
Botón azul → nuestro --color-primary
¿Dónde está el código que hace esto?
wp-content/themes/divi-lms-child/assets/css/lms-styles.cssAl final del archivo — sección «BLOQUE 8 — COLORES LEARNPRESS FRONTEND»
No tenés que tocar este archivo para cambiar colores. Recódemos lo que aprendiste: solo cambiás las 4 variables en variables.css y todo — incluyendo estos elementos de LearnPress — se actualiza automáticamente.
Qué elemento cambia con qué variable
| Elemento de LearnPress | Variable que lo controla | Lo que ves |
|---|---|---|
| Badge «DESTACADO» | --color-primary |
DESTACADO |
| Botón «Continuar» / «Completar» | --color-primary |
Continuar |
| Íconos (reloj, estudiantes, lecciones) | --color-primary |
📄 👥 🕐 |
| «Leer más» (vista de lista) | --color-primary |
Leer más |
| Barra de progreso del curso | --color-primary |
|
| Links Anterior / Siguiente | --color-primary |
‹ Anterior Siguiente › |
| «Gratis» — se mantiene verde | --color-success |
Gratis ✓ |
El bug del botón ↑ multiplicado — y cómo se corrigió
Quizás notaste en la página del curso que aparecían muchas barras rojas con flechas ↑ en la barra lateral. Eso pasaba porque LearnPress navega entre lecciones sin recargar la página completa (usa AJAX), y el script del botón se activaba múltiples veces creando copias.
El botón aparecía muchas veces
Un solo botón en la esquina
🔧 La línea que solucionó el problema (en lms-scripts.js):
Esta «guardia» es como poner un letrero en la puerta: si ya entró alguien, la segunda vez ve el letrero y no entra. El script solo se inicia una vez.
Cómo funciona la cadena completa
⛓️ La cadena de colores completa
Vista previa completa — Página de cursos DESPUÉS
Vista previa — Página interna del curso DESPUÉS
🎉 ¡Módulo 3 completado! Resumen de la lección
- Los badges «DESTACADO» ahora usan
--color-primaryen vez del rojo viejo - Los botones «Continuar» y «Completar» respetan tu paleta de variables
- Los íconos (reloj, estudiantes, lecciones) se colorean con
--color-primary - «Gratis» permanece verde — ese color comunica algo importante
- El bug del botón ↑ multiplicado fue corregido con una guardia de inicialización
- Cambiar las 4 variables en
variables.cssactualiza todo: Divi + LearnPress
1. Andá a la página de Cursos en tu sitio → el badge «DESTACADO» debe ser azul
2. Hacé clic en el curso → el botón «Continuar» debe ser azul (no rojo)
3. Los íconos de información (reloj, estudiantes, etc.) deben ser azules
4. «Gratis» sigue verde ✓
5. Entrá a una lección del curso — el botón ↑ aparece una sola vez en la esquina inferior derecha (no duplicado)
6. Navegá entre lecciones («Anterior» / «Siguiente») — los links deben ser azules