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 }