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;

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


• mit der Zahl neben margin-left: könnt ihr es nach Links oder Rechts verschieben
• je höher die Minuszahl, desto weiter nach Links platziert Ihr das Feld
• verkleinert Ihr die Minuszahl, verschiebt ihr es nach Rechts
• auch hier müsst Ihr testen, bis es passt


Weil jedes Baukasten-Design eine andere Header-Größe verwendet,
kann ich keine fertigen (passende) Zahlen liefern. Das Anpassen sollte aber
kein großer Aufwand darstellen. Bei Fragen einfach im Gästebuch melden