Baukasten-Design "CSS" :
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
Schritt 1 : entfernen unnötiger Klassen
Wir entfernen zunächst all 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); die Bild-Adresse einfügen.
Das Hintergrundbild sollte ca. 980 x 500 Pixel gross sein
Für dieses Beispiel muss das Design selbst nicht gescrollt werden.
Scrollbar sind alle Felder auf dem Design-Bild.
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" einfügen:
<div id="Hier Klassen-Name"> </div>
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 keinen Header benötigt:
fügt nur ein : #header_container{display:none;}
- Du möchtest das Header-Feld oben ?
- einfügen im Feld "css ohne style-tags"
#header_container { position: absolute; left: 50%; margin-left:-490px; width: 980px; height:70px; background-color:#343434; background-image:url(); 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:url(); = 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:url(); border: 1px solid #FFFFFF; overflow:auto;}
Erklärung:
- top: = Abstand Textfeld von oben
- margin-left: = Abstand Textfeld vom linken Bildschirmrand
- padding:10px; = Inhalt 10 Pixel Abstand zu Seitenrändern
- width: = Breite des Textfelds
- height: = Höhe des Textfelds
- background-color = Hintergrundfarbe Textfeld
- background-image:url(); = 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
Bei background-color: kannst Du 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.
Wer keine rechte Box benötigt:
fügt nur ein : #sidebar_container{display:none;}
- Du möchtest die rechte Box einfügen ?
- 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:url(); = 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
Bei background-color: kannst Du 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; height:400px; border:1px solid #FFFFFF; overflow:auto;} 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-URL_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 #nav_container platzierst Du
mit den Werten top und margin-left
Das overflow:auto; erzeugt eine scrollbare Navi ab 400 Pixel höhe.
Wenn NICHT gewünscht, bei #nav_container löschen:
- height:400px;
- overflow:auto;
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
- Eigene Button einfügen bei "background-image:url(HIER Button-URL);"
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
- background-color = Hintergrundfarbe Counter
- color:#FFFFFF; = Textfarbe des Counters (weiss)
- font-size:13px; = Textgrösse
- border: 1px solid #FFFFFF = Rahmen / Rahmenstärke / Rahmenfarbe
