Hola, os voy a contar como he resuelto un "problema" que tenía con un proyecto en el que estoy trabajando.
En este caso tengo una plantilla basada en Bootstrap 5 (se llama YNEX), y como buena plantilla que es (es de pago, pero la recomiendo), los estilos los tiene definidos con variables.
Ya se que con pre-procesadores de css tipo SASS y demás se puede hacer, pero nunca han sido de mi gusto.
Lo que he hecho es crear un fichero llamado pre-custom.css con este contenido:
:root {
--primary-color: #0a8e3f !important;
--primary-color-hover: #0a8e3f !important;
--primary-color-focus: rgba(9, 125, 60, 0.5) !important;
--primary-color-active: #0a8e3f !important;
--primary-color-disabled: #097d3c !important;
--primary-rgb: 10, 142, 63 !important;
--primary-rgb-hover: 10, 142, 63 !important;
--primary-rgb-focus: 9, 125, 60 !important;
--primary-rgb-active: 10, 142, 63 !important;
--primary-rgb-disabled: 9, 125, 60 !important;
}
Este fichero hay que cargarlo antes que el CSS principal de la plantilla. Yo, en mi caso, lo cargo el primero de todos en el HTML (en mi caso plantilla Blade para Laravel).
De esta forma he re-definido el color de todos los elementos que usan primary-color de la plantilla.
Top comments (0)