]> git.mxchange.org Git - mailer.git/blob - DOCS/en/DESIGNING.txt
Syntax errors fixed, naming convention applied, wrappers used:
[mailer.git] / DOCS / en / DESIGNING.txt
1 0. Inhaltverzeichnis
2 --------------------
3
4 1.   Intro
5 2.   Wie Sie am besten anfangen
6 2.1. Allgemeine Farbeinstellungen
7
8 ----- ----- ----- ----- -----
9
10 1. Intro
11 --------
12
13 Ich moechte Ihnen hier zeigen, wie Sie das Design Schritt-Fuer-Schritt an
14 Ihre Wuensche angepasst bekommen.
15
16 Dann gebe ich Ihnen eine Referenz, wo Sie nachvollziehen koennen, wo fuer
17 welche CSS-Klasse gedacht ist.
18
19 Sie sollten allerdings beispielsweise wissen, was eine Klasse ist. Sollten
20 Sie dies nicht wissen, geben Sie einfach bei einer Suchmaschine Ihrer Wahl
21 das Suchwort "CSS-Klasse" ein. Sie finden dann genuegend Seiten, wo Sie
22 sich informieren koennen.
23
24 Oder rufen Sie auch die (wohl?) bekannteste HTML-Dokumentation im Netz auf:
25
26 http://www.selfhtml.org
27
28 ----- ----- ----- ----- -----
29
30 2. Wie Sie am besten anfangen
31 -----------------------------
32
33 Die Haupt-CSS-Datei general.css mag auf dem ersten Blick sehr gross und
34 komplex aussehen. Lassen Sie sich davon nicht abschrecken! Um diese wird es
35 sich jetzt permanent drehen.
36
37 Sie koennen diese also in einem zweiten Editor (WORDPAD.EXE oder WRITE.EXE
38 reicht voellig aus!) oeffnen und dann zwischen dieser Anleitung und der Datei
39 hin und her wechsel (Windows: ALT-TAB!).
40
41 ----- ----- ----- ----- -----
42
43 2.1. Allgemeine Farbeinstellungen
44 ---------------------------------
45
46 Fangen wir als erstes mit dem generellen Aussehen (Body, Rumpf) an. Diese
47 Angaben sitzen auch passenderweise am Anfang der Datei.
48
49 Auszug aus der orginalen general.css:
50 :----------------------------------:
51
52 body {
53         background-color        : #F4F9BE;
54         color                   : #000000;
55         font-family             : Arial, Geneva, Helvetica, sans-serif;
56         font-size                       : 12px;
57
58         scrollbar-base-color            : #E9E4AE;
59         scrollbar-face-color            : #CDEFCD;
60         scrollbar-highlight-color       : #F4F9BE;
61         scrollbar-shadow-color          : #CDEFCD;
62         scrollbar-3dlight-color         : #DDDDDD;
63         scrollbar-arrow-color           : #000000;
64         scrollbar-track-color           : #CCEFCC;
65         scrollbar-darkshadow-color      : #999999;
66
67         margin                  : 0px;
68         margin-left             : 0px;
69         margin-right            : 0px;
70         margin-top              : 0px;
71         margin-bottom           : 0px;
72 }
73
74 :----------------------------------:
75 Bis hier hin erstmal!
76
77 Die ersten 4 Zeilen (lassen Sie dabei "body {" und alle spaeteren Namen dabei
78 ausser acht) geben die Hintergrundfarbe, Textfarbe, Schriftfamilie und die
79 Textgroesse an.
80
81 Der naechste Block widmet sich den Farben des Rollbalkes vom Browser.
82
83 Und der letzte 5-Zeilen-Block stellt den Abstand zwischen den Elementen ein.
84 Dies ist aber nur eine allgemeine Einstellung. Sie koennen spaeter auch
85 Feineinstellungen vornehmen, indem Sie solch Zeilen fuer die anderen Klassen
86 verwenden.
87
88 Nun geht es mit den allgemeinen Tabellen-Einstellungen weiter:
89
90 Auszug aus der originalen general.css:
91 :----------------------------------:
92
93 table {
94         table-layout            : auto;
95         border-spacing          : 0px;
96         overflow                        : auto;
97 }
98
99 :----------------------------------:
100
101 Was diese Einstellungen bewirken, koennen Sie beispielsweise in der bekannten
102 Dokumentation "SelfHTML" (http://www.selfhtml.org) nachlesen.
103
104 Weiter geht es mit dem Aussehen der Links:
105
106 Auszug aus der originalen general.css:
107 :----------------------------------:
108
109 A {
110         font-style              : normal;
111         font-family             : Arial, Geneva, Helvetica, sans-serif;
112         text-decoration : none;
113 }
114
115 A:link {
116         color                   : #2e51a9;
117 }
118
119 A:visited {
120         color                   : #AA0044;
121 }
122
123 A:active {
124         color                   : #2e51a9;
125         background-color        : transparent;
126 }
127
128 A:hover {
129         color                   : #AA0044;
130         background-color        : transparent;
131         text-decoration : underline overline;
132 }
133
134 :----------------------------------:
135
136 Hier habe ich gleich 5 Klassen auf einmal genommen, damit diese Dokumentation
137 kuerzer ausfaellt.
138
139 In der ersten Klasse stellen Sie allgemeine Farbeinstellungen ein; die
140 naechsten Klassen stellen folgendes ein:
141
142 - Allgemeine Linkfarbe
143 - Linkfarbe fuer bereits besuchte Links
144 - Linkfarbe fuer angeklickte Links
145 - Linkfarbe fuer Hover (Maus schwebt ueber Link, es wurde aber noch nicht
146   geklickt)
147
148 Wir machen gleich weiter mit den allgemeinen Einstellungen um Formular-
149 Elemente. Hier habe ich gleich einiges zusammengefasst:
150
151 Auszug aus der originalen general.css:
152 :----------------------------------:
153
154 input, textarea, select, option {
155         color                   : #AA0044;
156         background-color        : #EEFFEE;
157         border-color            : #BBBBBB;
158         text-decoration : none;
159 }
160
161 :----------------------------------:
162
163 Diese Klasse fasst - wie bereits gesagt - einige HTML-Elemente zusammen:
164
165 - Eingabefelder oder Buttons (input)
166 - Texteingabefelder (textarea)
167 - Auswahlmenues (select)
168 - Auswahloptionen (option)
169
170 Damit ist der erste Teile "Allgemeine Farbeinstellungen abgeschlossen! Laden
171 Sie jetzt mal die geaenderte general.css auf Ihren Webserver in das css-
172 Verzeichnis hoch!
173
174 Koennen Sie schon erahnen, wie Ihre Seite nun aussieht? Richtig! Etwas "bunt
175 durcheinander". Das macht erstmal soweit nichts, denn wir sind ja noch nicht
176 fertig mit Umdesignen.
177
178 Nun geht es um etwas feinere Einstellungen...
179
180 ----- ----- ----- ----- -----
181
182 2.2. Detailelemente: Buttons, Auflistungen usw.
183 -----------------------------------------------
184
185 Dieses Thema wird jetzt sehr lang, da alle weiteren Klassen behandelt werden.
186 Wir machen aber mal zwischendurch eine Pause, wo Sie sich dann Ihre Arbeit im
187 Browser ansehen koennen und nochmals nachkorregieren koennen.
188
189 Sie werden also - der Wahrscheinlickeit nach - nicht den Ueberblick verlieren.
190 Auch hier gehen wir wieder Schritt fuer Schritt vor, so dass Sie in der
191 general.css einfach weiter nach unten "wandern" brauchen.
192
193 Und los geht es mit den Absende- und Zuruecksetzen-Buttons:
194
195 Auszug aus der originalen general.css:
196 :----------------------------------:
197
198 .admin_reset, .guest_reset, .member_reset {
199         border-style            : groove;
200         border                  : solid 1px #009900;
201         color                   : #AA0044;
202 }
203
204 .admin_submit, .guest_submit, .member_submit {
205         color                   : #AA0044;
206         border-color            : #009900;
207 }
208
209 .admin_submit_reject {
210         border-style            : groove;
211         color                   : #881111;
212         border-color            : #009900;
213 }
214
215 :----------------------------------:
216
217 Ich habe hier gleich 3 Klassen auf einmal genommen:
218
219 - Zuruecksetzen-Buttons (alle drei Menues gemeinsam)
220 - Absendebuttons in allen drei Menues
221 - Im Adminbereich: Button fuer Mailbuchung ablehnen
222
223 Und weiter geht's mit den Auflisten-Elementen:
224
225 Auszug aus der originalen general.css:
226 :----------------------------------:
227
228 ul, ol {
229         margin-top              : 0px;
230         margin-bottom           : 0px;
231 }
232
233 :----------------------------------:
234
235 Nicht-nummerierte und nummerierte Listen werden hiermit eingestellt. Meine
236 Angaben stellen den Abstand zu anderen Objekten auf 0 Pixel ein.
237
238 Und weiter geht es mit Klassen fuer auftretende Laufzeitfehler:
239
240 Auszug aus der originalen general.css:
241 :----------------------------------:
242
243 .runtime {
244         color                   : #118811;
245         background-color        : #DDEEDD;
246         font-family             : Arial, Geneva, Helvetica, sans-serif;
247 }
248
249 .runtime.fatal {
250         color                   : #00AA00;
251 }
252
253 .runtime.fatalcontent {
254         font-size                       : 20px;
255 }
256
257 :----------------------------------:
258
259 Die erste Klasse stellt allgemeine Dinge, wie Hintergrund- und Vordergrund-
260 farben, sowie die Schriftfamilie ein. Das letztere ist eigentlich nicht noetig.
261
262 Die naechste Klasse stellt die Farbeinstellung fuer Fehlermeldungen ein
263 (SQL-Fehler meistens) und letzte stellt die Schriftgroesse fuer alle uebrigen
264 Meldungen (Titel leider auch) ein.
265
266 Hier muss ich dringenst etwas aendern. Aber dieser Code-Teil ist auch sehr alt
267 und kommt aus meinen ersten Schritten mit diesem Mailtausch-Script.
268
269 Weiter geht es mit dem Admin-Bereich:
270
271 Auszug aus der originalen general.css:
272 :----------------------------------:
273
274 .admin_fatal {
275         font-size                       : 18px;
276         color                   : #00AA00;
277 }
278
279 .admin {
280         color                   : #118811;
281         background-color        : #DDEEDD;
282         font-family             : Arial, Geneva, Helvetica, sans-serif;
283 }
284
285 .admin_note {
286         color                   : #FF0000;
287         font-size                       : 12px;
288 }
289
290 .admin_edit, .member_confirm {
291         background-color        : #eeffbc;
292 }
293
294 :----------------------------------:
295
296 Hier hat sich - wegen Farbgleichheit, koennen Sie also auch trennen - gleich
297 eine CSS-Klasse fuer den Mitgliederbereich eingeschlichen:
298
299 "member_confirm" stellt die Tabelle fuer das Zeitframe beim Bestaetigen von
300 Mails ein. Der Reset widmet sich ganz und alleine dem Admin-Bereich:
301
302 1.: Fehlermeldungen fuer den Admin (Modul gesperrt, etc.) und Fehlermeldungen im
303     Admin-Bereich beim Editieren von Gastmenue- und Adminmenue-Punkten
304
305 2.: Allgemeine Einstellungen, wie Farben und Schriftartfamilie
306
307 3.: Hinweise fuer den Admin ("Einstellungen gespeichert" beispielsweise)
308
309 4.: Farbeinstellung beim Editieren aller drei Menue-Systeme
310
311 Wieso auch immer, aber als naechstes hat sich eine Klasse fuer den Mitglieds-
312 bereich eingeschoben:
313
314 Auszug aus der originalen general.css:
315 :----------------------------------:
316
317 .member_banner {
318         background-color        : #eeffbc;
319         width                   : 488px;
320 }
321
322 :----------------------------------:
323
324 Ahnen Sie schon, was diese Klasse soll? Ich schaetze mal, Sie haben auf die
325 Refbanner getippt. Hiemit werden aber die Einstellungen fuer Ihre Werbebanner
326 im Zeitframe beim Bestaetigen von Mails vorgenommen.
327
328 Nicht dass Sie dies jetzt missverstehen: Es werden nur Desgin-Angaben fuer die
329 Tabelle um den Banner eingestellt, nicht der Banner selber wird geaendert! ;-)
330
331 Und weiter geht es mit Admin-Klassen:
332
333 Auszug aus der originalen general.css:
334 :----------------------------------:
335
336 .admin_error {
337         background-color        : #eeffbc;
338         color                   : #00AA00;
339         font-size                       : 10px;
340 }
341
342 .admin_select, .guest_select, .member_select {
343         border                  : dotted 1px;
344         border-color            : #009900;
345         background-color        : #EEFFEE;
346 }
347
348 .admin.register, .admin_desc_header, .admin_done, .admin_title, .member_title2, .guest_title2 {
349         background-color        : #ddeedd;
350         color                   : #009900;
351 }
352
353 :----------------------------------:
354
355 .member_done, .guest_done {
356         color                   : #009900;
357 }
358
359 .member_misc {
360         background-color        : #DDEEDD;
361 }
362
363 .admin_misc, .member_misc {
364         color                   : #000000;
365 }
366
367 .admin_done2 {
368         color                   : #AA0044;
369 }
370
371 .admin_green, .admin_no {
372         color                   : #009900;
373 }
374
375 .admin_welcome {
376         background-color        : #DDEEDD;
377         color                   : #009900;
378         vertical-align          : middle;
379         font-size                       : 18px;
380         height                  : 50px;
381 }
382
383 .admin_header {
384         background-color        : #eeffbc;
385 }
386
387 .admin_menu {
388         background-color        : #DDEEDD;
389         color                   : #000077;
390         width                   : 230px;
391 }
392
393 .admin_logout {
394         background-color        : #AAFFAA;
395         color                   : #00AA00;
396 }
397
398 .admin_desc_cont, .admin_table, .member_table {
399         background-color        : #eeffbc;
400 }
401
402 .admin_editmenu {
403         min-width                       : 500px;
404         max-width                       : 90%;
405 }
406
407 .admin_form_header {
408         text-align          : center;
409         height                  : 36px;
410         background-color        : #eeffbc;
411         color                   : #009900;
412 }
413
414 .member_header {
415         text-align          : center;
416         height                  : 28px;
417         background-color        : #eeffbc;
418 }
419
420 .admin_failed, .guest_failed, .member_failed, .member_note {
421         color                   : #00AA00;
422 }
423
424 .member_note_bg {
425         background-color        : #eeffbc;
426 }
427
428 .member_data {
429         background-color        : #eeffbc;
430         color                   : #009900;
431         height                  : 20px;
432 }
433
434 .admin_header_b1 {
435         border-bottom           : 1px solid #AA0044;
436         background-color        : #ddeedd;
437         height                  : 22px;
438 }
439
440 .admin_snote {
441         font-size                       : 12px;
442 }
443
444 .admin_normal, .guest_normal, .member_normal {
445         border-style            : solid;
446         border                  : dotted 1px;
447         border-color            : #009900;
448 }
449
450 .member_stats {
451         vertical-align          : top;
452         font-weight             : bold;
453         height                  : 23px;
454         font-size                       : 16px;
455         border-style            : none;
456         border                  : 0px;
457         background          : #DDEEDD;
458         color                   : #000000;
459         margin-top              : -4px;
460         margin-bottom           : 1px;
461         cursor                  : default;
462 }
463
464 .normal {
465         border-style            : groove;
466 }
467
468 .member_main {
469         background-color        : #DDEEDD;
470 }
471
472 .guest_title, .member_title {
473         color                   : #009900;
474         vertical-align          : middle;
475         background-color        : #DDEEDD;
476         height                  : 60px;
477 }
478
479 .guest_login_header {
480         color                   : #009900;
481         vertical-align          : middle;
482         background-color        : #DDEEDD;
483 }
484
485 .guest_menu, .member_menu {
486         width                   : 200px;
487         background-color        : #DDEEDD;
488 }
489
490 .guest_menu_title, .member_menu_title {
491         background-color        : #BDEFCD;
492         color                   : #009900;
493         height                  : 25px;
494         width                   : 200px;
495         border                  : 1px solid #AA0044;
496 }
497
498 .guest_menu_whats, .member_menu_whats {
499         border                  : 1px dotted #AA0044;
500         border-top              : 0px;
501         background-color        : #eeffbc;
502         height                  : 20px;
503 }
504
505 .guest_menu_seperator, .member_menu_seperator {
506         height                  : 15px;
507 }
508
509 .guest_content, .member_content {
510         background-color        : #F4FFF4;
511         width                   : 99%;
512 }
513
514 .guest_advert, .guest_login, .member_advert, .member_login {
515         background-color        : #DDEEDD;
516         vertical-align          : top;
517         margin-top              : 10px;
518 }
519
520 .master {
521         width                   : 100%;
522         height                  : 100%;
523         min-height              : 90%;
524         max-height              : 100%;
525 }
526
527 .footer {
528         vertical-align          : bottom;
529         font-size                       : 12px;
530 }
531
532 .footer.lines {
533         width                   : 340px;
534         vertical-align          : middle;
535         background-color        : #E5EFE5;
536         height                  : 40px;
537 }
538
539 .dashed {
540         border                  : dotted 1px;
541         border-color            : #AA0044;
542 }
543
544 .switch_sw1, .switch_mem1 {
545         background-color        : #b8efc1;
546 }
547
548 .switch_sw2, .switch_mem2 {
549         background-color        : #b8fccb;
550 }
551
552 .impressum {
553         font-size                       : 12px;
554         width                   : 320px;
555         vertical-align          : middle;
556         background-color        : #E5EFE5;
557         height                  : 70px;
558 }
559
560 .mediadata {
561         background-color        : #eeffbc;
562 }
563
564 .media_header, .impressum_header {
565         background-color        : #b8fccb;
566         align                   : center;
567         text-align              : center;
568         color                   : #009900;
569         height                  : 26px;
570         font-weight             : bold;
571         font-size                       : 20px;
572 }
573
574 .media_left {
575         font-size                       : 14px;
576         width                   : 200px;
577 }
578
579 .media_right {
580         color                   : #009900;
581         font-weight             : bold;
582         font-size                       : 14px;
583         width                   : 70px;
584 }
585
586 .admin_sep_footer {
587         background-color        : #DDEEDD;
588         font-size           : 1px;
589 }
590
591 .admin_sep_footer2 {
592         background-color        : #eeffbc;
593         font-size           : 1px;
594 }
595
596 .admin_footer, .member_refbanner, .member_update, .admin_del_link {
597         background-color        : #DDEEDD;
598 }
599
600 .member_footer {
601         height                  : 30px;
602         background-color        : #DDEEDD;
603 }
604
605 .admin_footer {
606         height                  : 30px
607 }
608
609 .admin_task_header {
610         background-color        : #DDEEDD;
611         color                   : #009900;
612         vertical-align          : middle;
613         font-size                       : 18px;
614         height                  : 35px;
615 }
616
617 .seperator {
618         font-size                       : 1px
619 }
620
621 .tab1 {
622         align                   : center
623 }
624
625 .admin_delete, .admin_yes {
626         border-style            : groove;
627         border                  : solid 1px #00AA00;
628         background-color        : #AA0044;
629         color                   : #DDEEDD;
630 }
631
632 .guest_stats {
633         background-color        : #eeffbc;
634         width                   : 460px;
635 }
636
637 .guest_stats_title {
638         color                   : #009900;
639         vertical-align          : middle;
640         background-color        : #DDEEDD;
641         height                  : 30px;
642 }
643
644 .guest_stats_l {
645         width                   : 344px;
646         text-align              : right;
647 }
648
649 .guest_stats_m {
650         width                   : 2px;
651 }
652
653 .guest_stats_r, .guest_stats_lr, .guest_stats_rr {
654         color                   : #009900;
655         width                   : 28px;
656         font-weight             : bold;
657         text-align              : center;
658 }
659
660 .guest_stats_ll, .guest_stats_rl {
661         width                   : 192px;
662         text-align              : right;
663 }
664
665 .guest_stats_footer {
666         color                   : #009900;
667         vertical-align          : middle;
668         background-color        : #DDEEDD;
669         height                  : 20px;
670 }
671
672 .task_pre {
673         font-weight             : bold;
674         margin-left             : 0px;
675         margin-right            : 0px;
676         margin-top              : 10px;
677         margin-bottom           : 10px;
678 }
679
680 .impressum_body {
681         background-color        : #DDEEDD;
682 }
683
684 .guest_content_align, .member_content_align, .admin_content_align {
685         align                   : center;
686         text-align              : center;
687         vertical-align          : top;
688 }
689
690 .member_mailidtop {
691         background-color        : #DDEEDD;
692         width                   : 100%;
693         height                  : 100%;
694 }
695
696 .list_categories, .admin_action_header, .admin_main, .admin_menu_main, .admin_menu_sub {
697         width                   : 100%;
698 }
699
700 .member_unconfirmed {
701         background-color        : #DDEEDD;
702         width                   : 100%;
703         align                   : center;
704         text-align              : center;
705 }
706
707 .you_are_here {
708         white-space             : nowrap;
709         font-size                       : 14px;
710 }
711
712 .tiny   { font-size             : 12px; }
713 .medium { font-size             : 14px; }
714 .big    { font-size             : 20px; }
715
716 .top    { border-top    : 1px dotted #4400AA; }
717 .bottom { border-bottom : 1px dotted #4400AA; }
718 .left   { border-left   : 1px dotted #4400AA; }
719 .right  { border-right  : 1px dotted #4400AA; }
720
721 .top2    { border-top   : 1px dotted #AA0044; }
722 .bottom2 { border-bottom        : 1px dotted #AA0044; }
723 .left2   { border-left  : 1px dotted #AA0044; }
724 .right2  { border-right : 1px dotted #AA0044; }
725
726 .nobr {
727         white-space             : nowrap;
728 }
729
730 .guest_table {
731         background-color    : #eeffbc;
732 }