+++ /dev/null
-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;
-}
projects / mailer.git / blobdiff