¿Hay una forma sencilla de ajustar los colores del calendario que se muestra en el plugin de calendario? Tenemos algunas quejas sobre la accesibilidad del esquema de colores gris claro sobre blanco.
No hay ninguna configuración que se pueda usar para ajustar los colores del calendario, pero los colores se pueden anular con un poco de CSS. No soy un experto en CSS, pero ¿es algo como esto lo que buscas?
El único cambio que he hecho es oscurecer el borde exterior y las líneas que se utilizan para dividir los días del calendario. Si ese es el tipo de cambio que buscas, puedo encontrar los selectores CSS correctos para ti. (El ajuste que hice en esa captura de pantalla se realizó simplemente a través de las herramientas CSS de mi navegador).
1 me gusta
¡Gracias! Eso sería una gran mejora. Me gustaría ayuda para encontrar los selectores correctos.
¡Genial! Necesitarás editar el archivo CSS del tema de tu sitio o agregar los cambios a un componente de tema e incluir ese componente en todos los temas de tu sitio. He utilizado el enfoque de componente de tema en mi sitio de prueba. Aquí hay un intento de mostrar ese proceso con capturas de pantalla:
Asegúrate de agregar el tema (o temas) de tu sitio a la entrada “Incluir componente en estos temas”.
Una vez que lo hayas hecho, haz clic en el botón “Editar CSS/HTML” y agrega lo siguiente a la pestaña CSS común del editor de temas:
.discourse-calendar-wrap {
border: 5px solid var(--primary);
}
.calendar.fc.fc-unthemed .fc-content,
.calendar.fc.fc-unthemed .fc-divider,
.calendar.fc.fc-unthemed .fc-list-heading td,
.calendar.fc.fc-unthemed .fc-list-view,
.calendar.fc.fc-unthemed .fc-popover,
.calendar.fc.fc-unthemed .fc-row,
.calendar.fc.fc-unthemed tbody,
.calendar.fc.fc-unthemed td,
.calendar.fc.fc-unthemed th,
.calendar.fc.fc-unthemed thead {
border-color: var(--primary);
}
Lo que hace ese cambio es establecer los colores del borde del calendario en el color “primario” de tu sitio, el mismo color que se usa para el texto del sitio. Al usar la variable --primary, el cambio funciona tanto con esquemas de colores claros como oscuros:
En lugar de usar var(--primary) para establecer el color, puedes codificar un color hexadecimal. Por ejemplo, #000000 para negro:
.discourse-calendar-wrap {
border: 5px solid #000000;
}
Avísame si ves algún efecto secundario indeseable de este cambio. Es posible que la segunda regla esté seleccionando algunos elementos que preferirías dejar con el color más claro anterior.
2 Me gusta
¡Genial! Muchas gracias. Lo intentaré mañana.
2 Me gusta