Einen Stil für das WBB 4 erstellen (Teil 2 Stil hinzufügen)

  • So dann fangen wir mal an wie wir uns einen eigenen Stil für unser WBB4 erstellen.
    Als erstes geht man in das ACP von eurer WBB Installation und wir gehen auf den Tab "Darstellung". Wir finden dann in der linken Spalte den Eintrag "Stile", diesen klicken wir an. Daraufhin öffnet sich ein Untermenü mit den Punkten "Stile auflisten", "Stil hinzufügen" und "Stil importieren". Wir wollen einen Stil erstellen und klicken auf "Stil hinzufügen". Es öffnet sich das folgende Fenster in dem wir unsere Angaben zum Stil vornehmen wie im Screenshot zu sehen.



    Nach dem du deine Angaben vervollständigt hast kannst du im unteren Punkt "Bilder Pfad" noch einen eigenen Ordner angeben in dem du deine Bilder ablegst. Dies ist immer Empfehlenswert denn so bewahrst du die Übersicht. Den dort angegebenen Ordner musst du dann noch unter dem Pfad "wcf/images/" anlegen. Mit einem klick auf "Absenden" speicherst du erst einmal die Vorlage die dein Stil werden soll. Zu dem Punkt betreffend des Vorschaubildes kommen wir später, ebenso wie zu den Templates.
    Jetzt lässt du dir mit einem klick auf "Stile auflisten" die installierten Stile anzeigen und klickst auf den Namen deines Stiles den du gerade angelegt hast.

    Du kannst jetzt mit einem klick auf den Tab "Globale Einstellungen" unter Layout die Breite deiner Seite angeben. Dies kannst du in einer festen Breite angeben oder dies in einer flexiblen Breite angeben. Wenn ein Haken bei flexibler Breite gesetzt ist so kannst du dort zwei Angaben vornehmen. Du kannst einmal die Mindestbreite angeben in den verschiedenen Formaten px, em, % und pt. Als weiteren Punkt hat man dort die Höchstbreite die auch in px, em, % und pt angegeben werden kann. Die Mindestbreite sollte man wie vorgegeben in PX und die Höchstbreite in % einstellen. Möchtest du ein Hintergrundbild nutzen in das deine Seite integriert werden soll, dann solltest du mit einer festen Breite arbeiten und den Haken bei "Flexible Breite verwenden" entfernen ganz so wie es im zweiten Bild mit dem geöffneten Tab "Globale Einstellungen" zu sehen ist.
    Ein weiterer Punkt ist die Angabe deines Logos, dies sollte in deinem Bilder Ordner liegen und dann brauchst du nur den Namen der Datei angeben wie etwa logo.png.
    Darunter kannst du deine gewünschte Schriftgröße angeben, diese bezieht sich auf normalen Text, Überschriften sind logischer Weise größer ! Zusätzlich kannst du aus 13 Schriftarten deine gewünschte auswählen.


    Flexible Breite ------------------------------------> Feste Breite

    Im nächsten Bereich den du über den Tab "Farbpalette" erreichst, kannst du die Farben bestimmen die du für deinen Stil nutzen möchtest, du kannst aber diese Angaben auch im CSS Bereich machen.



    Du kannst wie du sehen kannst für alle Bereiche hier die Farben einstellen, ich lege hier die Grundsätzlichen Farben fest und den Rest mache ich in der Regel via CSS Angabe für die einzelnen Bereiche in denen ich andere Farben nutzen möchte.
    Im letzten Bereich kommen wir nun zu dem Ort an dem wir unsere CSS Angaben machen können, dazu klicken wir auf den Tab "Erweiterte Einstellungen".



    Das waren jetzt erst einmal die Grundlagen und der Anfang des Weges zu einem eigenen Stil für das WBB4. Im nächsten Teil fangen wir an mit CSS Deklarationen unsere Seite zu gestalten, wie auch in diesem Teil, so wird auch der nächste Teil wieder mit Bildern ausgestattet sein um die Texte zu verdeutlichen.

    11.231 mal gelesen