Módulo Toolbar Menu para Drupal 8: crear y organizar elementos en el menú de Drupal

Enviado por Daniel Muñoz Egido el Mar, 18/04/2017 - 07:00
módulo de drupal "toolbar menu"

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.

 

toolbar menu settings

 

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

Documentación Hoy le informa que los datos facilitados por usted en este formulario serán tratados informáticamente por Documentación Hoy con el objetivo de publicar su comentario a este contenido. Para poder llevar a cabo esta acción necesitamos su consentimiento explícito. Los datos proporcionados se conservarán mientras no solicite el cese de la actividad. Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal. En cualquier momento usted puede ejercitar su derecho a acceder, rectificar, limitar o borrar sus datos enviándonos un e-mail a info@documentacionhoy.com. Usted puede encontrar más información en nuestra Política de Privacidad.