Design Anpassen / Bearbeiten - Tipps & Tricks

Wichtige Hinweise zur Bearbeitung

Bevor Sie mit der Bearbeitung Ihres Produkts beginnen, sollten Sie nachfolgende Hinweise unbedingt beachten - andernfalls kann dies zu unerwünschtem Verhalten oder zur beeinträchtigung des Supportanspruchs führen!


1. Sichern Sie unbedingt vor der Bearbeitung Ihres Produkts die Original-Dateien!

2. Schalten Sie - um unerwünschtes Verhalten bei Fehlern zu vermeiden - Ihr Projekt in den "Wartungsmodus". (Nach der Bearbeitung diesen wieder deaktivieren!)

3. Damit unsere Produkte auch updatefähig bleiben heben Sie den Schutz des Stils nicht auf.


Einstellungsmöglichkeiten

Jedes unserer Produkte besitzt ein individuelles und vorallem einmaliges ACP-Konfigurationsplugin welches Ihnen die Bearbeitung der wichtigsten Grundfunktionen wesentlich erleichtert. Um Ihren Stil / Ihr Produkt konfigurieren zu können, loggen Sie sich in Ihr ACP (=Admin ControlPanel (auch Administration genannt)) ein und wechseln Sie in der linken Seitenleiste auf "Konfiguration" sowie anschließend auf den Menüpunkt "Stil: Designname - XYZ" (Der "Designname" ist selbstverständlich durch den Namen Ihres Produktes zu ersetzen, sowie "XYZ" durch Ihre eingesetzte Version (Beispielsweise "Light" oder "Dark" Edition).


Dort können Sie die wichtigsten Grundfunktionen problemlos und vorallem ohne besondere Kenntnisse konfigurieren. Beispielsweise können Sie die zusätzlichen (Additional) im Design enthaltenen Boxen (Beispielsweise "AdditionalFooter" oder "AdditionalPartner") bearbeiten oder deaktivieren. Dadurch können Sie Ihr Design an Ihre Wünsche und an die Bedürfnisse Ihrer Community anpassen!



Hauptfarbe ändern

Die Hauptfarben unserer Produkte können kinderleicht innerhalb weniger Sekunden angepasst werden.


1. Loggen Sie sich in Ihr ACP (=Admin ControlPanel (auch Administration genannt)) ein und wechseln Sie in der linken Seitenleiste auf "Anpassung" sowie anschließend auf den Menüpunkt "Stile".

2. Wählen Sie nun Ihren Stil / Ihr gewünschtes Produkt aus und wählen "Bearbeiten" ("Stift"-Icon) aus, anschließend wechseln Sie im TabMenü auf den Menüpunkt "Farbpalette".

3. In der Farbpalette wählen Sie in der rechten Seitenleiste die Kategorie "wcfHeaderMenu" aus. Nun können Sie die Hauptfarbe des Designs auf Ihre Wunschfarbe ändern - in den meisten unserer Produkte sind dies die beiden Variablen "$wcfHeaderMenuBackground" sowie "$wcfHeaderMenuLinkBackground" (dies ist allerdings ausführlich in der Produktbeschreibung beschrieben). Scrollen Sie anschließend an das Ende der Seite und klicken auf den "Absenden" Button. Ihre Änderungen sind nun gespeichert!



Hinweis: Sollten Sie mehrere Farbvarianten Ihren Besuchern / Mitgliedern anbieten wollen, können Sie Ihr jeweiliges Produkt (Stil) einfach via "Stil kopieren" duplizieren und die oben genannten Schritte erneut durchführen. Dies ist beliebig oft möglich. Das duplizieren eines Stils ist in der Stil bearbeitung oben Rechts mit dem Button "Stil kopieren" möglich.


Grafiken austauschen

Selbstverständlich können und dürfen Sie sämtliche Grafiken welche in Ihrem Design / Ihrem Produkt mitgeliefert werden austauschen. Hierbei wird zwischen dem "Logo" und den sonstigen Grafiken unterschieden. (Originalgrafiken welche im Stil / Produkt enthalten sind, dürfen allerdings nicht für andere Projekte, Stile oder Produkte verwendet werden!)


Logo austauschen:

1. Loggen Sie sich in Ihr ACP (=Admin ControlPanel (auch Administration genannt)) ein und wechseln Sie in der linken Seitenleiste auf "Anpassung" sowie anschließend auf den Menüpunkt "Stile".

2. Wählen Sie nun Ihren Stil / Ihr gewünschtes Produkt aus und wählen "Bearbeiten" ("Stift"-Icon) aus, anschließend wechseln Sie im TabMenü auf den Menüpunkt "Globale Einstellungen".

3. In der Kategorie "Seitenlogo" können Sie nun den Pfad Ihres Logos (sowohl für die Desktop- als auch für die Mobil (Smartphone, Tablet) Variante) sowie die Breite und Höhe Ihres Logos angeben. (Bitte achten Sie darauf, dass die angegebene Höhe und Breite tatsächlich Ihrer Grafik entspricht). Scrollen Sie anschließend an das Ende der Seite und klicken auf den "Absenden" Button. Ihre Änderungen sind nun gespeichert!


Sonstige Grafiken austauschen:

1. Verbinden Sie sich mit Ihrem Webspace / Server auf dem Ihre WoltLab Suite Installation betrieben wird und wechseln Sie ins Hauptverzeichnis Ihrer WoltLab Suite Installation. (Beispielsweise mittels FilaZilla)

2. Wechseln Sie nun zu dem jeweiligen Pfad der in Ihrem Design hinterlegt ist - diesen können Sie im ACP unter "Anpassung" -> "Stile" -> "Stil bearbeiten" -> "Daten" einsehen.

3. Tauschen Sie nun Ihre gewünschten Grafiken gegen die Originalgrafiken welche im Stil mitgeliefert werden aus. Achten Sie darauf das sowohl der Dateiname als auch die Dateiendung identisch sind.



CSS & Template Bearbeitung

Möchten Sie weitere Änderungen im CSS oder in den Templates vornehmen, ist dies zwar erlaubt - erfolgt allerdings auf eigene Gefahr. Dennoch möchten wir Ihnen einige Hinweise sowie Tipps & Tricks diesbezüglich mitgeben.


Individuelles CSS einfügen:
Auch hier gilt: Heben Sie den Schutz des Stils nicht auf! Das einfügen sowie bearbeiten von individiuellen CSS ist auch mit aktivierten Schutz möglich!


1. Loggen Sie sich in Ihr ACP (=Admin ControlPanel (auch Administration genannt)) ein und wechseln Sie in der linken Seitenleiste auf "Anpassung" sowie anschließend auf den Menüpunkt "Stile".

2. Wählen Sie nun Ihren Stil / Ihr gewünschtes Produkt aus und wählen "Bearbeiten" ("Stift"-Icon) aus, anschließend wechseln Sie im TabMenü auf den Menüpunkt "Erweiterte Einstellungen".

3. Fügen Sie Ihre individuellen CSS-Deklarationen / individuellen SCSS-Variablen in das Editor-Feld "Eigene Deklarationen" ein. Tipp: Sollte eine Deklaration nicht greifen, versuchen Sie es der jeweiligen Deklaration ein !important anzufügen. Scrollen Sie anschließend an das Ende der Seite und klicken auf den "Absenden" Button. Ihre Änderungen sind nun gespeichert!


Template-Bearbeitung / Eigene Templates:


Hinweis: Um potenzielle Fehler zu vermeiden, erstellen Sie eine eigene Templategruppe im ACP unter "Anpassung" -> "Templategruppen" -> "Templategruppe hinzufügen" und wählen Sie diese in Ihrem Design aus! Die neu erstellte Templategruppe kann im ACP unter "Anpassung" -> "Stile" -> "Stil bearbeiten" -> "Daten" -> "Templategruppe" ausgewählt bzw. zugewiesen werden.


Sollten Fehler auftreten oder die eigenen Templates nicht mehr benötigt werden, kann jederzeit wieder auf die Original-Templategruppe welche im Stil mitgeliefert wurde zurückgewechselt werden.