Eigenes Iceblue Design erstellen
In diesem Tutorial lernst du, wie man ein eigenes Design erstellt.
Im Homepage-Baukasten gibt es sogenannte Klassen oder - verständlicher gesagt - Elemente bzw. Bereiche. Diese Klassen werden mit CSS Befehlen im Feld "Text über dem Design" (natürlich bei dem Design Iceblue) definiert bzw. verändert.
» Vor die Klassen wird bei dem Design Iceblue ein "td." gesetzt (außer body)
» Der Code wird mit einem "style type="text/css"" eingeleitet
» Der Code wird mit einem "/style" beendet.
Das Prinzip sieht folgendermaßen aus:
Die folgenden Codes gehören in das Feld "Text über dem Design" (Design einstellen » Erweitere Einstellung » Text über dem Design)
Zuerst leiten wir den Code ein.
Nun platzieren wir die Werbung sowie das Design mittig. Das /* Titel */ hat nichts zu bedeuten. Es dient zur Übersicht des Codes.
Nun legen wir den Hintergrund (background-color) fest. Wir benutzen dazu einen einfachen Grauton (#F3F3F3).
In diesem Schritt legen wir den Header fest. Der Header hat die Maße 921x104 Pixel. Wir haben einen oben abgerundeten Header erstellt (background-image). Auserdem definieren wir die Schirftart (font-family) sowie die Farbe (color) des Header.
Nun machen wir den Hintergrund, der hinter der Navigation steckt, unsichtbar.
Als nächstes definieren wir den Balken über der Navigation. Wir geben ihm eine Höhe von 33 Pixel (height), legen die Schriftarten (font-family), eine Schriftgröße von 14 Pixel (font-size), die Schriftfarbe (color), die Textausrichtung (text-algin) und die Grafik (background-image) fest.
Nun geben wir den Navigationbuttons eine Grafik (background-image) und der Schrift eine linke Textausrichtung (text-algin). Auserdem legen wir einen Hover Button und einen Button für die aktuell besuchte Seite fest (background-image). Zusätzlich entfernen wir ein Bild unter der Navigation (display: none).
Jetzt geben wir dem Balken über dem Textfeld eine Höhe (height) und eine Grafik (background-image). Zusätzlich geben wir dem Seitentitel, der im Balken über dem Textfeld liegt, eine Schriftart (font-family), eine Größe (font-size), eine Farbe (color) und eine Textausrichtung (text-algin).
Nun definieren wir das Textfeld. Wir legen einen Abstand von oben (padding-top) und einen Abstand von unten (padding-bottom) fest und geben dem Textfeld eine Grafik (background-image), die sich nach unten wiederholt (repeat-y(y-Achse)). Auserdem legen wir mit der Klasse "td" die Schriftart (font-family), Schriftgröße (font-size), Farbe (color) und Textausrichtung (text-algin) fest. Als nächstes definieren wir die Links, die besuchten Links und die Hoverlinks. Wir geben allen drei eine Schriftart (font-family), Schriftgröße (font-size), Farbe (color), Textausrichtung (text-algin) und wir legen fest, dass es keine Textdekoration geben soll (text-decoration).
Zunächst machen wir den Abstand links und rechts im Textfeld unsichtbar (visibility).
In diesem Schritt geben wir dem Balken unter dem Textfeld eine Höhe (height) und eine Grafik (background-image). Auserdem entfernen wir den zweiten Balken, in dem sich auch der Besucherzähler befindet, unter dem Textfeld (display: none)
Mit dem folgenden Code entfernen wir die Grafik hinter bzw. unter dem Textfeld und die Grafik rechts im Design.
Wir entfernen die Grafik rechts im Design.
Jetzt geben wir dem Balken über der rechten Box/über den rechten Boxen eine Höhe (height), eine Schriftart (font-family), eine Schriftgröße (font-size), eine Farbe (color), eine Textausrichtung (text-algin) und eine Grafik (background-information).
Nun legen wir bei allen rechten Boxen die Textausrichtung (text-algin), die Farbe (color), die Grafik (background-image), Wiederholung der Hintergrundgrafiken nach unten (repeat-y) und einen Rahmen unten mit der Dicke von einem Pixel in der Farbe grau (border-bottom: 1px solid #CCCCCC).
In diesem Schritt verstecken wir die Grafiken unter den rechten Boxen (visibility). Dadurch kriegen wir Abstände zwischen den Boxen.
Wir machen die Grafiken hinter bzw. unter den rechten Boxen unsichtbar.
Zum Schluss beenden wir den Code. Keine Codes nach dem /style.