1111111111Abstimmen 2.94 (9 Stimmen)

joomlaisis

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" extern
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:

  • admincontrollbsp
  • adminloginbsp
Schritt 1: Das Template lokal sichern

Geht mit einem FTP-Programm eurer Wahl (ich bevorzuge unter Mac OS X Cyberduckextern) 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.

 

Schritt 2: Das Logo der Anmeldeseite austauschen

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.

 

Schritt 3: Hintergrundfarbe anpassen

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 extern oder Editra (Mac OS X) extern oder Notepad++ (Windows) extern
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.

 

Schritt 4: Hintergrundfarbe des Loginfeldes anpassen

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.

 

Schritt 5: Anpassen des Anmelde-Buttons

 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);
}

 

Schritt 6: Austauschen des Joomla Logos oben links

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.

 

Schritt 7: Anpassen der Hintergrundfarbe hinter dem Logo und dem Schriftzug "Kontrollzentrum"

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;
}

 

Schritt 8: Anpassen der obersten Menüleiste

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;
}

 

 Schritt 9: Anpassen der Farbe der Untermenüpunkte der Menüleiste.

 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);
}

 

Schritt 10: Anpassen der Link-Farben

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;
}

 

Schritt 11: Anpassen der "Info Bubbles"

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;
}

 

Schritt 12: (Nachtrag) Weißes Joomla-Logo mittig auf der Anmeldeseite entfernen

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.

2017  de Boer-Web   |   Impressum
nach oben