Joomla Zurück-Button verändern!
Sie haben ein schönes Joomla-Template installiert und es individuell an Ihre Bedürfnisse angepasst. Aber der Zurück-Link sieht einfach grauenhaft aus?
[Zurück] <-- So sieht der Standard Zurück-Link aus. Zum einen nicht besonders hübsch, zum anderen überhaupt nicht individuell. Man könnte jetzt mal die eckigen Klammern entfernen. Damit sieht das ganze dann wenigstens neutral aus. Dazu geht man in den „/language“ Ordner und öffnet die „german.php“ mit einem Editor. Jetzt sucht man nach folgendem Eintrag, der normalerweise in Zeile 211 zu finden ist:
DEFINE('_BACK','[ Zurück ]');
Hier entfernt man einfach diese eckigen Klammern und speichert die Datei wieder ab. Die Formatierung des Textes ändert man in der CSS-Datei zum Template, wenn man will. Diese findet man immer in folgendem Verzeichnis: „/templates/templatename/css“. Wobei „templatename“ natürlich der Name des Installierten Templates ist. Die Datei heißt meistens „template_css.css, kann aber auch anders benannt sein. Nachdem man diese CSS-Datei mit einem Editor geöffnet hat, sucht man nach der Definition des Zurück-Buttons. Diese lautet normalerweise „.back_button“. Hier lässt sich nun das Aussehen auf vielfältige Weise ändern. Natürlich wäre es von Vorteil, wenn man gewisse Kenntnisse im Umgang mit Cascading Stylesheets hat. Wenn nicht, schlau machen und erst dann bearbeiten.
Wem das zu wenig ist, der könnte auch einen grafischen Button einbauen. Dazu bemüht man ein Bildbearbeitungsprogramm wie zb. Photoshop oder das kostenlose Gimp, oder …
Man erstellt sich also einen Button zum Beispiel mit folgender Grösse: Höhe 22px, Breite 100px. Aber das kann jeder machen wie er will. Nach Fertigstellung des Buttons lädt man diesen auf seinen Webspace in folgendes Verzeichnis: /templates/templatename/images. Dann bearbeitet man wieder die CSS-Datei wie oben beschrieben. Bei der Definition .back_button schreibt man folgendes rein:
.back_button a {
float: left;
line-height: 22px; height: 22px; width: 100px;
margin-top: 15px;
margin-bottom: 10px;
background: url(../images/back_button.png) left top no-repeat;
display: block;
}
Hier sind natürlich die Grössenangaben zu beachten, die man je nach erstelltem Button anpassen muss. Ebenso ist natürlich der richtige Name der Grafik anzugeben, ist ja logisch.
Nachdem man alles gespeichert hat, sollte nun die eigene Grafik auf der Website erscheinen. Doch was ist das??? Oh Gott, die Schrift „Zurück“ verunstaltet meine schöne neue Grafik. Wer aufgepasst hat, kann sich denken was jetzt kommt. Ja richtig, man bearbeitet wieder die „german.php“ im Ordner „/language“. Dort entfernt man einfach nach nbsp das Wort „Zurück“ und speichert die Datei wieder ab. Das gewünschte Ergebnis sollte nun eintreten. Sicher gibt es noch andere Methoden um zu einer guten Lösung zu kommen. Hier kann man ja ein wenig experimentieren, wenn man will.
DEFINE('_BACK','[ Zurück ]');
Hier entfernt man einfach diese eckigen Klammern und speichert die Datei wieder ab. Die Formatierung des Textes ändert man in der CSS-Datei zum Template, wenn man will. Diese findet man immer in folgendem Verzeichnis: „/templates/templatename/css“. Wobei „templatename“ natürlich der Name des Installierten Templates ist. Die Datei heißt meistens „template_css.css, kann aber auch anders benannt sein. Nachdem man diese CSS-Datei mit einem Editor geöffnet hat, sucht man nach der Definition des Zurück-Buttons. Diese lautet normalerweise „.back_button“. Hier lässt sich nun das Aussehen auf vielfältige Weise ändern. Natürlich wäre es von Vorteil, wenn man gewisse Kenntnisse im Umgang mit Cascading Stylesheets hat. Wenn nicht, schlau machen und erst dann bearbeiten.
Wem das zu wenig ist, der könnte auch einen grafischen Button einbauen. Dazu bemüht man ein Bildbearbeitungsprogramm wie zb. Photoshop oder das kostenlose Gimp, oder …
Man erstellt sich also einen Button zum Beispiel mit folgender Grösse: Höhe 22px, Breite 100px. Aber das kann jeder machen wie er will. Nach Fertigstellung des Buttons lädt man diesen auf seinen Webspace in folgendes Verzeichnis: /templates/templatename/images. Dann bearbeitet man wieder die CSS-Datei wie oben beschrieben. Bei der Definition .back_button schreibt man folgendes rein:
.back_button a {
float: left;
line-height: 22px; height: 22px; width: 100px;
margin-top: 15px;
margin-bottom: 10px;
background: url(../images/back_button.png) left top no-repeat;
display: block;
}
Hier sind natürlich die Grössenangaben zu beachten, die man je nach erstelltem Button anpassen muss. Ebenso ist natürlich der richtige Name der Grafik anzugeben, ist ja logisch.
Nachdem man alles gespeichert hat, sollte nun die eigene Grafik auf der Website erscheinen. Doch was ist das??? Oh Gott, die Schrift „Zurück“ verunstaltet meine schöne neue Grafik. Wer aufgepasst hat, kann sich denken was jetzt kommt. Ja richtig, man bearbeitet wieder die „german.php“ im Ordner „/language“. Dort entfernt man einfach nach nbsp das Wort „Zurück“ und speichert die Datei wieder ab. Das gewünschte Ergebnis sollte nun eintreten. Sicher gibt es noch andere Methoden um zu einer guten Lösung zu kommen. Hier kann man ja ein wenig experimentieren, wenn man will.
