Het menu in Joomla! Administrator console kan je standaard niet aanpassen aan jouw persoonlijke smaak. Toch kunnen we daar extra linken ter beschikking stellen van de gebruikers.
Het principe is eigenlijk eenvoudig maar je moet er maar op komen.

Mindert Aardema heeft het in zijn geliefde medium, een video, uitgelegd hoe je dit kan doen: je brengt de gewenste menu-items als linken aan in een module die je dan in de console positioneert. Hieronder beschrijven wij ook stap per stap hoe je er toe komt, maar wij werken het veel verder uit en tonen enkele leuke varianten.

1. Creëren van de module

Onder Modulebeheer zet je de Filter op Web Beheergedeelte omdat we een module voor de backoffice gaan aanmaken.
Creëer daar een nieuwe Module van het type "Aangepaste HTML". Je geeft de module een titel maar zet "Toon titel" = "Verberg" (al was het maar om plaats te sparen.
In de tekstverwerker zet je de linken en bijhorende titels voor de nieuwe menu-items.
De Positie zet je op "Controlepaneel [cpanel]".
Bewaar dit en bekijk dan het resultaat in het controlepaneel, verifieer of de linken wel degelijk werken en of de plaats (de "Volgorde" van de module) goed is.
Eenmaal de basis van deze module goed zit, gaan we ze verfraaien met iconen.

2. Verfraaien van de links

Welke icooontjes zijn er beschikbaar?
Sinds joomla! 3 is Bootstrap 2.3 in het CMS geïntegreerd en kan je dus daarvan de Glyphicons gebruiken. Web ontwikkelaar Kyle Ledbetter is zo vriendelijk geweest een handig ovezicht te maken dat geldig is voor deze Joomla-versie: http://kyleledbetter.com/jui/icons/ . De Bootstrap documentatie vind je op http://getbootstrap.com/2.3.2/base-css.html#icons.
Dezelfde iconen vind je terug in volgende bestanden:
..\media\jui\img\glyphicons-halflings.png
..\media\jui\img\glyphicons-halflings-white.png

Je zet de naam van de gekozen icon in een icon-class zoals:

<i class="icon-search"></i>

of via een span:

<span aria-hidden="true" class="icon-search"></span>

Weet dat er ook een witte variant beschikbaar is. Daarvoor moet je de class "icon-white" er extra bij voegen:

<i class="icon-search icon-white"></i>

Als codevoorbeeld zien we hieronder 2 linken: één die verwijst naar JEvents om kalender-evenementen te creëren, en de tweede gaat naar het Joomla!component voor de lisjt van termen waarnaar surfers gezocht hebben op de site.
De linken zien in HTML-code er als volgt uit:

<a href="/component/jevents/?amp;task=icalevent.list" target="_self">Kalender-events</span></a>&nbsp;&nbsp;
<a href="/component/search/?amp;filter_results=1" target="_self">Zoektermen op de site</span></a>&nbsp;&nbsp;

De &nbsp; geven ruimte tussen de titels (die horizontaal op 1 lijn in de module komen).
Nu plaats je voor de titel van elke link de gepaste span- of icon-class toe:

<span class="icon-calendar-2"></span>

of

<i class="icon-calendar-2"></i>

(Bij deze laatste zal je zien dat JCE de tag <i> vervangt door <em>. Het eindresultaat ziet er hetzelfde uit.)
Probeer het eerst met 1 menu-titel, het zou namelijk kunnen dat je tekstverwerker de HTML-code opkuist. Indien dit het geval is, ga dan de configuratie (van je tekstverwerker) na opdat de extra ingebrachte html-code toch aanvaard wordt.
Het resultaat oogt alvast veel aantrekkelijker:
ControlePanel eigen menu horizontaal

3. Aan de linkerkant ermee!

Wil je deze linken aan de linkerkant net boven de andere snelkoppelingen, dan moet je de module op Positie icon zetten. Bemerk wel dat je de andere menu-opties van de linkerkant naar beneden schuift en dus de gebruiker misschien vaker dwingt om te scrollen op de pagina.
Om de linken elk op een lijn te plaatsen, zet je ze in een ongenummerde lijst. Mocht je ze in een paragraaf zetten dan bekom je niet de juiste zij-afstand. Bemerk ook dat de linken nog in het blauw staan terwijl de standaard-linken eronder in het zwart staan.

ControlePanel eigen menu links

Boven de <ul> gaan we <div> met aangepaste class zetten:

<div class="sidebar-nav quick-icons">
<div class="j-links-groups">

en uiteraard sluiten we die <div>tags af vlak nu de </ul>tag.

   ControlePanel EigenMenu links 2

Vind je toch dat het standaard-linkermenu te veel naar beneden gedrukt wordt, en/of wil je veel extra menu's, dan kan je ervoor kiezen om de eigen menu's in een dropdown te zetten.
Net zoals hiervoor moeten alle linken geplaatst zijn in een unordered list. Aan de lijst wijzen we een dropdown-menu class toe en we gaan ook de dropdown met Bootstrap elementen definiëren met volgende code in het begin dus tot aan de <ul>tag:

    <div class="btn-group">
      <a class="btn btn-inverse" href="#">
    <i class="icon-wand icon-white"></i> Snelkoppelingen</a>
      <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
      <ul class="dropdown-menu">

Ik heb hier gekozen voor een zwarte knop "btn-inverse", in de Bootstrap documentatie kan je de andere varianten vinden. Voor het aldaar geplaatste icoon neem ik nu de witte variant door de extra class "icon-white". ControlePanel EigenMenu knop
Het resultaat in het controlepaneel zie je hierboven; hieronder na het klikken op de dropdownknop:

ControlePanel EigenMenu knop open

Wil je in je opsommingslijstje een horizontale streep om de lijst indelen te splitsen, voeg dan volgend lijst-item toe:

        <li class="divider"></li>

Voilà, je backoffice gebruikers moeten nu enkele kliks minder doen en jij hebt kennis gemaakt met enkele Bootstrap elementen (die allicht nog op andere plaatsen van pas kunnen komen).


Auteur: Manu Ampe

Bronnen en documentatie:

De 140 Glyphicons die in Joomla! 3.* beschikbaar zijn met hun naam:

Bootstrap 140 Glyphicons