1.2 - Das eigene Layout erstellen

10.08.2010 11:26 (zuletzt bearbeitet: 02.04.2014 16:08)
avatar  Patrick
#1 1.2 - Das eigene Layout erstellen
avatar
Technik


Um ein eigenes Layout zu erstellen werden keine Programmierkenntnisse benötigt, ein wenig Farbgefühl hingegen kann nicht schaden Wir zeigen Euch, wie das Board in wenigen Schritten individuell und einfach angepasst werden kann und wo es Inspiration zur Farbgestaltung gibt.


Inhalt



Designvorlagen

Navigieren Sie zu Admin → Layout → Design-Vorlagen, wählen eines der gegebenen Templates durch Anklicken aus und speichern es mit einem Klick auf "Dieses Layout übernehmen". Anhand dieser Vorlage gestalten Sie nun Ihr eigenes Design, um dieses später unter einem eigenen Namen zu sichern. Die Original-Templates werden somit nicht überschrieben






Farben ändern, Hintergrund- und Rahmenfarbe

Gehen Sie jetzt zu Admin → Layout → Farben & Einstellungen. Über diesen Haupt-Menüpunkt nehmen Sie alle Designänderungen vor. Die Bereiche Kopf/Fußzeile, CSS, Position der Werbung etc. werden hierbei nicht verändert, da nur Einstellungen aus dem Menüpunkt "Farben und Einstellungen" als eine Datei exportiert- und wieder in ein Forum importiert werden können.



Info: Je nachdem welches Template Sie ausgewählt haben, unterscheiden sich die Untermenüpunkte bei Admin → Layout → Farben und Einstellungen (Die Menüpunkte sind abhängig von der Anzahl bzw. Art der Variablen, die für die Vorlage erstellt wurden). Im Gaia-Template haben Sie beispielsweise mehr Einstellungsmöglichkeiten (mehr globale Variablen) Ihr Design hinsichtlich Farben, Grafiken, Größen etc. den eigenen Wünschen anzupassen.
---

Klicken Sie auf Admin → Layout → Farben & Einstellungen → Hintergrund- und Rahmenfarbe. Es erscheint eine Auswahl von Farben, die Sie für verschiedene Elemente Ihres Forums ändern können.

Tipp: Öffnen Sie in einem zweiten Fenster oder Tab die Startseite Ihres Forums. Jedes Mal wenn Sie eine Änderung im Admin-Menü vornehmen, können Sie die Start-Seite im 2. Fenster einfach neu laden und müssen das Admin-Menü nicht verlassen.



Wenn Sie auf "Farbe auswählen" klicken, erscheint ein Farbfeld, aus dem Sie ganz einfach Ihre Wunschfarbe auswählen oder den hexadezimalen Farbwert direkt eingeben können. Nach der gewünschten Farbänderung Speichern (ganz unten) nicht vergessen! Erst danach werden Ihre Änderungen übernommen! Sollten Sie die Änderungen in Ihrem Forum nicht gleich sehen, dann drücken Sie STRG+F5, damit die Seite komplett neu geladen wird.

Tipp: Um den Farbcode von anderen Webseiten einfach zu identifizieren, installieren Sie das Firefox Add On ColorZilla. Hier kann mit einer Pipette und einem Klick ganz einfach der Hexadezimal- und RGB-Wert aufgenommen und per Copy und Paste in das Farbfeld im Admin-Menü übertragen werden (Sorry, für den Internet Explorer gibt es dieses Tool leider nicht )



Schrift

Hier können die Schriftart, sowie Farbe, Größe und Abstände der Schriften in Beiträgen, Überschriften, ausgegrautem Text, auf Buttons und Hyperlinks eingestellt werden.


---

Tipp: Achten Sie darauf, dass der Kontrast der Schriftfarbe zum Hintergrund ausreichend groß ist, damit Ihre Schrift gut lesbar ist!



Größen & Werte

Unter Admin → Layout → Farben & Einstellungen → Größen/Werte haben Sie die Möglichkeit, Werte für verschiedene Elemente des Layouts anzugeben. Hier können Sie zum Beispiel festlegen, wie breit Ihr Forum sein soll oder wie groß der Abstand der Themen in der Forum Übersicht zu den Trennlinien ist. Tragen Sie dort den Wert in Pixel ein - nur die Zahl ohne px. Und wie immer: Speichern nicht vergessen!


---

Info: Vermeiden Sie (wenn möglich) bei der Option Bildbreite die in der Bildergalerie angezeigt wird, dass diese Angabe größer als die Breite Ihres Forums ist. Ansonsten kann das Design unfreiwilligerweise verschoben werden. Ist die Box kleiner als die Bildgröße, wird Ihr Bild auf die entsprechende Größe herunterskaliert. Ist die Box größer, wird das Bild in Originalgröße dargestellt und nicht vergrößert.



Grafiken einfügen

Über den Menüpunkt Admin → Layout → Farben & Einstellungen → Grafiken können eigene Icons für beispielsweise "neue Mails", "neuer Beitrag" etc. hochgeladen werden. Wenn neue Dateien ausgewählt wurden, bitte im Anschluss wieder speichern, da sonst die neuen Bilder nicht übernommen werden.





Kalender Hintergrundbilder, Seitenanzeige, Navigation

Unter Admin → Layout → Farben & Einstellungen → Kalender können Sie das Aussehen der Kalender im Forum bestimmen.

Hinweis: Um den Kalender im Forum nutzen zu können, um beispielsweise Events anzuzeigen, muss die Kalenderfunktion aktiv sein. Um diese Funktion zu aktivieren, klicken Sie unter Admin → Extras → Kalender auf "aktivieren". Anschließend erscheint ein Link zum Kalender in der Navigationsleiste Ihres Forums.


---


Über die Option Admin → Layout → Farben & Einstellungen → Hintergrundbilder können Sie Hintergrundgrafiken des Forums und des Body hochladen.

Die Einstellungen über die Option Admin → Layout → Farben & Einstellungen → Seitenanzeige sind dann relevant, wenn Sie ein Topic mit mehren Seiten haben.




---

Im Menüpunkt Admin → Layout → Farben & Einstellungen → Navigation nehmen Sie verschiedene Einstellungen für die Navigation vor. Laden Sie ein neues Admin-Icon hoch, verändern Sie die Farbgebung der Tabs, modifizieren Sie die Größe der Überschriften in der Navigation und vieles mehr!



CSS anhängen

Diese Option ist für Anwender mit CSS-Kenntnissen geeignet. In diesem Feld können alle Foren-Elemente, die nicht über das Admin-Backend erreichbar sind, modifiziert werden. Praktischerweise werden die neu hinzugefügten Stylesheets der originalen CSS-Template-Datei lediglich angehängt und nicht überschrieben. Es erfolgt daher kein tieferer Eingriff in die Vorlage und die Änderungen können problemlos wieder rückgängig gemacht werden.

Admin → Layout → Farben & Einstellungen → CSS, HTML & Co.

ACHTUNG: Nicht verwechseln mit der Option Admin → Layout → CSS! Dort nehmen Sie tiefgreifende Design-Änderungen im Template vor!




Layout speichern, herunterladen und importieren

Unter Admin → Layout → Designvorlagen haben Sie die Möglichkeit Design-Vorlagen, die Sie erstellt haben abzuspeichern, herunterzuladen oder später zu importieren.

So Speichern Sie Ihre Vorlage:
Scrollen Sie nach unten und geben Sie bei "Aktuelles Design als Vorlage abspeichern" einen Namen für Ihr Layout ein.


---

Haben Sie Ihr Design als Vorlage gespeichert, erscheint es oben bei den Design Vorlagen unter "Eigene Vorlagen".
Möchten Sie Ihre Vorlage wieder löschen genügt ein Klick auf das "X" neben der Vorlage.


So laden Sie Ihre Vorlage herunter:
Möchten Sie Ihre Vorlage herunterladen, klicken Sie oben bei "Eigene Vorlagen" neben der gewünschten Vorlage auf Download. Anschließend haben Sie die Möglichkeit einen Speicherort für Ihr Layout festzulegen und die Vorlagen-Datei auf Ihrer Festplatte abzuspeichern.


Info: Das Herunterladen von Design-Vorlagen ist nur möglich, wenn Sie eines der Original-Templates (Standard, Gaia oder ProSilver) verwenden. Haben Sie ein eigenes Template erstellt, ist ein Download nicht möglich.

So importieren Sie Ihre Vorlage
Möchten Sie ihre heruntergeladenen Vorlagen importieren, ist dies ganz einfach unter "Xobor Design Vorlage importieren" möglich. Klicken Sie auf Durchsuchen, wählen die gespeicherte Vorlage aus und klicken auf "Design importieren", um die Vorlage hochzuladen.



---

Damit auch andere Forenbetreiber Ihr Design verwenden können, laden Sie Ihre Vorlage doch in die Xobor-Design-Datenbank hoch! Gehen Sie dazu einfach zur Xobor-Design-Datenbank und klicken dort oben auf "hochladen".

Klicken Sie nun auf "Durchsuchen", um Ihre Design-Vorlage auszuwählen. Geben Sie den Namen der Vorlage, Ihren Namen und eine kurze Beschreibung an und klicken anschließend auf "Vorlage hochladen". Kurz darauf ist Ihr Design in der Datenbank sichtbar.
Wir freuen uns auf Ihre Vorlage!



Farbkombinationen, aber welche?

Mit einfachen Mitteln – und ganz ohne Programmierkenntnisse – können Sie Ihr Forum individuell anpassen. Möchten Sie Ihrer Kreativität auf die Sprünge helfen, gibt es praktische Möglichkeiten, um ansprechende Farbkombinationen für Ihre Design-Vorlage zu finden. Mit der kostenlosen Webanwendung Adobe Kuler beispielsweise ist es kein Problem, Farben zu finden, die gut miteinander harmonieren.

Möchten Sie Farben aus Ihren digitalen Lieblingsbildern übernehmen? Dann Öffnen Sie doch dieses Bild mit dem Browser und wählen die Farben mit dem Firefox Add On ColorZilla (siehe oben) einfach aus. Versuchen Sie doch einmal, Farben von Naturaufnahmen zu verwenden.



Wie Sie sehen, ist es nicht allzu schwer, sein Forum den eigenen Wünschen anzupassen. Alles was man braucht ist Kreativität, Geduld und dieses Tutorial. Wenn Sie mit Ihrem Design sehr zufrieden sind, zögern Sie nicht, es anderen zu zeigen: Laden Sie es hoch in die Xobor-Design-Datenbank! Wir sind sehr gespannt auf Ihr Design!

Ich wünsche viel Erfolg beim Gestalten!

In Zusammenarbeit mit Pamela

Viele Grüße,
Patrick


Technik · Xobor · Miranus GmbH


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!