iceblue-test
  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 ......



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>

<div class="neuer_header">
<a href="http://meineSeite.de.tl"><img src="BILD-URL" alt="header" border="0"></a>
</div>


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





 
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV