Standard Template: Kleines Tutorial um bestimmte Navleisten Links farbig hervorzuheben

Hierbei wollen wir die den Linkhintergrund farbig hervorheben und dabei den style, ohne Änderungen am Template Element selber oder direkt in die CSS schreiben zu müssen, ändern.
Wir benutzen lediglich die Menüs, die dem normalen User zur Verfügung stehen, trotzdem empfehle ich, sich auch mit HTML & Co zu beschäftigen.
Hierfür ist diese Webseite gut geeignet
http://de.selfhtml.org

---

Aufgabe:
Wir wollen in unserem Beispiel aus dem Standardtemplate - ich benutze mal ein rein weißes Template, damit man die Änderungen gut sieht - den Link "Kontakt" in der Navigationsleiste nachträglich mit einem farbigen Hintergrund ausstatten, um den Link deutlicher hervorzuheben.

---

---

Welche HTML Codes benutzen wir und welche Angaben brauchen wir?
Es sollen mit Hilfe von div style Anweisungen an eine bestimmte ID das Aussehen dieses Elementes geändert werden, in unserem Fall dem Link "Kontakt"

Wie finden wir die ID des Elementes ?
Hierzu benutzen wir die Funktion der rechten Maustaste innerhalb der Browsers "Quellcode Anzeigen" beim IE oder "Seitenquelltext anzeigen" bei Firefox.
Für unsere Linkleiste finden wir dort den folgenden Abschnitt (zu erkennen an den Namen der Links):

---

<li><a href="./admin/" class="tarea">Admin</a> |</li>
<li onmouseout="try{togSub('link_index')}catch(err){}" onmouseover="try{togSub('link_index')}catch(err){}" id="link_index" style="position: relative;">
<a href="./" class="tarea">Forum Übersicht</a>
</li><li onmouseout="try{togSub('link_search')}catch(err){}" onmouseover="try{togSub('link_search')}catch(err){}" id="link_search" style="position: relative;">
|<a href="search.php" class="tarea">Suche</a>
</li><li onmouseout="try{togSub('link_member')}catch(err){}" onmouseover="try{togSub('link_member')}catch(err){}" id="link_member" style="position: relative;">
|<a href="member.php" class="tarea">Einstellungen</a>
</li><li onmouseout="try{togSub('link_mail')}catch(err){}" onmouseover="try{togSub('link_mail')}catch(err){}" id="link_mail" style="position: relative;">
|<a href="private.php" class="tarea">Private Mails</a>
</li><li onmouseout="try{togSub('link_calendar')}catch(err){}" onmouseover="try{togSub('link_calendar')}catch(err){}" id="link_calendar" style="position: relative;">
|<a href="calendar.php" class="tarea">Kalender</a>
</li><li onmouseout="try{togSub('link_logout')}catch(err){}" onmouseover="try{togSub('link_logout')}catch(err){}" id="link_logout" style="position: relative;">
|<a href="login.php?option=logout" class="tarea">Logout</a>
</li><li onmouseout="try{togSub('user_page1425310764')}catch(err){}" onmouseover="try{togSub('user_page1425310764')}catch(err){}" id="user_page1425310764" style="position: relative;">
|<a href="page-cd.html" class="tarea">CDs</a>
</li><li onmouseout="try{togSub('user_page1481688308')}catch(err){}" onmouseover="try{togSub('user_page1481688308')}catch(err){}" id="user_page1481688308" style="position: relative;">
|<a href="page-kontakt.html" class="tarea">Kontakt</a>
</li><li onmouseout="try{togSub('link_userlist')}catch(err){}" onmouseover="try{togSub('link_userlist')}catch(err){}" id="link_userlist" style="position: relative;">
|<a href="userlist.php" class="tarea">Mitglieder</a>

---

Wir suchen den Abschnitt, wo unser Link "Kontakt" enthalten ist.

---

</li><li onmouseout="try{togSub('user_page1481688308')}catch(err){}" onmouseover="try{togSub('user_page1481688308')}catch(err){}" id="user_page1481688308" style="position: relative;">
|<a href="page-kontakt.html" class="tarea">Kontakt</a>

---

und finden dort auch die ID für den Link.

Wir lassen das Fenster "Quellcode" geöffnet, damit wir später von dort die ID kopieren können.

Wie wird die Hintergrundfarbe nun geändert ?

Hierzu benutzen wir im Adminmenü unter "Layout" die Option "Farben und Einstellungen" und dort den Bereich "CSS, HTML & Co".

Nachdem dieser Bereich geöffnet ist, sehen wir rechts ein Feld in dem folgendes steht:

Zitat

---

/* Fügen Sie hier direkt eigenen CSS-Code ein */
/* Dieser Code wird der vorgebenen CSS-Datei angehängt */
/* Die vollständige CSS Datei können sie unter Admin - CSS bearbeiten! */

---

Das lassen wir alles so stehen, danach fügen wir gleich den CSS Code ein.

Und zwar werden wir der ID, die wir im Quellcode gefunden haben mittels dem voranstellen einer # ganz explizit eine style-Anweisung geben.
Das wird in unserem Fall so aussehen:

---

#user_page1481688308

---

Danach folgt der Teil der die Anweisung enthält, dieser wird eingeschlossen von { }. Wir wollen die Hintergrundfarbe ändern, also lautet die Anweisung background-color= gefolgt von der Farbnummer. (Diese können wir z.Bsp mit der Farbauswahl (im Beispiel rot) aus unserem Layout Menü wählen und fügen sie mit der vorangestellten Raute der Anweisung an. Der Teil sieht dann so aus:

---

{ background-color=#f20e47 }

---

Die gesamte Zeile
#user_page1481688308 { background-color=#f20e47 }
tragen wir nun in das Feld auf der Seite "CSS, HTML & Co" ein. Das sieht dann so aus

---

---

Danach auf speichern und schon ist es geschafft.

Nach dem "Neuladen (STRG + F5) des Forums sollte Euer ausgewählter Link mit dem neuen Hintergrung erscheinen.

---

---

Wichtiger Hinweis:
Sollte sich keine Veränderung zeigen, muss überprüft werden ob die CSS nicht schon direkt bearbeitet wird. Admin -> Layout ->CSS steht auf "Ich möchte direkt die CSS Datei hacken (für Profis mit CSS & HTML Kenntnissen) -> in diesem Fall wird die Style Anweisung an direkt in die CSS geschrieben.

Wer nun Lust bekommen hat, weitere style Elemente so zu ändern, den verweise ich noch einmal auf die Webseite http://de.selfhtml.org, wo er sich über die Möglichkeiten bezüglich Schriftgröße, Schriftart, Textdarstellung usw. informieren kann.

Dieses Tutorial soll einen Anreiz geben, sich selber intensiver mit den Möglichkeiten, die es gibt, auseinander zu setzen.


Viel Spaß damit

Achim


Das Copyright des Beitrags und der enthaltenen Bilder liegt beim Autor und darf ohne dessen Zustimmung nicht kopiert oder ohne seine Zustimmung verwendet werden.
Kontakt siehe Impressum