Seiten - und Centerboxen einfärben

Unser Ziel ist es zu erreichen, dass OPN für jede Seiten- oder Centerbox eine anderes Design anzeigt.

Das Problem ist oft, dass der Background der linken und rechten Seitenboxen verschieden ist und somit der Content und die Links kaum sichtbar sind.

Mit einem kleine Trick ist es möglich, dass OPN jedes Box in einer anderen Farbe anzeigen wird.

Wie das geht, versuchen wir hier zu erklären.

Als erstes öffnen wir die CSS Datei von unserem Template.
Darin suchen wir den Code, welche für das aussehen der Seiten- oder auch der Centerboxen verantwortlich ist.

Wir zeigen das hier am Beispiel des opn_switch Themes.

div.menuside ul {width:auto; margin:0; padding:0;}
div.menuside li {list-style: none; margin:2px; padding:4px; line-height:120%; border:0px solid #FFF; background:transparent;}
div.menuside a {display:block; height:auto; color:#fff; font-weight:bold; padding: 0.2em 2px 0.2em 20px; text-decoration:none; background: url(images/li.gif) no-repeat left;}
div.menuside a:hover {background: url(images/li_hover.gif) no-repeat left; color: #DEDEDE; padding: 0.2em 2px 0.2em 20px;}

Dieser CSS Code ist für das aussehen der Seitenboxen im opn_switch Theme verantwortlich. Somit wird jede Seitenbox, egal ob links oder rechts gleich angezeigt.
Wir merken uns diesen Code unter dem Begriff default

Jetzt stellen wir fest, dass alle rechten Seitenboxen kaum lesbar sind.
Im nächsten Schritt werden wir das korregieren, ohne irgendwelche Änderungen an den PHP Dateien vorzunehmen.

Wir fügen als dem CSS den folgenden Code hinzu:

#right div.menuside ul {width:auto; margin:0; padding:0;}
#right div.menuside li {list-style: none; margin:2px; padding:4px; line-height:120%; border:0px solid #FFF; background:transparent;}
#right div.menuside a {display:block; height:auto; color:#000; font-weight:bold; padding: 0.2em 2px 0.2em 20px; text-decoration:none; background: url(images/li.gif) no-repeat left;}
#right div.menuside a:hover {background: url(images/li_hover.gif) no-repeat left; color: #00478A; padding: 0.2em 2px 0.2em 20px;}

Das ist exakt der gleiche Code wie bis anhin, aber mit zwei entscheidenden Änderungen.
Als erstes fällt uns auf, dass vor den neuen Klassen jetzt ein #right steht und dass die Farbwerte geändert wurden.

Wir erinnern uns nun wieder an den default Code von weiter oben.
Was wir jetzt gemacht haben ist nichts weiter als eine neue Boxen ID erstellt.

Wir merken uns also den Begriff ID right.

Nun speichern wird das CSS und laden es per FTP ins korekte Verzeichnis hoch.

Wir wird nun aber diese Code in OPN angezeigt?

Im Adminbereich unseres OPN gehen wir zu den Seitenboxen und öffnen oder erstellen eine neue Seitenbox.
Da findet ihr nun ein Eingabefeld ID.

ID? Genau, wir erninnern uns an die CSS Klassen mit default und right.
Standartmässig nimmt OPN immer den default Wert, daher muss da nichts eingetragen werden.

Wir wollen aber nun, dass diese Seitenbox den neuen right Code aus dem CSS anzeigt.
Also schreiben wird in das Feld ID den Wert right hinein.
Somit weiss nun OPN, dass diese Box nicht den default Wert bekommt, sondern den neuen Wert right.



Nun stellen wir die Box noch so ein, dass diese auf der rechten Seite angezeigt wird.

Nach dem speichern werde ihr nun sehen, dass diese rechte Seitenbox anderst angezeigt wird als die anderen.

Ohne grosses Änderungen und vor allem mit sehr wenig Aufwand ist so möglich, gezielt jeder Box ein anderes Aussehen zu verschaffen.

Wie finde ich den heraus, welche Code im CSS für was verantwortlich ist?

Zum einen findet ihr in der Administration - Diagnostic - CSS Testpage eine Anzeige.

Empfehlen würde ich Euch aber den Firefox mit dem ColorZilla Plugin.

Mittels Fadenkreuz kann aus jedem Browserbereich der entsprechende Farbwert und die CSS Klasse ausgelesen werden.
Sehr zu empfehlen ist auch das FireBug Plugin.

Damit ist es möglich das CSS direkt im Browser Fenster zu maipulieren.

Nun wünsche Euch viel Spass beim ausprobieren und testen.

Flash

zugefügt am:	25.01.2008 13:35
Verfasser	Flash ()
Bewertung	(gelesen: 19518 mal)
Betreffender Link	OPN Templates
Option:	Drucken |  Drucken mit Kommentar |
Es sind keine Kommentare für Gäste erlaubt, bitte registrieren Sie sich

[ Zurück zum Howtos Index ]
Seiten - und Centerboxen einfärben
geschrieben von just59 von 23.10.2008 18:12:42
Meine Bewertung:

---

Super Anleitung. Hatte ich leider erst jetzt gesehen.