X-Git-Url: https://git.mxchange.org/?p=mailer.git;a=blobdiff_plain;f=0.2.1%2FDOCS%2Fen%2FDESIGNING.txt;fp=0.2.1%2FDOCS%2Fen%2FDESIGNING.txt;h=0000000000000000000000000000000000000000;hp=979146dc91a5784fca164364eb6b24107df13317;hb=ab9c0550b44bdb6bbb930b4553f687702963801e;hpb=50646cc7b05cf5ff93e9b1e36ab03047cc0cd6bf diff --git a/0.2.1/DOCS/en/DESIGNING.txt b/0.2.1/DOCS/en/DESIGNING.txt deleted file mode 100644 index 979146dc91..0000000000 --- a/0.2.1/DOCS/en/DESIGNING.txt +++ /dev/null @@ -1,732 +0,0 @@ -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 ---------------------------------- - -Fangen wir 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) - -Wir machen 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; -}