tutorials - CSS-Code Iceblue-ausführlich

/*Das Design Iceblue - die wichtigsten Befehle einzeln erklärt!*/

/*Code-Anfang*/

<!--

Die CSS Anweisungen müssen in eine style - Anweisung eingebunden werden - das ist der Anfang:

/* Design verbreitern */

table.edit_main_table{width: 100% !important;}

td.edit_main_tr{width: 100% !important;}

table.edit_second_table{width: 100% !important;}

td.edit_header_full{width: 100% !important;}

td.edit_header_full table{width: 100% !important;}

table.edit_third_table{width: 100% !important;}

td.edit_navi_headbg{width: 15% !important;}

table.edit_rechts_tabelle{width: 100% !important;}

td.edit_rechts_bottom{width: 15% !important;}

td.edit_rechts_cbg{width:100%;}

Mit diesem Code wird das Design verbreitert, so dass rechts keine Lücke mehr frei bleibt. Die gelben Werte können angepasst werden.

/* Link und Textformatierung */

p, div, b{color: #FFFFFF;}

td.nav a{color:#FFFFFF;font-size: 12px;text-decoration: none;}

a:hover {color: #FF0000;font-size: 12px;text-decoration: none;}

a: link {color: #FF0000;font-size: 12px;text-decoration: none;}

a:active {color: #0000FF;font-size: 12px;text-decoration: none;}

a:visited {color: #FFCC00;font-size: 12px;text-decoration: none;}

p:	Textabsatz
`<div>`	leitet ein allgemeines Block-Element ein, in das mehrere andere Block-Elemente einschlossen werden können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden `</div>` steht, wird als Teil des Bereichs interpretiert.
b:	Fettschrift
a:hover	für Elemente, während der Anwender mit der Maus darüber fährt
a: link	für Verweise zu noch nicht besuchten Seiten
a:active	gibt an, wie ein Link gestaltet ist, wenn man nach dem Anklicken auf die Seite zurückkehrt.
a:visited	Die Pseudo-Klasse `:visited` bestimmt das Aussehen von besuchten Hyperlinks. Um Besuchern der Seiten zu zeigen, welche Links sie/ bereits besucht haben und welche nicht.
{	die CSS -Befehle werden immer in geschwungene Klammern gefügt
color:	Farbbefehl
#000000	Color Hex-Code
;font-size:	Schriftgröße
12px	Größe in Pixel
;text-decoration:	keine Textdkoration(z.B. Unterstreichung)
none;	keine
}	der Befehl wird geschlossen

/* Titel der Homepage entfernen */
/* Titel der Homepage entfernen */ td.headline{visibility: hidden;}
td.headline	Klassenname für die Überschrift
{visibility:	entscheidet, ob ein Element sichtbar ist oder unsichtbar. Ein unsichtbares Element ist vollständig transparent, belegt aber weiterhin Platz auf der Seite und andere Elemente können den Raum nicht einnehmen
hidden;}	bestimmt, dass ein Element auf der Seite nicht sichtbar ist Man könnte auch bei Einstellungen ein Leerzeichen mit der Tastatur eingeben, aber dann steht auch nichts mehr in der Titelleiste des Browsers und die Homepage hat keinen Titel mehr, was ganz schlecht für die Suchmaschinen ist.

/* Hintergrund hinter Design */
/* Hintergrund hinter Design */ body{background-image: none;background-color: #000000;color: #FFFFFF !important;}
body	Klassenname für den Hintergrund
{background-image:	Befehl für das Hintergrundbild
url(BILDLINK);	hier kommt der Bildlink rein, falls ein Bild als Hintergrund auf die Seite soll
background-color:	Hintergrundfarbe
#000000;	Hex-Farb-Codes für den Hintergrund
color:	Schriftfarbe
#FFFFFF	Hex-Farb-Codes für die Schrift
!important;}	Auf manchen Systemen mit einer solchen Einstellung kann dies zu fatalen Fehlern in der Darstellung der Seite im Browser führen. Durch den Zusatz ! important wird dies verhindert, da die Styledefinition von höherer Wichtigkeit ist, als die Angabe irgendeiner Standardschriftart.

/* Header fixiert und zentriert*/

td.edit_header_full{width: 100% !important;background-repeat:no-repeat;background-position:center center;background-image: url(http://BILDLINK des Headers);}

td.edit_header_full	Klassenname für den Header - über dem Design
{width: 100%	width bestimmt die Breite eines Elements. in dem Fall 100%
!important;	Wichtigkeit
background-repeat:no-repeat;	Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt über den gesamten zur Verfügung stehenden Raum wiederholt. Durch background-repeat:no-repeat; erzwingen wir jedoch ein anderes Verhalten - der Header wiederholt sich nicht.
background-position:center center;	center center; mittig positioniert Hintergrundgrafik
background-image: url	Befehl für das Hintergrundbild
(http://BILDLINK des Headers);}	Hier kommt der Bildlink des Headers hinein

/* Navigation*/

td.nav_heading{color: #FFFFFF;background-image: url(http://BILDLINK des Balkens);}

td.nav{text-decoration: none;color: #FFFFFFF;width: 185px;height: 33px;background-image: url(http://BILDLINK des Buttons);}

td.nav:hover{color: #000000;width: 185px;height: 40px;background-image: url(http://BILDLINK des Buttons);}

td.edit_navi_headbg{margin: 0px;padding: 0px;background-image: none;background-color: #FFFFFF;width: 185px;background-repeat: repeat-y;}

td.edit_below_nav{visibility: hidden;width: 185px;}

td.edit_below_nav img{visibility: hidden;width: 1px;}

td.nav_heading{width: 89px;height: 80px;background-image: url(http://Bild über Navigation.jpg);background-color: #FFFFFFF;padding-top: 0px;font-weight: bold;font-size: 15px;text-decoration: none;}

td.edit_navi_headbg table{width: 185px;}

.menu{width: 185px;color: #000000 !important;font-weight: bold;padding-left: 35px;font-size: 12px;}

.menu a{color: #000000;font-weight: bold;padding-left: 35px;text-decoration: none;font-size: 12px;}

td.nav_heading{color: #FFFFFF;background-image: url(http://BILDLINK des Balkens);}	Klassenname für den Balken über der Navigation{color: Farbe der Schrift; background-image: url(Bildlink des Balkens);}
td.nav{text-decoration: none;color: #FFFFFFF;width: 185px;height: 33px;background-image: url(http://BILDLINK des Buttons);}	Klassenname für den Navigations-Button{text-decoration: none; keine Textdkoration(z.B. Unterstreichung)color: Farbe der Schrift;width:(Breite) 185px;height:(Höhe) 33px; des Buttons background-image: url(Bildlink des Buttons);}= der sichtbare Button oben
td.nav:hover{color: #000000;width: 185px;height: 40px;background-image: url(http://BILDLINK des Buttons);}	Klassenname für den Navigations-Button:hover(OnMouse-Over-Effek){text-decoration: none; keine Textdkoration(z.B. Unterstreichung)color: Farbe der Schrift;width:(Breite) 185px;height:(Höhe) 33px; des Buttons background-image: url(Bildlink des Buttons);}= der Button der sichtbar wird, wenn man mit der Mouse über den oberen Button fährt
td.nav a{color: #000000;font-weight: bold;padding-left: 35px;text-decoration: none;font-size: 12px;}	color : Schriftfarbe; font-weight:Schriftgewicht; padding-left: Abstand zum linken Rand; text-decoration: Textdekoration; font-size: Schriftgröße;
td.edit_navi_headbg{background-image: none;background-color: #FFFFFF;width: 185px;background-repeat: repeat-y;}	Klassenname für den Hintergrund der Navigation
td.edit_below_nav{visibility: hidden;}	Klassenname für das Bild unter der Navigation

/* Schrift im Titel und in den Links der Navigation mit Rand und Hintergrundbild*/

/* Schrift im Titel der Navigation*/

td.nav_heading{color: #000000;}

Klassenname für den Balken über der Navigation - color : Schriftfarbe

/* Schrift und Hintergrund im Titel der Navigation*/

td.nav_heading{color: #000000;background-image: none;background-color: #FFFFFF;}

s.o. und background-color : Hintergrundfarbe

/* Schrift und Hintergrund im Titel der Navigation mit Rand*/

td.nav_heading{color: #000000;background-image: none;background-color: #FFFFFF;border: 1px solid #000000;}

s.o. und border: Rahmen 1px solid 1 Pixel breit und normale Linie und die Farbe des Rahmens

/* Schrift und Hintergrund im Titel der Navigation mit Rand und Hintergrundbild*/

td.nav_heading{color: #000000;background-image: url(http://Adresse zum Bild);background-color: #FFFFFF;border: 1px solid #000000;}

s.o. und background-image: url(http://Adresse zum Bild) Link zum Balken, der den original Balken überschreibt.

/* Schrift der Navigation-Links*/

td.nav a{color: #0000000;}

Klassenname der Navigation a = Schrift color : Schriftfarbe

/* Schrift und Hintergrund der Navigation*/

td.nav{background-image: none;background-color: #FFFFFF;}

td.nav a{color: #0000000;}

s.o. und background-color : Hintergrundfarbe

/* Schrift und Hintergrund der Navigation mit Rand*/

td.nav{background-image: none;background-color: #FFFFFF;border: 1px solid #000000;}

td.nav a{color: #000000;}

s.o. und border: Rahmen 1px solid 1 Pixel breit und normale Linie und die Farbe des Rahmens

/* Schrift und Hintergrund der Navigation mit Rand und Hintergrundbild*/

td.nav{background-image: url(http://Adresse zum Bild);background-color: #FFFFFF;border: 1px solid #000000;}
td.nav a{color: #000000;}

s.o. und background-image: url(http://Adresse zum Bild) Link zum Button, der den original Button überschreibt.

/* Textfeld - Content*/

/* Textfeld Link-Formatierung*/

td.edit_content a{color:#000000;font-size: 12px;text-decoration: none;}

td.edit_content a:hover {color: ##FF0000;font-size: 12px;text-decoration: none;}

Klassenname für den Textbereich {text-decoration: none; keine Textdkoration (z.B. Unterstreichung) color: Farbe der Schrift; : :hover wenn die Maus über den Textlink fährt - wird diese Schriftfarbe angezeigt - in dem Beispiel rot

/* Textfeld Überschrift*/

td.edit_content_top{height: 25px;background-image: none;background-color: #FFFFFF;background-repeat: no-repeat;background-position: top -5px;}

td.headline2{visibility:hidden;}

Klassenname für den Balken über dem Textbereich - height: Höhe des Balkens - background-color: Farbe des Balkens - background-repeat: no-repeat; Bild des Balkens wiederholt sich nicht - background-position Position des Balkens - top von oben - 5 Pixel : 5 Pixel weiter runter td.headline2 Klassenname für die Überschrift{visibility:hidden;} wird nicht angezeigt - man kann die Überschrift auch in die Mitte setzen: td.headline2{text-align: center;}oder mit {color: ##FF0000;font-size: 12px;text-decoration: none;} Schriftfarbe und Schriftgröße definieren

/* Textfeld Hintergrund*/

td.edit_content {background-image: none;background-color: #FFFFFF;}

Klassenname für den Textbereich - background-color: ändert die Hintergrundfarbe des Textfeldes

/* Textfeld Unterzeile*/

td.edit_content_bottom{background-image: none;background-color: #FFFFFF;}

td.edit_content_bottom2{background-image: none;background-color: #FFFFFF;text-align: left;}

Klassenname für den kleinen Textbereich unter dem Content - background-color: ändert die Hintergrundfarbe des Textfeldes

Klassenname für den Balken unter dem Textbereich - background-color: Farbe des Balkens - man kann die Schrift auch nach links setzen: text-align: left; oder mit {color: ##FF0000;font-size: 12px;text-decoration: none;} Schriftfarbe und Schriftgröße definieren

/* Textfeld Feld darunter*/

td.edit_rechts_cbg{margin: 0px;background-image: url(URL);background-color: #FFFFFF;}

Klassenname für das Feld unter dem Content - background-color: ändert die Hintergrundfarbe des Feldes. Mit margin kann zusätzlich noch der Abstand des Kastens zum restlichen Fließtext definiert werden. Hier niemals: {visibility:hidden;}, dann ist das Textfeld darüber auch weg

/* Rechte Boxen*/

/* Boxen Überschrift*/

td.sidebar_heading{background-image: none;background-color: #FFFFFF;border-bottom: 0px double #000000;}

Klassenname für den Balken über den Boxen - background-color: ändert die Farbe des Balkens - border-bottom: rahmen unten - 0px - also keinen.

/* Boxen Schrift und Hintergrund*/

td.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: none;background-color: #FFFFFF;color: #000000;font-weight: bold;}

Klassenname für die Boxen - background-color: ändert die Hintergrundfarbe in den Boxen - color: Farbe der Schrift; font-weight - Schrftgewicht - bold - Fettschrift

/* Boxen Unterzeile*/

td.edit_rb_footer{background-image: none;background-color: #FFFFFF;border-bottom: 0px solid #000000;}

Klassenname für den Balken unter den Boxen - background-color: ändert die Farbe des Balkens - border-bottom: rahmen unten - 0px - also keinen.

/* Boxen Hintergrund*/

td.edit_rechts_bottom{background-image: none;background-color: #FFFFFF;}

Klassenname für den Hintergrund hinter den Boxen - background-color: ändert die Hintergrundfarbe des Feldes

/* Rechts neben den Boxen*/

td.edit_rechts_sbg{background-image: none;width: 0px;}

Klassenname für den Balken neben den Boxen - so verschwindet er

/*Code-Ende*/

-->

</style>

Die CSS Anweisungen müssen in eine style - Anweisung eingebunden werden (siehe Anfang) - hier wird die Style-Anweisung geschlossen.

Rot sind alle CSS-Befehle

Alle Farb- Hex- Codes sind gelb gekennzeichnet und können an das eigene Design angepasst werden - Hex-Codes sind hier: Color-Codes

Weinrot sind alle Bilder-Links die eingesetzt werden können.

Viel Spaß beim Ausprobieren und umbauen oder Anpassen der einzelnen CSS-Codes!