Tag 7 - Praktische Quick Links im Dashboard einbauen

Simone Rindlisbacher

Das Dashboard in Joomla kann aufgrund der vielen Informationen etwas überwältigend wirken.

Oft erfordert es zudem mehrere Klicks, um die gewünschte Funktion zu erreichen oder nur die Informationen anzuzeigen, die man benötigt. Wenn zusätzlich Erweiterungen oder ein Template Builder zum Einsatz kommen, wird es auch nicht gerade einfacher.

Abhilfe bietet ein maßgeschneidertes Dashboard-Modul mit Direkt-Links. Bei Bedarf können hier auch Informationen und Anleitungen für andere Benutzer hinterlegt werden.

Das könnte zum Beispiel so aussehen:

Beispiele für Quick Links:

Alle Beiträge
Beiträge einer bestimmten Kategorie
Beiträge einer bestimmten Kategorie und einer bestimmten Ebene
ein bestimmtes Menü und ev. eine bestimmte Ebene
Medien
ein bestimmtes Verzeichnis in den Medien
Module auf einer bestimmten Position
JCE Media Manager (z.B. um Bilder zu verkleinern beim Hochladen)
Komponenten wie z.B. Shops oder Events
YOOtheme Builder
Backup erstellen

Los geht’s!

Ein Dashboard-Modul einbauen

Du erstellst neues Modul, indem du im Dashboard unten auf „Modul zum Dashboard hinzufügen“ klickst…

Screenshot neues Modul zum Dashboard hinzufügen

...oder via System → Administrator Module → Neu ein Administrator Modul erstellst
Wähle den Modultyp „Eigenes Modul“ aus
Nun vergibst du einen schlauen Titel
Bei der Position wählst du „Schnellstartsymbole [Icon]“.
So kannst du das Modul ganz oben platzieren.
Optional: Um das Modul später zu stylen, gibst du unter Erweitert im Feld „CSS-Klasse Modul“ einen Stil ein (in diesem Beispiel „infokasten“)
Speichern & Schliessen
Setze das neue Modul in der Liste der [icon]-Module an die erste Stelle

Zurück im Dashboard kannst du kontrollieren, ob das Modul angezeigt wird und an der richtigen Stelle steht.

Links und Informationen einfügen

Im neuen Modul klickst du auf die Zahnräder oben rechts und wählst „Bearbeiten“ aus.
Im Editor kannst du nun die Links und Informationen frei eingeben.

Beispiele für praktische Links:

Zeig mir...

alle Beiträge der Kategorie 1

index.php?option=com_content&filter[category_id]=1

alle Beiträge der Kategorie 2, aber nur die erste Ebene

index.php?option=com_content&filter[category_id]=2&filter[level]=1

ein bestimmtes Menü, aber nur die erste Ebene

index.php?option=com_menus&view=items&menutype=xyz&filter[level]=1

alle Module auf der Position xyz

index.php?option=com_modules&view=modules&filter[position]=xyz

die Startseite der Medien

index.php?option=com_media&path=local-images:/

das Medienverzeichnis „galerie“

index.php?option=com_media&path=local-images:/galerie

den JCE Media Manager
```
index.php?option=com_jce&view=browser
```

Shop Beispiele: Dashboard / Produkte / Bestellungen

index.php?option=com_j2store

index.php?option=com_j2store&view=products

index.php?option=com_j2store&view=orders

index.php?option=com_hikashop

index.php?option=com_hikashop&ctrl=product

index.php?option=com_hikashop&ctrl=order

Veranstaltungen Beispiel: Dashboard / Veranstaltungen / Anmeldungen

index.php?option=com_eventbooking&view=dashboard

index.php?option=com_eventbooking&view=events

index.php?option=com_eventbooking&view=registrants

YOOtheme Builder (hier Template Stil 10)

index.php?option=com_ajax&p=customizer&templateStyle=10&format=html

Akeeba Backup

index.php?option=com_akeebabackup&view=Backup

Das sieht schon einigermaßen gut aus, wirkt aber noch etwas eintönig.

Icons hinzufügen

Icons vor den Links sind nicht nur einfach hübsch. Sie verbessern die Übersichtlichkeit, wodurch die Bedienung für die Nutzer einfacher wird.

In diesem Beispiel werden die freien (kostenlosen) Icons von Font Awsome eingesetzt. Eine Übersicht über die vorhandenen, kostenfreien Icons findest du hier: https://fontawesome.com/v5/search?o=r&m=free

Die Icons werden im HTML-Quellcode mit einem i-Element eingebunden. Die Klassen ergeben sich aus dem CSS-Präfix „fa“ und dem jeweiligen Icon-Namen:

<i class="fa fa-xyz"></i>

Beispiel:

<p><i class="fa fa-pencil"></i> <a href="/wissen/joomla-tipps-im-advent/2024?filter[category_id]=1">Blog</a></p>

Schon besser, aber wirklich zufriedenstellend ist es noch nicht. Das Modul soll stärker hervortreten und sich klar vom Rest des Dashboards abheben. Deshalb:

Mache schön!

Um unser Modul zu stylen ist eine user.css für das Administrator Template erforderlich.
Diese muss im folgenden Verzeichnis abgelegt werden: media/templates/administrator/atum/css/

Du kannst eine vorbereitete CSS-Datei per FTP oder im Backend* hochladen, oder du kannst dir deine user.css direkt im Joomla Backend erstellen:

Klicke dafür im System > Administrator Templates auf „Atum – Details und Dateien“
Klicke oben auf den Button „Neue Datei"
Klicke in der Struktur in der linken Spalte auf den Ordner „css“
(unter media/templates/administrator/atum/)
Gib im Feld Dateiname „user“ ein
Wähle bei Dateityp „.css“ aus

* Wenn du deine user.css bereits erstellt hast, kannst du sie hier hochladen.

Jetzt kannst du deine CSS-Regeln einfügen.
Den Stil „infokasten“ haben wir bereits bei der Erstellung des Moduls definiert.

Da sich die Stile in Joomla 4 und Joomla 5 unterscheiden, folgen hier zwei einfache Beispiele:

Joomla 5:

.card.mb-3.infokasten .card-body {background-color: #f1f7f1;}
.card.mb-3.infokasten h1 {font-size: 20px; font-weight: 700;color: #cc0000;}

Joomla 4:

.infokasten {background-color: #f1f7f1;}
.infokasten h1 {font-size: 20px; font-weight: 700;color: #cc0000;}

Speichere das Ganze und kehre zurück ins Dashboard.

Voilà, das sieht doch ganz hübsch aus!

Screenshot fertiges Dashboard Modul mit Icons und CSS