]> git.mxchange.org Git - mailer.git/blob - DOCS/en/DESIGNING.txt
Fixes for various bugs (e.g.: 'secret file could not be read', SQL error and more)
[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_separator, .member_menu_separator {
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_left {
565         font-size                       : 14px;
566         width                   : 200px;
567 }
568
569 .media_right {
570         color                   : #009900;
571         font-weight             : bold;
572         font-size                       : 14px;
573         width                   : 70px;
574 }
575
576 .admin_sep_footer {
577         background-color        : #DDEEDD;
578         font-size           : 1px;
579 }
580
581 .admin_sep_footer2 {
582         background-color        : #eeffbc;
583         font-size           : 1px;
584 }
585
586 .admin_footer, .member_refbanner, .member_update, .admin_del_link {
587         background-color        : #DDEEDD;
588 }
589
590 .member_footer {
591         height                  : 30px;
592         background-color        : #DDEEDD;
593 }
594
595 .admin_footer {
596         height                  : 30px
597 }
598
599 .separator {
600         font-size                       : 1px
601 }
602
603 .tab1 {
604         align                   : center
605 }
606
607 .admin_delete, .admin_yes {
608         border-style            : groove;
609         border                  : solid 1px #00AA00;
610         background-color        : #AA0044;
611         color                   : #DDEEDD;
612 }
613
614 .guest_stats {
615         background-color        : #eeffbc;
616         width                   : 460px;
617 }
618
619 .guest_stats_title {
620         color                   : #009900;
621         vertical-align          : middle;
622         background-color        : #DDEEDD;
623         height                  : 30px;
624 }
625
626 .guest_stats_l {
627         width                   : 344px;
628         text-align              : right;
629 }
630
631 .guest_stats_m {
632         width                   : 2px;
633 }
634
635 .guest_stats_r, .guest_stats_lr, .guest_stats_rr {
636         color                   : #009900;
637         width                   : 28px;
638         font-weight             : bold;
639         text-align              : center;
640 }
641
642 .guest_stats_ll, .guest_stats_rl {
643         width                   : 192px;
644         text-align              : right;
645 }
646
647 .guest_stats_footer {
648         color                   : #009900;
649         vertical-align          : middle;
650         background-color        : #DDEEDD;
651         height                  : 20px;
652 }
653
654 .impressum_body {
655         background-color        : #DDEEDD;
656 }
657
658 .guest_content_align, .member_content_align, .admin_content_align {
659         align                   : center;
660         text-align              : center;
661         vertical-align          : top;
662 }
663
664 .member_mailidtop {
665         background-color        : #DDEEDD;
666         width                   : 100%;
667         height                  : 100%;
668 }
669
670 .list_categories, .admin_action_header, .admin_main, .admin_menu_main, .admin_menu_sub {
671         width                   : 100%;
672 }
673
674 .member_unconfirmed {
675         background-color        : #DDEEDD;
676         width                   : 100%;
677         align                   : center;
678         text-align              : center;
679 }
680
681 .you_are_here {
682         white-space             : nowrap;
683         font-size                       : 14px;
684 }
685
686 .tiny   { font-size             : 12px; }
687 .medium { font-size             : 14px; }
688 .big    { font-size             : 20px; }
689
690 .top    { border-top    : 1px dotted #4400AA; }
691 .bottom { border-bottom : 1px dotted #4400AA; }
692 .left   { border-left   : 1px dotted #4400AA; }
693 .right  { border-right  : 1px dotted #4400AA; }
694
695 .top2    { border-top   : 1px dotted #AA0044; }
696 .bottom2 { border-bottom        : 1px dotted #AA0044; }
697 .left2   { border-left  : 1px dotted #AA0044; }
698 .right2  { border-right : 1px dotted #AA0044; }
699
700 .nobr {
701         white-space             : nowrap;
702 }
703
704 .guest_table {
705         background-color    : #eeffbc;
706 }