Backend-Navigation mit eigenem Logo (Image)

“Ein Bild sagt mehr als tausend Worte” - wer kennst diesen Spruch nicht. Bilder prägen sich einfach besser ein, sind multilingual und man kann komplizierte Sachverhalte visualisieren. In der neuen Version von Magento ist dem ein oder anderen sicherlich in der Navigation bereits das PayPal-Logo aufgefallen. Das sticht einem sofort ins Auge und man wird sich beim nächsten einloggen ins Backend 100% an die Position des PayPal-Einstellungen erinnern. Wer dies mit seinen eigenen Extensions auch machen möchte, findet nachfolgend wie das funktioniert.

Wir werden, als Beispiel, das Menü für unsere unsere Extension jQuery-Base stylen, damit Sie auch gleich ein reales Projekt vor Augen haben.

Vorher:

Nachher:

Das Vorgehen ist wir folgt:

1. Bilde(r) für den Menüpunkt erstellen
2. CSS-Datei erstellen
3. Layout-XML für die Extension erstellen
4. Layout-XML über config.xml einbinden
5. CSS-Klasse in system.xml für Menüpunkt definieren

Bilde(r) für den Menüpunkt erstellen

Für unser neues Menü erstellen wir zwei unterschiedliche Bilder. Wenn sich der Benutzer mit der Maus über dem Münpunkt befindet, soll ein anderes Bild erscheinen (Hover-Effekt). Die Grafik kann eine belibeige Größe haben, die man über den CSS-Style definieren kann. Man sollte die Grafik aber so wählen, dass die Usabilty im Backend erhalten bleibt.

Die Bilder speichern wir in das Verzeichnis skin\adminhtml\base\default\css\jquerybase mit den Dateinamen jquerybase.jpg sowie jquerybase_hover.jpg. Für Magento kleiner 1.4 verwenden Sie anstatt base das Verzeichnis default.

CSS-Datei erstellen

Nun erstellen wir die CSS-Datei jquerybase.css und speichern Sie ins gleiche Verzeichnis wie die Bilder.

ul.tabs a.jquerybase span, ul.tabs a.jquerybase:hover span {
  background:url("jquerybase.jpg") no-repeat scroll 0 0 transparent;
  height:0;
  overflow:hidden;
  padding:14px 0 0;
  width:150px;
  height: 8px;
  margin-left:16px;
  margin-top:10px;
  padding-left:19px;
}

ul.tabs a.jquerybase:hover span {
  background:url("jquerybase_hover.jpg") no-repeat scroll 0 0 transparent;
}

Die Klasse jquerybase aus der CSS, werden wir später in der system.xml eintragen, damit Magento im Backend diese Klasse integriert. Sie sehen in der CSS die Hover-Defintion und ansonsten recht unspektakulären CSS-Code der selbterklärend ist.

Layout-XML für die Extension erstellen

Um die bereits erstellte CSS-Datei über eine Extension einbinden zu können muss eine eigens dafür vorgesehene Laayout-XML eingebunden werden. Für unsere Extension ist das die Datei app\design\adminhtml\default\default\layout\jquerybase.xml. Der Dateiname, in unserem Fall jquerybase.xml kann frei gewählt werden. In der config.xml wird dieser Dateiname auch angegeben, damit Magento unsere eigene layout.xml einliest.

<layout version="0.1.0">

  <default>
    <reference name="head">
      <action method="addItem">
        <type>skin_css</type>
        <name>css/jquerybase/jquerybase.css</name>
      </action>
     </reference>
  </default>
 </layout>

Layout-XML über config.xml einbinden

Als nächstes müssen wir Magento noch mitteilen, dass eine eigene Layout.xml eingelesen werden soll. Die Definition dafür befindet sich in in unserem Fall in der Datei app\code\local\Mxperts\Jquery\etc.

...
    <adminhtml>   

         <layout>
             <updates>
                 <jquery>
                     <file>jquerybase.xml</file>
                 </jquery>
             </updates>
         </layout>
...

CSS-Klasse in system.xml für Menüpunkt definieren

Magento muss im Backendmenü unsere eigen vorgesehen Klasse integrieren. Dies müssen wir in der system.xml angeben und wir sind dann auch schon mit unsere Anpassung fertig.

...
    <sections>
        <mxperts translate="label" module="mxperts">
            <label>jQuery</label>
            <class>jquerybase</class>
...