Fehlende Bearbeitungs-Icons für Module und Menüs (Stand: Joomla 3.4.3)

In einigen nachinstallierten Joomla-Templates, die kein CSS von Bootstrap 2 laden, werden angemeldeten Administratoren die Bearbeitungs-Icons für Menüs und Module nicht angezeigt, obwohl sie "technisch gesehen" vorhanden sind, also das entsprechende JavaScript von Joomla geladen wurde. Man muss eigenes CSS nachreichen, um die Buttons zu erzwingen.

Problem: "Geht nicht!"

Im Backend gibt es unter System > Konfiguration > Tabulator "Site" > die Einstellung "Bearbeitungsicons für" bzw. "Inline-Bearbeitung". Damit wird es angemeldeten Administratoren möglich gemacht, im Frontend z.B. Module zu bearbeiten.

Joomla3-Konfiguration Modul- und Menübearbeitung im Frontend aktivieren. Die Einstellung heißt mittlerweile "Inline-Bearbeitung"
Joomla3-Konfiguration Modul- und Menübearbeitung im Frontend aktivieren. Die Einstellung heißt mittlerweile "Inline-Bearbeitung"

Verwendet man das joomla-3-eigene Protostar-Template, erscheint beim Überfahren des Bereichs eines Moduls ein Knopf, mit dem man die Bearbeitungsansicht öffnen kann. Leider ist dieses Feature abhängig von Bootstrap 2 sowie den speziellen Icon-Klassen für den Icon-Font Icomoon. So bleibt der Knopf bei vielen anderen Templates unsichtbar oder lässt sich nicht bedienen. Meist sind das recht alte Templates, aus Zeiten als es die "Inline-Bearbeitung" noch gar nicht gab.

Richtige Darstellung der Edit-Buttons, wenn BS-CSS geladen wurde
Richtige Darstellung der Edit-Buttons, wenn BS-CSS geladen wurde

Für die Funktionalität lädt die Seite die Dateien media/system/css/frontediting.css und media/system/js/frontediting.js, egal, welches Template man verwendet. Erstere enthält unter Umständen "zu wenig CSS-Regeln". Zweitere generiert die Knöpfe. Ein Override dieses JavaScripts ist nich so einfach bzw. mir "echt zu umständlich".

Lösung: Buttons per eigenem CSS nachrüsten/erzwingen

Mein persönliches Anliegen ist lediglich, dass man das Feature nutzen kann, das Aussehen ist mir ziemlich egal. Weiters will ich nicht bei jedem Template neu anfangen zu tüfteln und habe den Code so formuliert, dass er möglichst für alle Templates arbeitet.

Entsprechende Nacharbeiten bleiben also Ihnen selbst überlassen. Überflüssige Anweisungen kann man ja durch Ausprobieren selbst entfernen. Sind wohl einige drin; je nach eigenem Template mehr oder weniger.

/* Modul-Bearbeiten-Button */
body a.btn.jmodedit:before{
 content:"edit module";
 color:#fff !important;
 background-color:green !important;
 border: 1px solid black !important;
 padding:5px !important;
 font-size:20px !important;
 font-weight:bold !important;
}

/* Menü-Bearbeiten-Button */
body a.btn.jfedit-menu:before{
 content:"edit menu";
 color:#fff !important;
 background-color:green !important;
 border: 1px solid black !important;
 padding:5px !important;
 font-size:20px !important;
 font-weight:bold !important;
}

So oder so ähnlich sieht das Ergebnis dann aus:

Frontend-Inline-Bearbeitungs-Button für Module im eigenen CSS Stil
Frontend-Inline-Bearbeitungs-Button für Module im eigenen CSS Stil

Wenn mit diesem CSS ebenfalls nichts angezeigt wird, mit dem so genannten Inspektor im Browser das HTML prüfen, ob ein <a class="btn jmodedit"... bei Mouse-Over überhaupt dynamsich generiert wird (vor schließendem </body>). Wenn nicht, vermutlich ein Javascriptfehler im Template. Andere Baustelle! JS-Fehlerkonsole sichten.

Weiterer Lösungsvorschlag von Leser "Bier Marcel" (Danke!)

Per Email vom 19.11.2018

Hi, Ich habe dir noch ein Nachtrag zum oben erwähnten Betreff. Bei mir hat folgendes geholfen:

/* Modul-Bearbeiten-Button */
a.btn.jmodedit {
 background:#eee;
 /*border:1px solid red;*/
 padding:5px;
 z-index: 1001;
} 
a.btn.jmodedit span.icon-edit::before {
 content:"f044";
 font: normal normal normal 18px/1 FontAwesome !important;
 color: black;
}

Man muss jedoch beachten, dass in Zeile 10 der Icon-Font FontAwesome verwendet wird, den Joomla selbst nicht lädt, aber vielleicht ja das Template mitbringt..

Wo das CSS einsetzen?

Es gibt mehrere Möglichkeiten. Zum Beispiel:

  • Am Ende der Haupt-CSS-Datei, die Ihr Template mitbringt; oft template.css benannt.
  • Am Ende einer custom.css oder user.css, falls Ihr Template so was unterstützt/lädt.
  • Die Datei media/system/css/frontediting.css nach templates/IHRTEMPLATENAME/css/system/frontediting.css kopieren (den Ordner anlegen, falls nicht existiert) und dann in dieses so genannte Override den Code am Ende einkopieren.