Iceblue-CSS

Eigener Header

Eigenen Header erstellen / einfügen :

Im Design Iceblue hat der Original-Header die Größe 921 x 104 Pixel.
Der eigene Header muss in der gleichen Größe erstellt werden.

Header anklicken . Mit der Maus auf das Bild. Mit Rechtsklick speichern.
Diesen könnt Ihr nun mit einem Bildbearbeitungs-Programm gestalten.

Einen eigenen Header ......

kann man mit Bildprogramm erstellen
oder auf www.free-picture.de.tl auswählen
oder von Baukasten-Usern erstellen lassen : Hier klicken

Header im Design einfügen :

fertigen Header hochladen bei "Bilder verwalten"
den Haken entfernen im Feld "Bild verkleinern"
sonst wird der Header verkleinert und wiederholt sich oben endlos

Nun habt Ihr 2 Möglichkeiten den Header im Design einzufügen :

Auswählen im Menü

ODER : Einfügen mit CSS

• auf "Design einstellen"
• auf "Erweiterte Einstellungen"
• srcolle nach unten
• dort ist das Feld "Header"
• wähle deinen Header-Namen aus
• speichern
• der neue Header ist im Design
• wird Header oben wiederholt ?
• Header neu hochladen
• Haken raus bei "Bild verkleinern"

Beachte bitte:
Funktioniert nur, wenn im Feld "Text über Design" kein CSS-Code für den Header eingefügt wurde.

• auf "Design einstellen"
• auf "Erweiterte Einstellungen"
• dort ist das Feld "Text über Design"
• sind CSS-Codes vorhanden ?
• suche Klasse td.edit_header_full
• das background-image: url(BILD-URL);
• in Klammer die BILD-URL einfügen
• Beispiel-Code :

td.edit_header_full {
background-color:#xxxxxx;
background-image: url(Bild-URL);
background-repeat: no-repeat; }

Titel im Header entfernen:

- Titel im Headerfeld (Iceblue) = td.headline
- nicht anzeigen mit CSS-Eigenschaft display:none;
- fertiger CSS-Code: td.headline {display:none; }
- einfügen Feld "Text über Design", vor dem -></style>

Headerbild verlinken :

Unser Headerbild ist ein Hintergrundbild in einer Tabellenspalte.
Hintergrundbilder lassen sich nicht verlinken.
Lösung : Wir setzen ein neues DIV-Feld auf unser Headerfeld.
Das neue DIV-Feld bekommt als Inhalt verlinktes Headerbild.

Schritt 1: Eigenschaften des DIV's (Breite + Höhe)

auf "Design einstellen"
auf "Erweiterte Einstellungen"
dort ist das Feld "Text über Design"
CSS-Code einfügen vor eurem --></style>
mit dem Code bekommt das DIV sein Aussehen
die Breite im Code bei width: 921px;
die Höhe im Code bei height: 104px;

div.neuer_header {
  position: absolute;
  left: 50%; /* nicht ändern */
  top: 120px;
  margin-left: -480px;
  width: 921px;
  height: 104px; }

Beachte Bitte:
Dieser Code muss die Breite (width) und Höhe (height) bekommen, die dein Header in deinem Design auch hat. Bei "Iceblue hat der Header die Größe 921 x 104. Im Design Colorfull hat der Header die Größe 1000 x 141 Pixel. Die Zahlen dann bitte in diesem Code korrigieren.

Schritt 2 : Das DIV sichtbar einfügen

• noch können wir das neue Feld nicht sehen.
• es fehlt noch das DIV-Element (mit seinem Inhalt)
• im Feld "Text über Design", nach dem letzten </style>

Im Code die Linkadresse anpassen, wo die Verlinkung hinführen soll.
Die Grafikadresse des Headerbilds einfügen, dort wo Bild-URL steht.
Nun ist das neue DIV mit verlinkten Bild zu sehen.

Schritt 3 : Das neue Feld positionieren

Noch sitzt das neue Feld nicht passend.
Wir müssen nun zwei Zahlen im Code anpassen

mit der Zahl neben top bestimmen wir den Abstand nach oben
je höher die Zahl neben top, desto tiefer platziert ihr das Feld
hier müsst ihr mit verschiedenen Zahlen testen, bis es von oben her passt