Viele kennen ja Joomla, das beliebteste Content Management System (CMS) zum Erstellen von eigenen Webseiten. Vielleicht geht es vielen so wie mir? Ich habe mir nach einiger Zeit gedacht, dass es doch toll wäre, wenn der Adminbereich auch ein wenig aussehen würde wie die Webseite.
Gesagt getan, nun möchte ich euch also zeigen, wie ihr das sogenannte Admin-Template "Isis" anpassen könnt.
Hilfreich ist für Anpassungen immer das Firefox-Addon "Firebug" 
Es erleichtert ungemein das auffinden von Dateien und Zeilen, in denen Code verändert werden muss. Auch kann man live an der Seite Code verändern, um zu sehen, was welche Auswirkungen hat.
Hier mal zur Ansicht mein Ergebnis der Anpassungen:
Geht mit einem FTP-Programm eurer Wahl (ich bevorzuge unter Mac OS X Cyberduck) in den Pfad: /administrator/templates/
Dort kopiert ihr euch den Ordner "isis" lokal auf den Computer. (Am Besten noch den Ordner isis duplizieren, damit ihr immer eine Sicherheitskopie habt, fals etwas schief geht.
Als erstes passen wir die Anmeldeseite an. Das Logo von Joomla ist im Templateordner isis unter images zu finden und heißt joomla.png. Das neue eigene Logo muss also denselben Namen haben. Die Breite des Logos sollte 256 Pixel nicht überschreiten, die Höhe darf variieren.
Um die Hintergrundfarbe der Anmeldeseite anzupassen, müssen wir die template.css, zu finden im Templateordner isis unter css, bearbeiten. Dies machen wir am Besten mit einem Editor, wie TextWrangler oder Editra (Mac OS X) oder Notepad++ (Windows)
Wir öffnen also die template.css und gehen zur Zeile 6655. Dort steht folgendes:
.view-login {
padding-top: 0;
background-color: #527988;
background-image: -webkit-gradient(radial,center center,0,center center,460,from(#D6EAF1),to(#527988));
background-image: -webkit-radial-gradient(circle,#D6EAF1,#527988);
background-image: -moz-radial-gradient(circle,#D6EAF1,#527988);
background-image: -o-radial-gradient(circle,#D6EAF1,#527988);
background-repeat: no-repeat;
}Hier könnt ihr nun mit HEX-Codes die Farbe beliebig anpassen. Die jeweiligen Zeilen "background-image" stellen Angaben für die verschiedenen Browser dar. Angepasst werden muss also jede der Zeilen. Die Angabe von 2 HEX-Codes pro Zeile ergibt einen Farbverlauf. Hier kann man also gucken, wie die Seite am Besten dargestellt wird.
Um die Hintergrundfarbe des Loginfeldes anzupassen, gehen wir in der template.css in die Zeile 2116. Hier steht folgendes:
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}Hier muss im Grunde nur die Zeile "background-color" angepasst werden.
Zu Beachten hier ist, das durch die Anpassung der Hintergrundfarbe hier auch die Tabellendarstellung innerhalb des Adminbereiches farblich verändert wird.
Natürlich kann man auch noch den Anmelde-Button farblich anpassen. Dies geschieht in der template.css in Zeile 2336. Hier steht folgendes:
.btn-primary {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #1d6cb0;
background-image: -moz-linear-gradient(top,#2384d3,#15497c);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#2384d3),to(#15497c));
background-image: -webkit-linear-gradient(top,#2384d3,#15497c);
background-image: -o-linear-gradient(top,#2384d3,#15497c);
background-image: linear-gradient(to bottom,#2384d3,#15497c);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2384d3', endColorstr='#ff15497c', GradientType=0);
border-color: #15497c #15497c #0a223b;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
*background-color: #15497c;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
Nachdem wir nun die Login-Seite erfolgreich angepasst haben, geht's nun weiter zur Anpassung des restlichen Adminbereiches nach der Anmeldung. Wie bereits in Schritt 4 erwähnt, sieht man nach dem Anmelden nun, das die Veränderung in Zeile 2116 auch im Adminbereich Auswirkungen zeigt. Aber das nur am Rande.
Wir machen nun weiter mit dem Logo oben links. Wenn ihr auch dieses Logo durch ein eigenes ersetzen wollt, dann müsst ihr im Ordner images die Datei logo.png austauschen. Die Maße 143 x 30 Pixel solltet ihr hierbei beachten.
Um noch die Hintergrundfarbe hinter dem Logo und dem Schriftzug "Kontrollzentrum" anzupassen, müssen wir in der template.css in die Zeile 6741 gehen. Hier sehen wir folgendes:
.header {
background-color: #184a7d;
background-image: -moz-linear-gradient(top,#17568c,#1a3867);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#17568c),to(#1a3867));
background-image: -webkit-linear-gradient(top,#17568c,#1a3867);
background-image: -o-linear-gradient(top,#17568c,#1a3867);
background-image: linear-gradient(to bottom,#17568c,#1a3867);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff17568c', endColorstr='#ff1a3867', GradientType=0);
border-top: 1px solid rgba(255,255,255,0.2);
padding: 5px;
}
Um die oberste Menüleiste farblich anzupassen, gehen wir in der template.css in die Zeile 3555. Dort steht folgendes:
.navbar-inverse .navbar-inner {
background-color: #13294a;
background-image: -moz-linear-gradient(top,#152d53,#10223e);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#152d53),to(#10223e));
background-image: -webkit-linear-gradient(top,#152d53,#10223e);
background-image: -o-linear-gradient(top,#152d53,#10223e);
background-image: linear-gradient(to bottom,#152d53,#10223e);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff142c52', endColorstr='#ff0f213e', GradientType=0);
border-color: #0b172a;
}Um auch noch die Farben beim Überfahren der einzelnen Menüpunkte anzupassen, müssen wir ab der Zeile 3590 folgendes anpassen:
.navbar-inverse .nav .active > a:focus {
color: #fff;
background-color: #10223e;
}
Die Farbe der Untermenüpunkte beim MouseOver kann in Zeile 1985 in der template.css angepasst werden:
.dropdown-submenu:focus > a {
text-decoration: none;
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top,#08c,#0077b3);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
background-image: -webkit-linear-gradient(top,#08c,#0077b3);
background-image: -o-linear-gradient(top,#08c,#0077b3);
background-image: linear-gradient(to bottom,#08c,#0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0076b2', GradientType=0);
}
Um die Farbe der Links anzupassen, geht man in der template.css in die Zeile 197 bis 205. Hier findet man folgendes:
a {
color: #08c;
text-decoration: none;
}
a:hover,
a:focus {
color: #005580;
text-decoration: underline;
}
Als letztes kann man noch die sogenannten "Info Bubbles" (zu sehen im Kontrollzentrum) anpassen. Dies geschieht in Zeile 4275 in der template.css. Hier steht folgendes:
.label-info,
.badge-info {
background-color: #3a87ad;
}
Um das weiße Joomla Logo auf der Anmeldeseite, welches unten mittig angezeigt wird, zu entfernen, muss man im Ordner images die Datei login-joomla.png löschen.
Wenn man nun alle o.g. Punkte abgearbeitet hat, hat man einen an die eigene Webseite angepassten Adminbereich. Ich wünsche euch damit viel Erfolg.
Falls ihr Fragen, oder Verbesserungsvorschläge habt, so könnt ihr mir das gerne über die Kommentarfunktion mitteilen.