Willkommen in der Howtos Sektion von OpenPHPNuke - das Open Source CMS


OpenPHPnuke

Tutorials zu OpenPHPnuke

Was kann man mit den Boxen ID's machen?



Beim Erstellen oder Editieren von Side und Centerboxen kann man ein ID angeben.

Was bewirkt die Eingabe einer ID?
Damit kann man die Farben der Boxen steuern.

Beispiel am opn_default theme.
wir möchten die Links und die Mouseover in einer bestimmten Sidebox ändern.

Im CSS suchen wir die Stelle wo die Sideboxen definiert sind.

div.menuside li {list-style:none; margin:2px; padding:4px; line-height:120%; border:1px solid #FFF; background:#e0e8f1;}

div.menuside a {display:block; height:auto; color:#006699; font-weight:bold; padding: 0.2em 2px 0.2em 8px; text-decoration:none;}

div.menuside a:hover {background-color:#D8E8F7;}



Nun kopieren wir diesen Code, ändern die Farbwerte und weisen der Class eine eindeutige ID zu.

#Box1 div.menuside li {list-style:none; margin:2px; padding:4px; line-height:120%; border:1px solid #FFF; background: #9EAAB6;}

#Box1 div.menuside a {display:block; height:auto; color:#fff; font-weight:bold; padding: 0.2em 2px 0.2em 8px; text-decoration:none;}

#Box1 div.menuside a:hover {background-color: #4D5E67;}


Im Adminbereich Seitenboxen wählen wir nun die zu ändernde Seitbox und editieren diese oder Erstellen eine neu Sidebox.

Im Feld ID geben wir nun als Vorgabe Box1 ein und speichern die Sidebox.

Schauen wir die Seite nun an, so wird bei allen Seitenboxen der das default CSS gelesen und bei der Seitenbox mit der ID Box1" wird die box in den anderen Farben dargestellt.

Die Funktion ID erlaubt es somit jede Box sowie auch andere Elemente gezielt mit anderen Farben oder Formatierungen zu steuern.
Im Zusammenspiel mit Themengruppen kann man auf diesem Weg ein komplett verschiedenes Design für OPN steuern.

Seitenbox NormalSeitenbox mit ID


Extra Information....
zugefügt am: 11.09.2007 21:40
Verfasser Flash ()
Bewertung (gelesen: 18553 mal)
Option: Drucken Drucken mit Kommentar
Es sind keine Kommentare für Gäste erlaubt, bitte registrieren Sie sich


[ Zurück zum Howtos Index ]