7 minutos de lectura
5 comentarios

Insertar iconos en las categorías de los cursos de Moodle

Foto del autor

Tu Moodle tiene en la página principal esa larga lista de categorías con links sólo texto que aburre hasta las vacas: ¿quieres que sea más agradable para tu público?, pues sigue leyendo, ya que en esta guía te enseñaré como insertar iconos en las categorías de los cursos de Moodle.

Prepárate pues como siempre, lo haremos al pelo y sin plugins, tal como me gusta 😉.

Prerrequisitos

Para esta guía necesito que leas mi artículo (y lo apliques a tu Moodle) sobre Como integrar iconos Material design, ya que es la base que necesitas antes de continuar con esta.

Trabajaremos con los Material icons que le dará a nuestro Moodle un toque de diferenciación a los trillados Font Awesome.

Nota

Usaré el tema Clean como referencia, tal como he hecho hasta ahora en la serie Como instalar Moodle en tu PC. Trabajaré, asimismo en mi servidor local en Wampserver como te enseñé aquí.

Cree sólo cuatro categorías en el Moodle para esta guía, pero es aplicable a todas las que quieras.

Esta es la vista de nuestro Moodle antes de los cambios:

pantallazo inicial cambiar iconos en las categorías de los cursos de Moodle

Añadiendo CSS

Ve a la carpeta donde está instalado tu Moodle. En mi caso es D:\wamp64\www\moodleprueba, dentro está la carpeta theme, contiene todos los temas de Moodle.

Vamos a theme \clean\style. Allí está el archivo custom.css, que es el fichero de estilo del tema clean de Moodle.

Tip

Usa un editor de texto, como notepad de Windows para modificar los archivos css. Yo siempre recomiendo el Notepad++, es una de mis herramientas favoritas 😀.

Abre custom.css y agrega el siguiente código al final del archivo, no guardes todavía los cambios.

#frontpage-category-names, #frontpage-category-names .course_category_tree { 
    clear: both; 
    padding: 0px; 
}
.course_category_tree .category {
    position:relative;
    float:left;
    width:120px;
    height:120px;
    margin:5px;
    margin-right:10px;
    padding:0;
}
.course_category_tree .category.dimmed_category {
    border-color:#aaa;
}
.course_category_tree .category .info .name {
    padding:0;
    text-align:center;
}
.course_category_tree .category.with_children>.categoryname,.course_category_tree .category>.categoryname {
    background:none;
    padding-left:0px;
}
.course_category_tree .category .numberofcourse{
    background:#777;
    color:#fff;
    padding:5px 5px;
    border-radius:100px;
    position:relative;
    top:-140px;left:60%;
    font-family:"[[setting:headingfont]]",sans-serif;
    font-weight:normal;
    font-size:1em;
    -moz-box-shadow:1px 1px 5px 0px #ccc;
    -webkit-box-shadow:1px 1px 5px 0px #ccc;
    box-shadow:1px 1px 5px 0px #ccc;
    border:2px solid #fff;
}
.course_category_tree .category>.course_category_tree .category>.categoryname {
    background:transparent;
    border:0px none;
    text-align:center;
    box-shadow:none;
}
.course_category_tree .category.with_children>.categoryname a,.course_category_tree .category>.categoryname a {
    color:#444;
    padding-top:76px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:112px;
    font-size: 14px;
    text-decoration:none;
}
.dir-rtl .course_category_tree .category>.info .name {
    background:none;
}
.course_category_tree .category.with_children>.info .name {
    background:none;
}
.course_category_tree .category.with_children.collapsed>.info .name {
    background:none;
}
.dir-rtl .course_category_tree .category.with_children.collapsed>.info .name {
    background:none;
}
.course_category_tree .category[data-categoryid] {
    background:#fff;
    padding:0px !important;
    border:1px solid #e7e7e7;
    margin-bottom:10px;
    border-radius:5px;
    border-bottom:3px solid #eee;
}
.course_category_tree .category[data-categoryid]>.info>.categoryname a:hover {
    text-decoration:none;
}
.course_category_tree .category[data-categoryid]>.info>.categoryname a:before {
    font-family:'Material Icons';
    font-style:normal;
    font-weight:normal;
    text-decoration:inherit;
    font-size:80px;
    z-index:1;
    color:[[setting:themecolor]];
    position:absolute;
    top:30px;
    left:20px;
    height:55px;
    color: #C65F63;
    text-decoration:none;
}
.course_category_tree .category[data-categoryid]>.info>.categoryname a:hover:before {
    color: #f4696f;
}
.course_category_tree .category[data-categoryid="NUMERO DE CATEGORIA"]>.info>.categoryname a:before {
    content:'NOMBREICONO';
}
.course_category_tree .category .content 
    display:none;
}
.jsenabled .course_category_tree .controls {
    display:none;
}

Entendiendo el código

Para adaptar este código a tus necesidades debes modificar algunas porciones de acuerdo a las especificaciones de tu Moodle.

Developer tool

Nos apoyaremos en la Developer tool, tal como expliqué en este post. Está disponible en casi todos los navegadores apretando la tecla F12. Con ellas accederás al código de una página web, incluyendo las tuyas.

Como referencia usaré Firefox como navegador, aunque con Chrome la explicación es prácticamente la misma, sólo varían en algo la ubicación de los iconos de la Developer tool.

Haciendo los cambios

Presiona F12 en tu navegador, para que aparezca la herramienta. Haz clic en la flecha de la esquina izquierda, que marca: Elegir un elemento de la página.

Con la flecha seleccionada: haz clic al nombre de la categoría que quieras cambiar por un icono. Con esta acción el inspector de la herramienta nos mostrará el número de la categoría que debemos cambiar en el CSS que te puse arriba.

pantallazo buscar categoryid moodle

Anota el número que está después de: categoryid=. Lo mismo debes hacerlo con todas las categorías en tu Moodle que quieras sustituir con iconos.

La porción del código que debes cambiar es esta:

.course_category_tree .category[data-categoryid="NUMERO DE CATEGORIA"]>.info>.categoryname a:before {
    content:'NOMBREICONO';
}

Donde el NUMERO DE CATEGORÍA es el que anotaste en cada vinculo de las categorías. El NOMBREICONO es él que quieres mostrar en esa categoría, entre la variedad que tienen los Material icons, tal como te enseñé aquí.

Replica el código: uno debajo del otro dependiendo de cuantas categorías tengas en Moodle. Así quedaría el mío, con las cuatro categorías.

.course_category_tree .category[data-categoryid="1"]>.info>.categoryname a:before {
    content:'memory';
}
.course_category_tree .category[data-categoryid="2"]>.info>.categoryname a:before {
    content:'local_atm';
}
.course_category_tree .category[data-categoryid="3"]>.info>.categoryname a:before {
    content:'account_balance';
}
.course_category_tree .category[data-categoryid="4"]>.info>.categoryname a:before {
    content:'accessibility';
}

Dato

Mi recomendación es que cambies todas las categorías, es tu elección, pero si no lo haces quedará bastante descuadrado el diseño.

Una vez hayas cambiado y añadido lo necesario al CSS, guarda los cambios al custom.css para que veas como queda tu Moodle con iconos en las categorías.

Por si todavía tienes dudas, mi código final queda así:

#frontpage-category-names, #frontpage-category-names .course_category_tree { 
    clear: both; 
    padding: 0px; 
}
.course_category_tree .category {
    position:relative;
    float:left;
    width:120px;
    height:120px;
    margin:5px;
    margin-right:10px;
    padding:0;
}
.course_category_tree .category.dimmed_category {
    border-color:#aaa;
}
.course_category_tree .category .info .name {
    padding:0;
    text-align:center;
}
.course_category_tree .category.with_children>.info>.categoryname,.course_category_tree .category>.info>.categoryname {
    background:none;
    padding-left:0px;
}
.course_category_tree .category .numberofcourse{
    background:#777;
    color:#fff;
    padding:5px 5px;
    border-radius:100px;
    position:relative;
    top:-140px;left:60%;
    font-family:"[[setting:headingfont]]",sans-serif;
    font-weight:normal;
    font-size:1em;
    -moz-box-shadow:1px 1px 5px 0px #ccc;
    -webkit-box-shadow:1px 1px 5px 0px #ccc;
    box-shadow:1px 1px 5px 0px #ccc;
    border:2px solid #fff;
}
.course_category_tree .category>.info,.course_category_tree .category>.info>.categoryname {
    background:transparent;
    border:0px none;
    text-align:center;
    box-shadow:none;
}
.course_category_tree .category.with_children>.info>.categoryname a,.course_category_tree .category>.info>.categoryname a {
    color:#444;
    padding-top:76px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width:112px;
    font-size: 14px;
    text-decoration:none;
}
.dir-rtl .course_category_tree .category>.info .name {
    background:none;
}
.course_category_tree .category.with_children>.info .name {
    background:none;
}
.course_category_tree .category.with_children.collapsed>.info .name {
    background:none;
}
.dir-rtl .course_category_tree .category.with_children.collapsed>.info .name {
    background:none;
}
.course_category_tree .category[data-categoryid] {
    background:#fff;
    padding:0px !important;
    border:1px solid #e7e7e7;
    margin-bottom:10px;
    border-radius:5px;
    border-bottom:3px solid #eee;
}
.course_category_tree .category[data-categoryid]>.info>.categoryname a:hover {
    text-decoration:none;
}
.course_category_tree .category[data-categoryid]>.info>.categoryname a:before {
    font-family:'Material Icons';
    font-style:normal;
    font-weight:normal;
    text-decoration:inherit;
    font-size:80px;
    z-index:1;
    color:[[setting:themecolor]];
    position:absolute;
    top:30px;
    left:20px;
    height:55px;
    color: #C65F63;
    text-decoration:none;
}
.course_category_tree .category[data-categoryid]>.info>.categoryname a:hover:before {
    color: #f4696f;
}
.course_category_tree .category[data-categoryid="1"]>.info>.categoryname a:before {
    content:'memory';
}
.course_category_tree .category[data-categoryid="2"]>.info>.categoryname a:before {
    content:'local_atm';
}
.course_category_tree .category[data-categoryid="3"]>.info>.categoryname a:before {
    content:'account_balance';
}
.course_category_tree .category[data-categoryid="4"]>.info>.categoryname a:before {
    content:'accessibility';
}
.course_category_tree .category .content 
    display:none;
}
.jsenabled .course_category_tree .controls {
    display:none;
}

El resultado final debe verse como esto:

pantallazo resultado final cambiando iconos en las categorías de los cursos de Moodle

Es importante mencionar que me basé en este post de la comunidad de Moodle.org para este artículo. Recuerda que puedes adaptar los colores, disposición de iconos, tamaño del bloque, toqueteando un poco el CSS que te mostré.

Si tienes alguna duda, ya sabes dónde dejarlas. Muéstrame como ha quedado tu Moodle después de estos cambios.

Califica este artículo

Puntuación promedio 5 / 5. Votos: 1

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

Foto del autor
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

También te puede interesar

5 comentarios en «Insertar iconos en las categorías de los cursos de Moodle»

Deja un comentario
  1. Buenas tardes, una consulta, deseo colocar íconos en las categorías e íconos en los cursos en moodle 3.8 que ya esta en el internet, cuales serían los pasos, oexiste algún plugin que facilite este trabajo.
    De antemano muchas gracias

    Responder
    • Hola Luis.
      Donde pone NOMBREICONO pondríamos la url de la imagen, pero habría que hacer cambios varios al código css para adaptarlo.
      Esta anotado en mi calendario editorial para hacer un post sobre esto.
      Saludos.

      Responder
      • Hola, gracias por contestar.
        Modificando el código ya he logrado ponerle imágenes en lugar de los iconos y le agregue >span al final de .course_category_tree .category .numberofcourse por que me ponía el numero en otro lado, así que muchas gracias y estaré al pendiente de tus posts, Saludos

        Responder

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.