Con el módulo Toolbar Menu podremos añadir menús personalizados a la barra de Drupal que se encuentra en la parte superior de la interfaz de administración. Además este módulo es totalmente compatible con el módulo Admin Toolbar , lo que significa que los menús creados con este módulo tendrán el mismo comportamiento que los menús de administración.
Tras su instalación, el primer paso es la creación del menú personalizado que queramos incluir en la barra de Drupal, acción que realizaremos en Estructura > Menús. En el ejemplo que nosotros hemos preparado, el menú creado se llama Edición, ya que lo vamos a utilizar para gestionar los procesos de edición de contenidos en un sitio multiusuario. Una vez creado el menú y sus enlaces accederemos a la configuración del módulo a través de Configuración > Toolbar Menú > Toolbar Menú Settings y seleccionaremos el menú que hemos creado para que aparezca en la barra de Drupal.
Como podemos observar en la imagen anterior, en cuanto seleccionamos el menú a mostrar y guardamos los cambios, ya nos aparece este nuevo menú en la barra de Drupal. Destaca este nuevo menú porque no tiene ningún icono personalizado a diferencia del resto. Sin embargo, también podemos añadirle un icono al menú de una manera sencilla con CCS. Primeramente deberemos subir al servidor el icono que queramos emplear en un tamaño de 16x16 px. Posteriormente accederemos a la hoja de estilos de nuestro tema y añadiremos el siguiente código:
.toolbar-icon-toolbar-menu-edicion::before {
background-image: url (/ruta_a_nuestro_icono)
}
En el selector de clase cambiaremos la parte del texto que pone "edicion", ya que se corresponde con el nombre de nuestro menú, para poner el nombre de vuestro menú personalizado. Con el pseudoelemento ::before lo que hacemos es insertar el icono antes del enlace al menú. Mediante el empleo del pseudoelemento ::before y la propiedad background-image podremos insertar también diferentes iconos para cada uno de los items del menú con el que estemos trabajando. Sólo deberemos saber, empleando para ello la herramientas de inspección del navegador que estemos utilizando, el selector de clase correspondiente para cada uno de ellos.
Añadir nuevo comentario