Uso de Inspeccionar elemento (herramientas de desarrollo)

 
Para personalizar cada sección del Modern Events Calendar manualmente, puede usar las herramientas de desarrollo dentro de sus navegadores y luego colocar los códigos personalizados en el cuadro CSS personalizado en la configuración de MEC o su tema.

Escribir código CSS personalizado

Puede usar Inspect Element (herramientas de desarrollo integradas de su navegador) y cambiar cada sección por sí mismo:

Si desea realizar cambios en su diseño, puede utilizar Inspect Element (herramientas de desarrollo) para ver el código fuente de su sitio web y las reglas CSS que se le aplican.

Para acceder a ella, haga clic con el botón derecho y, en el menú emergente, seleccione Inspeccionar elemento (o Inspeccionar o Herramientas para desarrolladores).

Para obtener más detalles, puede visitar Elemento de inspección de Chrome o Elemento de inspección de Firefox. Mientras tanto, buscar en Google también será útil.

Por ejemplo, intentamos cambiar el color del borde gris inferior en un pie de página.

Aquí tienes algunos tutoriales de CSS que te ayudarán a escribir tus propios códigos CSS personalizados: w3schools | CSS Units

Consultas de medios para todos los dispositivos

Puede utilizar la "consulta de medios" para que su diseño responda mejor en dispositivos móviles y tabletas. Haga clic aquí o aquí para obtener más información sobre consultas de medios CSS.

Puede aplicar su CSS en un tamaño de pantalla personalizado usando el siguiente ejemplo:

@media only screen and (max-width: 480px) {
    /* PUT YOUR CSS CODE */
}

o usar entre dos tamaños de pantalla:

@media (max-width: 960px) and (min-width: 481px){
    /* PUT YOUR CSS CODE */
}

Nota: Si desea asegurarse de que todas sus personalizaciones se utilicen únicamente en la página de evento individual, debe usar clases de cuerpo como las siguientes (consulte la captura de pantalla a continuación):

single-mec-events

or

 mec-single-fluent-body