0. Inhaltverzeichnis -------------------- 1. Intro 2. Wie Sie am besten anfangen 2.1. Allgemeine Farbeinstellungen ----- ----- ----- ----- ----- 1. Intro -------- Ich moechte Ihnen hier zeigen, wie Sie das Design Schritt-Fuer-Schritt an Ihre Wuensche angepasst bekommen. Dann gebe ich Ihnen eine Referenz, wo Sie nachvollziehen koennen, wo fuer welche CSS-Klasse gedacht ist. Sie sollten allerdings beispielsweise wissen, was eine Klasse ist. Sollten Sie dies nicht wissen, geben Sie einfach bei einer Suchmaschine Ihrer Wahl das Suchwort "CSS-Klasse" ein. Sie finden dann genuegend Seiten, wo Sie sich informieren koennen. Oder rufen Sie auch die (wohl?) bekannteste HTML-Dokumentation im Netz auf: http://www.selfhtml.org ----- ----- ----- ----- ----- 2. Wie Sie am besten anfangen ----------------------------- Die Haupt-CSS-Datei general.css mag auf dem ersten Blick sehr gross und komplex aussehen. Lassen Sie sich davon nicht abschrecken! Um diese wird es sich jetzt permanent drehen. Sie koennen diese also in einem zweiten Editor (WORDPAD.EXE oder WRITE.EXE reicht voellig aus!) oeffnen und dann zwischen dieser Anleitung und der Datei hin und her wechsel (Windows: ALT-TAB!). ----- ----- ----- ----- ----- 2.1. Allgemeine Farbeinstellungen --------------------------------- Ich fange als erstes mit dem generellen Aussehen (Body, Rumpf) an. Diese Angaben sitzen auch passenderweise am Anfang der Datei. Auszug aus der orginalen general.css: :----------------------------------: body { background-color : #F4F9BE; color : #000000; font-family : Arial, Geneva, Helvetica, sans-serif; font-size : 12px; scrollbar-base-color : #E9E4AE; scrollbar-face-color : #CDEFCD; scrollbar-highlight-color : #F4F9BE; scrollbar-shadow-color : #CDEFCD; scrollbar-3dlight-color : #DDDDDD; scrollbar-arrow-color : #000000; scrollbar-track-color : #CCEFCC; scrollbar-darkshadow-color : #999999; margin : 0px; margin-left : 0px; margin-right : 0px; margin-top : 0px; margin-bottom : 0px; } :----------------------------------: Bis hier hin erstmal! Die ersten 4 Zeilen (lassen Sie dabei "body {" und alle spaeteren Namen dabei ausser acht) geben die Hintergrundfarbe, Textfarbe, Schriftfamilie und die Textgroesse an. Der naechste Block widmet sich den Farben des Rollbalkes vom Browser. Und der letzte 5-Zeilen-Block stellt den Abstand zwischen den Elementen ein. Dies ist aber nur eine allgemeine Einstellung. Sie koennen spaeter auch Feineinstellungen vornehmen, indem Sie solch Zeilen fuer die anderen Klassen verwenden. Nun geht es mit den allgemeinen Tabellen-Einstellungen weiter: Auszug aus der originalen general.css: :----------------------------------: table { table-layout : auto; border-spacing : 0px; overflow : auto; } :----------------------------------: Was diese Einstellungen bewirken, koennen Sie beispielsweise in der bekannten Dokumentation "SelfHTML" (http://www.selfhtml.org) nachlesen. Weiter geht es mit dem Aussehen der Links: Auszug aus der originalen general.css: :----------------------------------: A { font-style : normal; font-family : Arial, Geneva, Helvetica, sans-serif; text-decoration : none; } A:link { color : #2e51a9; } A:visited { color : #AA0044; } A:active { color : #2e51a9; background-color : transparent; } A:hover { color : #AA0044; background-color : transparent; text-decoration : underline overline; } :----------------------------------: Hier habe ich gleich 5 Klassen auf einmal genommen, damit diese Dokumentation kuerzer ausfaellt. In der ersten Klasse stellen Sie allgemeine Farbeinstellungen ein; die naechsten Klassen stellen folgendes ein: - Allgemeine Linkfarbe - Linkfarbe fuer bereits besuchte Links - Linkfarbe fuer angeklickte Links - Linkfarbe fuer Hover (Maus schwebt ueber Link, es wurde aber noch nicht geklickt) Ich mache gleich weiter mit den allgemeinen Einstellungen um Formular- Elemente. Hier habe ich gleich einiges zusammengefasst: Auszug aus der originalen general.css: :----------------------------------: input, textarea, select, option { color : #AA0044; background-color : #EEFFEE; border-color : #BBBBBB; text-decoration : none; } :----------------------------------: Diese Klasse fasst - wie bereits gesagt - einige HTML-Elemente zusammen: - Eingabefelder oder Buttons (input) - Texteingabefelder (textarea) - Auswahlmenues (select) - Auswahloptionen (option) Damit ist der erste Teile "Allgemeine Farbeinstellungen abgeschlossen! Laden Sie jetzt mal die geaenderte general.css auf Ihren Webserver in das css- Verzeichnis hoch! Koennen Sie schon erahnen, wie Ihre Seite nun aussieht? Richtig! Etwas "bunt durcheinander". Das macht erstmal soweit nichts, denn wir sind ja noch nicht fertig mit Umdesignen. Nun geht es um etwas feinere Einstellungen... ----- ----- ----- ----- ----- 2.2. Detailelemente: Buttons, Auflistungen usw. ----------------------------------------------- Dieses Thema wird jetzt sehr lang, da alle weiteren Klassen behandelt werden. Wir machen aber mal zwischendurch eine Pause, wo Sie sich dann Ihre Arbeit im Browser ansehen koennen und nochmals nachkorregieren koennen. Sie werden also - der Wahrscheinlickeit nach - nicht den Ueberblick verlieren. Auch hier gehen wir wieder Schritt fuer Schritt vor, so dass Sie in der general.css einfach weiter nach unten "wandern" brauchen. Und los geht es mit den Absende- und Zuruecksetzen-Buttons: Auszug aus der originalen general.css: :----------------------------------: .admin_reset, .guest_reset, .member_reset { border-style : groove; border : solid 1px #009900; color : #AA0044; } .admin_submit, .guest_submit, .member_submit { color : #AA0044; border-color : #009900; } .admin_submit_reject { border-style : groove; color : #881111; border-color : #009900; } :----------------------------------: Ich habe hier gleich 3 Klassen auf einmal genommen: - Zuruecksetzen-Buttons (alle drei Menues gemeinsam) - Absendebuttons in allen drei Menues - Im Adminbereich: Button fuer Mailbuchung ablehnen Und weiter geht's mit den Auflisten-Elementen: Auszug aus der originalen general.css: :----------------------------------: ul, ol { margin-top : 0px; margin-bottom : 0px; } :----------------------------------: Nicht-nummerierte und nummerierte Listen werden hiermit eingestellt. Meine Angaben stellen den Abstand zu anderen Objekten auf 0 Pixel ein. Und weiter geht es mit Klassen fuer auftretende Laufzeitfehler: Auszug aus der originalen general.css: :----------------------------------: .runtime { color : #118811; background-color : #DDEEDD; font-family : Arial, Geneva, Helvetica, sans-serif; } .runtime.fatal { color : #00AA00; } .runtime.fatalcontent { font-size : 20px; } :----------------------------------: Die erste Klasse stellt allgemeine Dinge, wie Hintergrund- und Vordergrund- farben, sowie die Schriftfamilie ein. Das letztere ist eigentlich nicht noetig. Die naechste Klasse stellt die Farbeinstellung fuer Fehlermeldungen ein (SQL-Fehler meistens) und letzte stellt die Schriftgroesse fuer alle uebrigen Meldungen (Titel leider auch) ein. Hier muss ich dringenst etwas aendern. Aber dieser Code-Teil ist auch sehr alt und kommt aus meinen ersten Schritten mit diesem Mailtausch-Script. Weiter geht es mit dem Admin-Bereich: Auszug aus der originalen general.css: :----------------------------------: .admin_fatal { font-size : 18px; color : #00AA00; } .admin { color : #118811; background-color : #DDEEDD; font-family : Arial, Geneva, Helvetica, sans-serif; } .admin_note { color : #FF0000; font-size : 12px; } .admin_edit, .member_confirm { background-color : #eeffbc; } :----------------------------------: Hier hat sich - wegen Farbgleichheit, koennen Sie also auch trennen - gleich eine CSS-Klasse fuer den Mitgliederbereich eingeschlichen: "member_confirm" stellt die Tabelle fuer das Zeitframe beim Bestaetigen von Mails ein. Der Reset widmet sich ganz und alleine dem Admin-Bereich: 1.: Fehlermeldungen fuer den Admin (Modul gesperrt, etc.) und Fehlermeldungen im Admin-Bereich beim Editieren von Gastmenue- und Adminmenue-Punkten 2.: Allgemeine Einstellungen, wie Farben und Schriftartfamilie 3.: Hinweise fuer den Admin ("Einstellungen gespeichert" beispielsweise) 4.: Farbeinstellung beim Editieren aller drei Menue-Systeme Wieso auch immer, aber als naechstes hat sich eine Klasse fuer den Mitglieds- bereich eingeschoben: Auszug aus der originalen general.css: :----------------------------------: .member_banner { background-color : #eeffbc; width : 488px; } :----------------------------------: Ahnen Sie schon, was diese Klasse soll? Ich schaetze mal, Sie haben auf die Refbanner getippt. Hiemit werden aber die Einstellungen fuer Ihre Werbebanner im Zeitframe beim Bestaetigen von Mails vorgenommen. Nicht dass Sie dies jetzt missverstehen: Es werden nur Desgin-Angaben fuer die Tabelle um den Banner eingestellt, nicht der Banner selber wird geaendert! ;-) Und weiter geht es mit Admin-Klassen: Auszug aus der originalen general.css: :----------------------------------: .admin_error { background-color : #eeffbc; color : #00AA00; font-size : 10px; } .admin_select, .guest_select, .member_select { border : dotted 1px; border-color : #009900; background-color : #EEFFEE; } .admin.register, .admin_desc_header, .admin_done, .admin_title, .member_title2, .guest_title2 { background-color : #ddeedd; color : #009900; } :----------------------------------: .member_done, .guest_done { color : #009900; } .member_misc { background-color : #DDEEDD; } .admin_misc, .member_misc { color : #000000; } .admin_done2 { color : #AA0044; } .admin_green, .admin_no { color : #009900; } .admin_welcome { background-color : #DDEEDD; color : #009900; vertical-align : middle; font-size : 18px; height : 50px; } .admin_header { background-color : #eeffbc; } .admin_menu { background-color : #DDEEDD; color : #000077; width : 230px; } .admin_logout { background-color : #AAFFAA; color : #00AA00; } .admin_desc_cont, .admin_table, .member_table { background-color : #eeffbc; } .admin_editmenu { min-width : 500px; max-width : 90%; } .admin_form_header { text-align : center; height : 36px; background-color : #eeffbc; color : #009900; } .member_header { text-align : center; height : 28px; background-color : #eeffbc; } .admin_failed, .guest_failed, .member_failed, .member_note { color : #00AA00; } .member_note_bg { background-color : #eeffbc; } .member_data { background-color : #eeffbc; color : #009900; height : 20px; } .admin_header_b1 { border-bottom : 1px solid #AA0044; background-color : #ddeedd; height : 22px; } .admin_snote { font-size : 12px; } .admin_normal, .guest_normal, .member_normal { border-style : solid; border : dotted 1px; border-color : #009900; } .member_stats { vertical-align : top; font-weight : bold; height : 23px; font-size : 16px; border-style : none; border : 0px; background : #DDEEDD; color : #000000; margin-top : -4px; margin-bottom : 1px; cursor : default; } .normal { border-style : groove; } .member_main { background-color : #DDEEDD; } .guest_title, .member_title { color : #009900; vertical-align : middle; background-color : #DDEEDD; height : 60px; } .guest_login_header { color : #009900; vertical-align : middle; background-color : #DDEEDD; } .guest_menu, .member_menu { width : 200px; background-color : #DDEEDD; } .guest_menu_title, .member_menu_title { background-color : #BDEFCD; color : #009900; height : 25px; width : 200px; border : 1px solid #AA0044; } .guest_menu_whats, .member_menu_whats { border : 1px dotted #AA0044; border-top : 0px; background-color : #eeffbc; height : 20px; } .guest_menu_seperator, .member_menu_seperator { height : 15px; } .guest_content, .member_content { background-color : #F4FFF4; width : 99%; } .guest_advert, .guest_login, .member_advert, .member_login { background-color : #DDEEDD; vertical-align : top; margin-top : 10px; } .master { width : 100%; height : 100%; min-height : 90%; max-height : 100%; } .footer { vertical-align : bottom; font-size : 12px; } .footer.lines { width : 340px; vertical-align : middle; background-color : #E5EFE5; height : 40px; } .dashed { border : dotted 1px; border-color : #AA0044; } .switch_sw1, .switch_mem1 { background-color : #b8efc1; } .switch_sw2, .switch_mem2 { background-color : #b8fccb; } .impressum { font-size : 12px; width : 320px; vertical-align : middle; background-color : #E5EFE5; height : 70px; } .mediadata { background-color : #eeffbc; } .media_header, .impressum_header { background-color : #b8fccb; align : center; text-align : center; color : #009900; height : 26px; font-weight : bold; font-size : 20px; } .media_left { font-size : 14px; width : 200px; } .media_right { color : #009900; font-weight : bold; font-size : 14px; width : 70px; } .admin_sep_footer { background-color : #DDEEDD; font-size : 1px; } .admin_sep_footer2 { background-color : #eeffbc; font-size : 1px; } .admin_footer, .member_refbanner, .member_update, .admin_del_link { background-color : #DDEEDD; } .member_footer { height : 30px; background-color : #DDEEDD; } .admin_footer { height : 30px } .admin_task_header { background-color : #DDEEDD; color : #009900; vertical-align : middle; font-size : 18px; height : 35px; } .seperator { font-size : 1px } .tab1 { align : center } .admin_delete, .admin_yes { border-style : groove; border : solid 1px #00AA00; background-color : #AA0044; color : #DDEEDD; } .guest_stats { background-color : #eeffbc; width : 460px; } .guest_stats_title { color : #009900; vertical-align : middle; background-color : #DDEEDD; height : 30px; } .guest_stats_l { width : 344px; text-align : right; } .guest_stats_m { width : 2px; } .guest_stats_r, .guest_stats_lr, .guest_stats_rr { color : #009900; width : 28px; font-weight : bold; text-align : center; } .guest_stats_ll, .guest_stats_rl { width : 192px; text-align : right; } .guest_stats_footer { color : #009900; vertical-align : middle; background-color : #DDEEDD; height : 20px; } .task_pre { font-weight : bold; margin-left : 0px; margin-right : 0px; margin-top : 10px; margin-bottom : 10px; } .impressum_body { background-color : #DDEEDD; } .guest_content_align, .member_content_align, .admin_content_align { align : center; text-align : center; vertical-align : top; } .member_mailidtop { background-color : #DDEEDD; width : 100%; height : 100%; } .list_categories, .admin_action_header, .admin_main, .admin_menu_main, .admin_menu_sub { width : 100%; } .member_unconfirmed { background-color : #DDEEDD; width : 100%; align : center; text-align : center; } .you_are_here { white-space : nowrap; font-size : 14px; } .tiny { font-size : 12px; } .medium { font-size : 14px; } .big { font-size : 20px; } .top { border-top : 1px dotted #4400AA; } .bottom { border-bottom : 1px dotted #4400AA; } .left { border-left : 1px dotted #4400AA; } .right { border-right : 1px dotted #4400AA; } .top2 { border-top : 1px dotted #AA0044; } .bottom2 { border-bottom : 1px dotted #AA0044; } .left2 { border-left : 1px dotted #AA0044; } .right2 { border-right : 1px dotted #AA0044; } .nobr { white-space : nowrap; } .guest_table { background-color : #eeffbc; }