Erklärung:

von free-picture.de.tl

Hier möchte ich Euch in wenigen Schritten erklären,
wie Ihr das Baukasten-Design "CSS" frei gestalten könnt.
Diese Beschreibung ist nur eine von vielen Möglichkeiten !

- einloggen in die Homepage
- auf "Design einstellen"
- wählt dort das Design "CSS" aus
- Eure Seiten-Inhalte werden übernommen
- Inhalt Eurer "rechten Boxen" werden nicht übernommen
- diesen müsstet Ihr Euch kopieren und im neuen Design einfügen

Die "Klassen" im Design "CSS":

Wir verwenden folgende Klassen des Design "CSS": Bild anklicken zum vergrössern #header_container = Das Header-Feld oben nav_container= Feld der Navigation li.nav_element = Navigations-Links #content = das Textfeld #sidebar_container = 1 rechte Box #counter = Besucherzähler Mit margin-left: und top lässt sich jede "#Klasse" dorthin verschieben, wo Ihr es im Design platziert haben möchtet. Mit width und height könnt Ihr jedes Feld gewünschte Grösse geben.

Schritt 1 : entfernen unnötiger Klassen

Wir entfernen die Klassen, die wir nicht benötigen: - auf "Design einstellen" - auf "Erweiterte Einstellungen" - ganz unten das Feld "css ohne style-tags" - ohne "style-tags" heisst: - kein <style type="text/css"> vor dem CSS-Code - kein </style> am Ende des CSS-Codes - füge das Feld "css ohne style-tags" ein : #extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} Mit #Hier die Klasse {display: none;} entfernen wir Klassen.

Schritt 2 : Linkformatierung

Du kannst mit dieser CSS-Anweisung für alle verlinkten Texte auf Deiner Homepage die Größe und Farbe bestimmen. - füge ein im Feld "css ohne style-tags" - zwischen vorigem Code und diesem Code füge eine Leerzeile ein - das erleichtert Dir zwischen allen Codes die Übersicht a{ color:#4A9AF6; text-decoration: none; font-size:13px;} a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:link { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:active { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:visited { color: #4A9AF6; font-size: 13px; text-decoration: none;} Erklärung: a = Link a:hover = wenn die Maus auf den Link fährt a:link = noch nicht besuchter Link a:active = gerade angeklickter Link a:visited = bereits besuchte Seiten Du kannst gewünschte Farben und Größen im Code ändern / anpassen.

Schritt 3 : Der Hintergrund

- zwischen diesem und vorigem Code eine Leerzeile einfügen - es erleichtert Dir die Übersicht - füge ein im Feld "css ohne style-tags" body { background-color:#000000;} *{ padding: 0; margin: 0; } #Mein_Bild { margin: 0 auto; width: 980px; height:500px; background-image:url(HIER DEINE BILD-URL);} Erklärung: background-color:#000000; = Hintergrundfarbe (hier schwarz) #Mein_Bild = hier fügst Du Dein Hintergrundbild ein Bei background-image:url(HIER Bild-URL); musst du die Bild-Adresse einfügen. Das Hintergrundbild sollte 980 x 500 Pixel gross sein WICHTIG : Die Klasse #Mein_Bild haben wir erfunden Wenn wir Klassen erstellen, die nicht im Baukasten vorkommen, können wir sie erst sehen, wenn wir im Feld "Text über Design" das <div id="Hier Klassen-Name"> </div> einfügen. In das Feld Text über Design" füge noch ein: <div id="Mein_Bild"></div> Dieses muss im Feld ganz oben eingefügt werden. Das Feld "Text über Design" muss mit dem Code beginnen ! Nun kannst Du das Bild für Dein Design sehen.

Schritt 4 : Header (oben) platzieren

Im Design "CSS" hat der Header die Klasse #header_container. Wer kein Header-Feld benötigt : nur Einfügen : #header_container {display:none;} Und weiter mit Schritt 5 ! - wenn Du das Header-Feld einfügen möchtest: - füge ein im Feld "css ohne style-tags" #header_container { position: absolute; left: 50%; margin-left:-490px; width: 980px; height:70px; background-color:#343434; background-image: none; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;} Erklärung: - margin-left: = Abstand des Headers vom linken Rand - width: = Breite des Headers - height: = Höhe des Headers - background-color = Hintergrundfarbe Header - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügen möchtest, gleiche Breite wie der Header hat ! - color:#000000; = Textfarbe im Header, wenn Text hinein soll - font-size:13px; = Textgrösse - border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe

Schritt 5 : Textfeld platzieren

Im Design "CSS" hat das Textfeld die Klasse #content. - füge ein im Feld "css ohne style-tags" #content { position: absolute; left: 50%; top: 140px; margin-left:-320px; width: 590px; height: 380px; padding:10px; color: #F2F2F2; font-size:13px; background-color:#343434; background-image: none; border: 1px solid #FFFFFF; overflow:auto;} Erklärung: - top: = Abstand Text-Feld vom oben - margin-left: = Abstand Textfeldes vom linken Rand - padding:10px; = Inhalt 10 Pixel Abstand zu Seitenränder - width: = Breite des Textfelds - height: = Höhe des Textfelds - background-color = Hintergrundfarbe Textfeld - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügen möchtest, gleiche Breite wie das Textfeld hat ! - color:#000000; = Textfarbe im Textfeld - font-size:13px; = Textgrösse - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Textfeld Du kannst bei background-color: statt Farbe auch transparent einfügen, damit das Hintergrundbild zu sehen ist !

Schritt 6 : Einfügen der "rechten Box"

Im Design "CSS" hat die "Box" die Klasse #sidebar_container. - füge ein im Feld "css ohne style-tags" #sidebar_container{ position: absolute; left: 50%; top:140px; margin-left: 300px; width: 190px; height: 400px; background-color:#343434; background-image:url; border:1px solid #FFFFFF; color:#000000; overflow:auto;} Erklärung: - top: = Abstand der Box von oben - margin-left: = Abstand Box vom linken Rand - width: = Breite der Box - height: = Höhe der Box - background-color = Hintergrundfarbe Box - background-image: none; = Hintergrundbild (URL) in Klammer einfügen - wenn Du ein Bild einfügst, gleiche Breite wie Deine Box bekommt - color:#000000; = Textfarbe in der Box - font-size:13px; = Textgrösse in rechter Box - border: 1px solid #C9C9C9 = Rahmen / Rahmenstärke / Rahmenfarbe - overflow:auto;} = erzeugt ein scrollbares Feld Du kannst bei background-color: statt Farbe auch transparent einfügen, damit das Hintergrundbild zu sehen ist !

Schritt 7 : Die Navigation

Im Design "CSS" hat die "Navi" die Klasse #nav_container die Navi-Buttons die Klasse li.nav_element a der "Hover-Effekt" die Klasse li.nav_element a:hover - füge ein im Feld "css ohne style-tags" #nav_container{ position: absolute; left: 50%; top:140px; margin-left: -490px; width: 160px; border:1px solid #FFFFFF;} ul#nav{ width: 130px; padding: 0px; margin: 0px;} li.nav_element{ list-style-type: none; position: relative; padding:5px; width: 115px;} li.nav_element a{ display: block; width: 115px; padding:4px; font-weight: bold; text-decoration: none; text-align: left; color:#F2F2F2; background-color:#343434; background-image:url(HIER BUTTON-ULR_1); border: 2px solid #000000;} li.nav_element a:hover{ color: #000000; background-color:#C9C9C9; background-image:url(HIER BUTTON-URL_2);} Das Navi-Feld platzierst Du bei #nav_container mit den Werten top und margin-left Die "Navi-Buttons" kannst Du anpassen bei: - #li.nav_element a - und bei #li.nav_element a:hover - :hover = Wenn die Maus über einen Button fährt Bei color:#000000; kannst Du Textfarbe im Button ändern. Wenn Deine "Navi-Buttons" breiter sollen, dann bitte das width (Breite) auch ändern bei : - #nav_container - ul#nav - li.nav_element - li.nav_element a

Schritt 8 : Der Besucherzähler

Im Design "CSS" hat der Besucherzähler die Klasse #counter. Um den Counter sehen zu können, bei "Extras editieren" den Counter aktivieren. Wähle dort bitte aus : "Hits NICHT anzeigen" Beachte bitte: Wenn Du im Extra "Counter" längeren Text vor und nach dem Zähler einfügst, musst du hier im Code das width (Breite) eventuell erhöhen, damit der ganze Text in 1 Zeile passt. - zwischen diesem und vorigem Code eine Leerzeile einfügen - es erleichtert Dir die Übersicht - füge ein im Feld "css ohne style-tags" #counter { position: absolute; left: 50%; top:30px; margin-left: 300px; width: 150px; height:20px; color:#FFFFFF; font-size:13px; border: 1px solid #FFFFFF;} Erklärung: - top: = Abstand Counter von oben - margin-left: = Abstand des Counters vom linken Rand - width: = Breite des Counters - height: = Höhe des Counters - color:#FFFFFF; = Textfarbe des Counters (weiss) - font-size:13px; = Textgrösse - border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe