Documentación
Variables CSS, clases y trucos para encajar las vistas con tu tema.
Todo el CSS del plugin cuelga de la clase .fitfox, así que no pisa tu tema, y sus colores son variables CSS que puedes sobrescribir desde el tema o desde Apariencia → Personalizar → CSS adicional.
| Variable | Para qué | Por defecto |
|---|---|---|
--ff-acento | Color principal (botones, hoy, precios). | el de los ajustes |
--ff-radio | Redondeo de esquinas. | 14px |
--ff-texto | Color del texto. | #1f2430 |
--ff-tenue | Texto secundario. | #6b7280 |
--ff-fondo | Fondo del bloque. | transparent |
--ff-superficie | Fondo de tarjetas y celdas. | #ffffff |
--ff-suave | Fondos suaves (cabeceras, filas alternas). | #f5f6f8 |
--ff-borde | Bordes. | #e6e8ec |
--ff-sombra / --ff-sombra-alta | Sombras normal y al pasar el ratón. | — |
--ff-cols / --ff-cols-t / --ff-cols-m | Columnas en escritorio, tablet y móvil (catálogos). | 3 / 2 / 1 |
--ff-proporcion | Proporción de las imágenes. | 16/9 |
.fitfox--{vista}, por ejemplo .fitfox--calendario-horario..fitfox--familia-{familia}: calendario, actividades, ficha, bonos, entradas o boton..fitfox--tema-oscuro, .fitfox--estilo-plano, .fitfox--densidad-compacta, .fitfox--boton-pastilla…clase del shortcode.[fitfox vista="calendario-horario" fuentes="clases" clase="horario-portada"].horario-portada {
--ff-acento: #001635;
--ff-radio: 0px;
}Las vistas no miran el ancho de la pantalla sino el del hueco donde están: el plugin les pone el atributo data-ancho con xs, s, m o l. Por eso un calendario en una barra lateral se ve como en un móvil aunque estés en un ordenador. Si necesitas afinar, usa ese atributo en tus selectores.
Si tu tema da estilo a todos los button o a .entry-content h3, el plugin ya lo neutraliza con más especificidad. Si algo se sigue colando, escríbenos con la URL y lo ajustamos.