Acceso rápido:
Ruta de la imagen de Moodle
El CSS anterior incluye la especificación de dos imágenes de fondo (iconos) para nuestros nuevos botones. Hay un icono de lupa en el botón Descripción y el icono de Moodle en el botón de enlace al curso. Los archivos de imagen deben copiarse en el directorio /pix:
Es importante tener en cuenta que Moodle preprocesa los archivos CSS antes de servirlos al navegador. Esta es la razón por la que no especificamos una URL de imagen sino que utilizamos la referencia de imagen específica de Moodle. Por ejemplo, el icono de la lupa en el botón Descripción:
Imagen temática
Puede personalizar la página de su curso Moodle añadiendo una imagen de fondo o un banner. Si la página de su curso Moodle necesita un poco de color, añada una imagen de fondo a su página. La imagen de fondo puede representar un tema que ilustre el tema de su curso o ser el logotipo de la organización anfitriona o de un proyecto relacionado. Además de añadir una imagen, puede cambiar el color de fondo de la página de su curso.
Puede decidir si la imagen se mostrará en el banner de la parte superior de la pantalla (como en la imagen proporcionada) o como imagen de fondo. La imagen de fondo seleccionada también se mostrará como icono del curso en el escritorio.
Inicio de sesión en Moodle
Pero no tiene por qué serlo. Es muy fácil darle un aspecto profesional. Todo lo que necesitas es una imagen y un poco de HTML con estilos en línea para hacer que las descripciones de tus categorías tengan este aspecto:
Cualquiera con un editor de fotos y unos pocos clics de ratón puede hacer esto, ¿verdad? Por supuesto, pero esta técnica tiene la ventaja de que el texto es realmente texto, no una imagen de texto. Al tratarse de texto plano, un lector de pantalla puede leerlo y no se verá superpequeño en un dispositivo móvil. Esto también hace que cumpla con WCAG y otras directrices de accesibilidad.
<div style=»background-image: url(‘IMAGE-GOES-HERE’)!important; background: no-repeat right; -webkit-background-size: cover; background-size: cover; min-height: 150px; max-width: 1650px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 360px 0 50px 10px #fff; box-shadow: inset 360px 0 50px 10px #fff;»>
<div style=»background-image: url(‘https://yourmoodlesite/draftfile.php/5/user/draft/207905565/category-banner.jpg’)!important; background: no-repeat right; -webkit-background-size: cover; background-size: cover; min-height: 150px; max-width: 1650px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: inset 360px 0 50px 10px #fff; box-shadow: inset 360px 0 50px 10px #fff;»>