[HowTo] WBB4 Design

    Hey,
    da es schon einige Gamingforen nötig haben meine Designs zu klauen, erstelle ich in diesem Thread alles nötige und das alles Schritt.

    Um direkt anzufangen, erstellen wir einen Stil:
    Wir wählen hier "Stil hinzufügen"
    oder alternativ: Stil auflisten -> Stil hinzufügen:

    und stellen hierbei folgende Sachen ein:

    Template-Gruppe hat uns zurzeit gar nicht zu interessieren. Was es damit auf sich hat wird später von mir nochmals erklärt.

    Bei dem Reiter Globale Einstellungen könnt ihr ein Logo hinzufügen, ich füge das Retrotown Logo hinzu (Orange):

    Dort könnt ihr auch die Breite des Forums festlegen sowie auch die Schriftart und Schriftgröße.
    Da wir das ganze über CSS definieren brauchen wir es vorerst nicht.

    Kommen wir zur Farbpalette, da ich das orangene Retrotown Logo gewählt habe, entscheid ich mich auch für die Farben die an Orange ranpassen.

    Und wir klicken auf Absenden nun können wir unseren Stil betrachten.
    Keine Sorge es kommt noch mehr, das war jetzt der erste Schritt vom WBB4 Design.
    Im nächsten Beitrag kommt das Menü dran :P
    Das Design wird nach dem Tutorial releast :aws:
    BTW.: Ich liebe Flat Designs, weshalb ich mich an diesen Farben speziell orientieren werde: Flat UI Colors
    Und wenn ihr wirklich daran zweifelt das ich Wbb4 Designer bin, schaut euch mal Hardnetz Forum das an :troll:

    So sieht unser bisheriges Design aus:

    Einmal editiert, zuletzt von FileX (6. Juni 2015 um 23:56)

    Menü - CSS-Deklarationen:

    Im folgenden zeig ich euch die CSS-Deklarationen, womit ihr euer Menü bestücken könnt.
    Woltlab hat hier <ul> sowie <li> benutzt. Recht simpel wer sich mit CSS auskennt.

    Folgendes definiert das Badge:

    Code
    #mainMenu .badge {
Hier deine Anweisungen in CSS
}

    Ich hab mich für diese Anweisungen entschieden:

    Code
    #mainMenu .badge {bottom: 10px;background-color: #e67e22;color: #ecf0f1;left: 5px;border-radius: 3px;margin-right: -5px; text-align: center;}


    Und so sollte das Badge rauskommen: (Neben "Forum" oben rechts, für blinde Menschen)

    Kommen wir zum <ul>, das UL ist nur so lang, wie euer Menü und zentriert sich auch mit der Länge.
    Definiert wird das <ul> beim #mainMenu so:

    Code
    #mainMenu > ul {
CSS-Anweisungen hier...
}

    Mein Beispiel sieht ungefähr so aus:

    Code
    #mainMenu > ul {padding-bottom: 7px;text-align: center; background: none repeat scroll 0% 0% #34495e;}

    Und dabei kommt das raus:
    Ich habs extra simpel gehalten, ich werds dann anpassen wenn wir etwas weiter sind mit dem Design :P

    Ich will den Hintergrund aber über die länge des Forums haben, weshalb ich das #mainMenu den Hintergrund verpasse:

    Code
    #mainMenu { background-color: #34495e; }

    Dabei wird das ganze über die Breite des Forum gezogen, Beispiel:

    Kommen wir zum aktivem Menüpunkt
    Dieser wird ganz einfach definiert mit dieser Deklaration:

    Code
    #mainMenu > ul > li.active > a { Hier die Anweisungen... }

    Mein Beispiel sieht so aus:

    Code
    #mainMenu > ul > li.active > a {padding-left: 15px; padding-right: 15px;background-color: rgba(0,0,0,0);min-width: 0px;font-weight: normal;color: #ecf0f1;padding-bottom: 15px; border-top: 3px solid #d35400;}

    Und sieht auch so aus wie ich es definiert habe:

    Doch wie kann ich es definieren wenn ich mit meiner Maus über andere nicht aktive Menüpunkte fahre?
    Ganz einfach mit dem :hover Effekt:

    Code
    #mainMenu > ul > li > a:hover { Hier die Anweisungen }

    Natürlich auch mein Beispiel:

    Code
    #mainMenu > ul > li > a:hover {padding-left: 15px; padding-right: 15px;background:rgba(207, 207, 207, 0.08);min-width: 0px;font-weight: normal;color: white;padding-bottom: 15px;border-top: 3px solid #e67e22;font-size: 1.13rem;}

    und es sieht auch genauso aus wie im Code definiert:

    Den Bereich des <li> kann man natürlich auch definieren, ich habs nur zu spät erwähnt:

    Code
    #mainMenu > ul > li { Hier deine Anweisungen... }

    Und natürlich mein Beispiel:

    Code
    #mainMenu > ul > li {padding-left: 15px; padding-right: 15px;font-size: 1.13rem;height: 40px;margin: 0;padding: 0;text-align: center;}

    Das <li> sind nur die einzelnen Menüpunkte. Man kann auch, wie bei Hardnetz Bei der Menüreihenfolge eine eigene Farbe machen.

    Und zwar mit folgendem Code:

    Code
    #mainMenu > ul > li:nth-child(ZAHL DER REIHENFOLGE) > a:hover {
    border-top: 3px solid FARBE;
}

    Mein Beispiel, da ich 4 Menüpunkte habe:

    Und das ganze sieht dann so aus:

    Das wars jetzt eigentlich grob her vom Menü. Wer sich mit CSS auskennt kann sich die restlichen Sachen eigentlich denken.
    Das waren jetzt mehr oder weniger die Basics.
    Ich schau was ich morgen dran nehmen werde.

    Der Fertige mainMenü Code:

    Einmal editiert, zuletzt von FileX (7. Juni 2015 um 18:54)

    Fangen wir mal mit 2 leichten Sachen an:
    Wie positioniere ich das Logo in der Mitte?
    Und wie ändere ich den navigationHeader (das kleine Menü unter dem Hauptmenü)?

    Als aller erstes will ich die Hintergrundfarbe ändern, dazu wähle ich dieses schicke Grau:
    Das definieren wir so:

    Code
    html, body {
    background-color: #161618;
}

    Das schicke Endergebnis der kleinen Deklaration:

    Da ich das Logo aber gerne in der Mitte haben möchte, müssen wir da mal was ändern.

    Code
    .logo {
  margin-top: 57px;
    text-align: center;
}


    und das tolle Endergebnis:

    Kommen wir zum navigationHeader:

    Ich will den orangen Hintergrund und die Schriftfarbe weiß, das legen wir wie folgt fest:

    und natürlich der Screen:
    unser bis jetziger CSS Code:

    Hat jemand ne Idee was ich als nächstes machen soll? Es gibt so viel was man machen kann, allerdings weiß ich nicht wo ich anfangen kann.
    Der Thread ist offen, bitte nur Vorschläge posten, Feedbacks können bei mir via PN erfolgen.
    Alles andere wird von der Moderation gelöscht und bei mehrfachen Verstoß als Spam/Off-Topic geahndet.

    Schriftart im Stil ändern
    Da es von WBB keine Möglichkeit gibt im Editor eine Schriftart hinzufügen widmen wir uns den Templates.
    Was ist ein Template? Das Template ist der Aufbau der Seite, sprich das HTML Grundgerüst.

    So sieht das Design vorher aus ohne eine andere Schriftart sondern mit dem Standard:

    Zu aller erst brauchen wir eine Templateklasse, die erstellen wir ganz einfach:
    Wir gehen auf folgenden Menüpunkt im ACP:

    Nun könnt ihr eure Templateklasse erstellen:

    Der Name ist beliebig, das Verzechnis ebenso, bis auf das / könnt ihr es nennen was ihr wollt.
    Das / ist immer Pflicht, Weshalb? Frag Woltlab :P

    Wir gehen auf Templates auflisten und suchen bei den Standardtemplates "headInclude" raus, das ist der <head>-Bereich beim Wbb4
    Wir wollen das Template headInclude in unsere Templateklasse kopieren und fügen gleichzeitig unsere Schriftart hinzu:
    Ihr klickt auf folgendes Icon bei headInclude:
    , das ist übrigens das einzige was ihr auswählen könnt da die anderen gelockt sind :P

    Wir suchen uns von Google Fonts eine schöne Font aus, ich hab mich für Montserrat entschieden, weil es mir gefällt.
    Wir fügen dann den Code von Google Fonts in das headInclude Template ein und das unter den <meta>-Tags

    Folgendes haben wir eingefügt:

    Code
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

    So, jetzt haben wir unsere Schriftart schon mal verlinkt, allerdings noch nicht in den Stil eingebaut, dazu gehen wir wieder zu den CSS-Einstellungen unseres Stils und definieren es:

    Code
    html, body {
    background-color: #161618;
    font-family: 'Montserrat', sans-serif;
}

    und voila die Schrift hat sich geändert:

    Zitat von FileX

    Hat jemand ne Idee was ich als nächstes machen soll? Es gibt so viel was man machen kann, allerdings weiß ich nicht wo ich anfangen kann.
    Der Thread ist offen, bitte nur Vorschläge posten, Feedbacks können bei mir via PN erfolgen.
    Alles andere wird von der Moderation gelöscht und bei mehrfachen Verstoß als Spam/Off-Topic geahndet.

    Das DesignTool: Die Große Hilfe für den kleinen Anfänger!
    Es gibt ein Plugin, wo ihr alle im Standardumfang enthaltenen WBB4 Elemente sehen könnt und die je nach CSS/Less einstellen könnt.
    Woltlab-Thread von Black Rider mit Downloadlinks/GitHub Bibliothek:
    https://community.woltlab.com/thread/223940-design-werkzeug/

    Wenn ihr das installiert habt, sieht das Plugin so aus:

    Und natürlich noch weitere Elemente die ich nicht alle abscreenen will.

    ---------------------------------------------------------------------------------------------------------------------------
    Meldungen
    Das sind diese kleinen Dinger, die auch sehr einfach zum bearbeiten sind:

    Das rote ist natürlich die Error Box.
    Das blaue ist die Info Box.
    Das grüne ist die Success Box.
    Das gelbe ist die Warning Box.

    Fangen wir mit der Error Box an.
    Jede der Boxen ist einfach, die Error-Box wird mit .error bestimmt, da es eine Div-Klasse ist.
    Ich baue aber mit .error:hover, wie der Name bereits sagt, einen Hover-Effekt ein und das bei jeder Box.

    Code
    .error {color: white; background-color: #e74c3c; border-radius: 5px; border-bottom: 3px solid #c0392b; border-color: #c0392b; transition: all ease 400ms;}
.error > a {color: white; text-decoration: none;}
.error > a:hover {color: white; text-decoration: none;}
.error:hover {color: white; background-color: #c0392b; border-radius: 5px; border-bottom: 3px solid #e74c3c; border-color: #e74c3c; transition: all ease 400ms;}


    Dazu habe ich die a-Deklaration beim .error geändert, somit wird der angezeigte Link weiß dargestellt.

    Und das gleiche machen wir bei den anderen Boxen, nur mit einer anderen Farbe :P

    Info

    Code
    .info {color: white; background-color: #3498db; border-radius: 5px; border-bottom: 3px solid #2980b9; border-color: #2980b9; transition: all ease 400ms;}
.info > a {color: white; text-decoration: none;}
.info > a:hover {color: white; text-decoration: none;}
.info:hover {color: white; background-color: #2980b9; border-radius: 5px; border-bottom: 3px solid #3498db; border-color: #3498db; transition: all ease 400ms;}

    Success

    Code
    .success {color: white; background-color: #2ecc71; border-radius: 5px; border-bottom: 3px solid #27ae60; border-color: #27ae60; transition: all ease 400ms;}
.success > a {color: white; text-decoration: none;}
.success > a:hover {color: white; text-decoration: none;}
.success:hover {color: white; background-color: #27ae60; border-radius: 5px; border-bottom: 3px solid #2ecc71; border-color: #2ecc71; transition: all ease 400ms;}

    Warning

    Code
    .warning {color: white; background-color: #e67e22; border-radius: 5px; border-bottom: 3px solid #d35400; border-color: #d35400; transition: all ease 400ms;}
.warning > a {color: white; text-decoration: none;}
.warning > a:hover {color: white; text-decoration: none;}
.warning:hover {color: white; background-color: #d35400; border-radius: 5px; border-bottom: 3px solid #e67e22; border-color: #e67e22; transition: all ease 400ms;}

    Und das Endergebnis:

    Zitat von SNK Kenji

    Eventuell, solche Tutorials als "Video" machen,
    durch Sprechen kann man bestimmte Dinge besser Erkläre,
    zum beispiel:" Warum schreibt man das so und nicht anders".

    Falls FileX dem einwilligt, würde ich sein Tutorial sobald es abgeschlossen ist Filmen (Grundlage) - und weitere Parts auch "verfilmen".

    Zitat von 25908734

    Falls FileX dem einwilligt, würde ich sein Tutorial sobald es abgeschlossen ist Filmen (Grundlage) - und weitere Parts auch "verfilmen".


    Kann ich auch selbst, muss nur schauen wann ich privatlich meine Ruhe hab.
    Da sowieso bald Sommerferien sind und ich nix vor hab, wie auch sonst, passt es da.

    Keine Ahnung ob erlaubt - aber ich mache es einfach mal:

    Um Kategorien in einer anderen Farbe erscheinen zu lassen müssen wir erstmal die ID der Kategorie raußfinden.

    Spoiler anzeigen

    Wir gehen erstmal auf unsere Forenübersicht.
    Nun müssen wir "Element untersuchen" auswählen - unten im Screen wird gezeigt wie man die ID heraußfindet.

    Wichtig ist dass ihr bei Element untersuchen die jeweilige Box auswählt für die die Farbe bestimmt ist.

    Da wir nun die ID der Kategorie haben, können wir anfangen eine neue Farbe für diese Kategorie festzulegen.
    Wir öffnen die erweiterten EInstellungen unseres Designs und fügen folgenden Code ein:

    Code
    .wbbCategory[data-board-id="1"]{ background-color: #94c315 ;}

    Das was im Feld [data-board-id="1"] steht ersetzt ihr bitte durch die ID der entsprechenden Kategorie und was im Feld { background-color: #94c315 ;} steht durch euren Farbcode - auf FileX´s Tipp hin: Flat UI Colors

    Nun haben wir unterschiedliche Farben für die jeweiligen Kategorien:

    Spoiler anzeigen


    Nicht vergessen, ihr müsst das für jedes Forum machen welches sich farblich unterscheiden soll. Falls FileX damit einverstanden ist, zeige ich euch auch wie ihr z.B. das Icon in die entsprechende Farbe ändert.

    Einmal editiert, zuletzt von 25908734 (5. Juli 2015 um 00:18)

    Ich habs zwar im Template anders geregelt, aber so gehts auch.

    Zitat von SNK Kenji

    FileX,
    kannst du auch noch erklären, wie man den Schwarzen Hintergrund zu einem Bild macht?

    Bin zwar nicht FileX habe aber grade Zeit *-*.

    Als erstes müssen wir (falls noch nicht gemacht) einen Pfad für unsere Bilder festlegen.
    [Darstellung - Stile - Stile Auflisten - Stil Bearbeiten - Dateien (runter scroolen)]

    Spoiler anzeigen


    Wenn wir einen Pfad für die Bilder festgelegt haben, müssen wir unser Hintergrundbild in dem entsprechenden Ordner abgelegen (mit Filezilla / WinSCP oder Putty).
    Nachdem dass gemacht ist, müssen wir in die erweiterten Einstellungen des Designs und folgenden Code einfügen:

    Code
    body {
    background-position: top center;
    background-image: url(@{style_image_path}bg.png);
    }
    Spoiler anzeigen


    Wir müssen "bg.png" durch den Dateinamen unseres hinterlegten Bildes ändern.
    !WICHTIG!: Wie ihr auf dem Screenshot sehen könnt müsst ihr dann den alten Code von FileX -

    Code
    body {
    background-color: #161618;
}


    durch den obigen ersetzen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden