~*Darkangel*~

Hallo liebe Leserin, lieber Leser,

in dieser Anleitung zeige ich euch wie ihr eigene Style Variablen erstellen und nutzen könnt.

Was wird benötigt?

vB4
ein Editor

Debug Modus

Um eigene Style Variablen hinzufügen zu können, ist es notwendig den Debug Modus eurer vB4 Installation zu aktivieren. Bevor ihr den Debug Modus aktiviert, solltet ihr 5 Minuten vorher euer Forum Offline stellen. So nun aber zur notwendigen Änderung. Zunächst lädt ihr die config.php von eurem Server und öffnet diese.

Als nächstes müsst ihr folgenden Code:

Code:

//if (VB_AREA == 'AdminCP')
//{
//	$config['Misc']['debug'] = 1;
//}

auskommentieren. Sprich die Schrägstriche entfernen Sieht Schlussendlich so aus:

Code:

if (VB_AREA == 'AdminCP')
{
$config['Misc']['debug'] = 1;
}

nun speichert ihr eure config.php und lädt diese wieder auf eurem Server.


Style Variable hinzufügen

Öffnet euren Browser und gebt die URL zu eurem Admin Panel ein. Nun wählt ihr die Menüpunkte Styles & Templates --> Styles verwalten --> öffnet das Popup des MASTER-STYLE´s --> Stylevariablen und klick auf Neue Stylevariable hinzufügen.

Bildschirmfoto 2010-01-14 um 20.28.29.png

Es öffnet sich ein Formular wo ihr folgende Menüpunkte vorfindet:

• Add-on
• Gruppe
• ID für die Stylevariable
• Name
• Beschreibung
• Datentyp
• Regulären Ausdruck benutzen

Ich füge zum Testen folgende Werte hinzu:

Add-on --> vBulletin
Gruppe --> Header
ID für Stylevariable --> logo_margin
Name --> Außenabstand
Beschreibung --> Außenabstand für´s Logo
Datentyp --> Außenrand (margin

Bildschirmfoto 2010-01-14 um 20.55.24.png

Addon: Über das Auswahlmenü von Addon, könnt ihr auswählen in welchem Addon eure Style Variable später nutzbar sein soll.

Gruppe: Hier könnt ihr einen Gruppennamen für eure spätere Style Variable angeben.

ID für Stylevariable: Hier könnt ihr eure ID für die Style Variable angeben. Die ID wird später auch in eurer Style Variablen Übersicht angezeigt.

Name: Hier könnt ihr einen Namen "Überschrift" für die Style Variable definieren.

Beschreibung: Hier könnt ihr eine Beschreibung für eure Style Variable angeben, z.B Außenabstand für´s Logo

Datentyp: Hier habt ihr die Möglichkeit aus mehreren Datentypen zu wählen, für margin , nutzt ihr z.B "Außenrand (margin).


Wenn ihr alle benötigten Felder gefüllt habt, könnt ihr auf speichern klicken. Nach dem speichern öffnet sich ein weiteres Formular. In diesem könnt ihr nun Startwerte für die hinzugefügte Style Variable einfügen.

Bildschirmfoto 2010-01-14 um 20.38.49.png

Style Variable nutzen

Alles Definieren würde ohne dessen Nutzung nichts bringen, deshalb ist es nun an der Zeit die Style Variable innerhalb von CSS zu nutzen. Öffnet eure additional.css "zu finden unter

Styles & Templates --> Styles verwalten --> öffnet das Popup eures Style --> Templates ändern --> CSS "

Hier könnt ihr nun eure Definitionen niederschreiben. Um das Beispiel zu vervollständigen nutzen wir auch hier wieder den Abstand für das logo.

Code:

.logo-image { 

       margin: {vb:stylevar logo_margin};
}

Nachdem einfügen speichert ihr euer Template und schon könnt ihr nach den ändern der Style Variable, eure Auswirkungen begutachten. Um die eigene Style Variable zu nutzen reicht es also {vb:stylevar logo_margin} als Wert zu übergeben. Natürlich könnt ihr die Style Variable auch anderweitig nutzen, z.B für padding.

Fehlerbehebungen:

Die Werte in der Style Variable haben keine Auswirkungen: Überprüfen Sie bitte ob ihre Style Variablen ID korrekt benannt wurde und ob Sie alle Werte innerhalb der Style Variable besetzt haben.