Einführung

Dieser Abschnitt der Dokumentation befasst sich mit der Erstellung eigener Templates. Um mal etwas vorweg zu nehmen: Wenn Sie ein eigenes Template erstellen wollen, dann sollten Sie Erfahrung in HTML sowie CSS mitbringen. Wenn Sie nur die Farben oder die Tabellenbreiten eines Templates an Ihre Bedürfnisse anpassen wollen, dann genügt es wenn Sie sich ein wenig durch diese Dokumentation arbeiten.

ACHTUNG: Wenn Sie größere Änderungen am Template durchführen, dann tun Sie das an einer Kopie des Original Templates, dass sie in einem eigenen Ordner speichern. So laufen Sie nicht Gefahr durch ein Update des Gästebuches Ihre Änderungen ungewollt zu überschreiben. Hinweise zu Änderungen am Template finden Sie in den Versionsunterschieden.

Was ist ein Template?

Ein Template ist eine Designvorlage, meist in HTML geschrieben, die Platzhalter enthält um dort den Inhalt einzufügen, der von einem Programm wie z.B. in diesem Fall einem Gästebuch generiert wird.

Platzhalter

Im Fall des MGB sehen diese Platzhalter so aus:

{PLATZHALTER}

Sie beginnen mit einer geschweiften Klammer, der Text ist GROSS geschrieben, Leerzeichen werden durch Unterstriche (_) dargestellt und sie enden auch wieder mit einer geschweiften Klammer. Diese Platzhalter kommen an die Stelle im Template, wo sie durch den Inhalt ersetzt werden sollen. Beispielsweise wird der Platzhalter

{TITLE}

in der mgbModern/main/index_body.tpl durch den Titel des Gästebuches ersetzt.

Was bedeutet die Endung *.tpl?

Die Dateiendung *.tpl bedeutet nichts anderes als „Template“ und enthält HTML. Die Datei heisst nur anders. Man kann sie mit einem ganz normalen Texteditor wie Notepad oder Notepad2 öffnen.

Wie ist ein MGB Template aufgebaut?

Das Template ist in verschiedene Bereiche aufgebaut. Ich erkläre es mal anhand der mitgelieferten Vorlage “mgbModern“. Sie befindet sich im Ordner “templates“ im Hauptverzeichnis des Gästebuches. Es gibt vier Unterordner:

Datei- und Ordnerstruktur

-- admin
  - activate.tpl
  - admin.tpl
  - deactivate.tpl
  - delete.tpl
  - edit.tpl
  - edit_single.tpl
  - edit_user.tpl
  - edit_user_adduser.tpl
  - edit_user_single.tpl
  - login.tpl
  - login_ok.tpl
  - lostpassword.tpl
  - lostpassword_sent.tpl
  - navigation.tpl
  - settings.tpl
  - version.tpl
 |-- general_admin
    - copyright.tpl
    - errormessage.tpl
    - footer.tpl
    - header.tpl
    - scrolling_function.tpl
-- css
 |-- black
    - style.css
 |-- blue
    - style.css
 |-- ...
-- general
  - captcha.tpl
  - copyright.tpl
  - errormessage.tpl
  - footer.tpl
  - header.tpl
  - scrolling_function.tpl
-- js
  - overlib.js
-- main
  - email_body.tpl
  - email_body_success.tpl
  - index_body.tpl
  - index_entry.tpl
  - index_entry_aim.tpl
  - index_entry_city.tpl
  - index_entry_comment.tpl
  - index_entry_email.tpl
  - index_entry_hp.tpl
  - index_entry_icq.tpl
  - index_entry_message.tpl
  - index_entry_msn.tpl
  - newentry_bbcodes.tpl
  - newentry_body.tpl
  - newentry_body_entry_success.tpl
  - newentry_smileys.tpl
  - newentry_user_notification.tpl
  - newentry_user_show_email.tpl
- readme.txt
- settings.php
  1. admin = Enthält die Vorlagen für die Administration.
    • general_admin = Enthält Vorlagen für Dateien die überall in der Administration zu finden sind. Copyright Anzeige etc.
  2. css = Enthält die Cascading Style Sheet Dateien, mit denen die Farben u.s.w. festgelegt werden.
    • black = Das CSS für die schwarze Version.
    • blue = Das CSS für die blaue Version.
  3. general = Enthält Vorlagen für Dateien die überall auf den Hauptseiten zu finden sind. Copyright Anzeige etc.
  4. js = JavaScript für die „overLIB“ Bibliothek.
  5. main = Enthält alle Dateien die ein normaler Benutzer zu sehen bekommt.

Dateiteile und wie sie zusammengefügt werden

Die Dateien selbst haben immer einen spezifischen Dateinamen. So gehören z.B. zur index.php alle Dateien die mit index beginnen. Es folgt ein Unterstrich und dann die Bezeichnung welchen Teil die Datei enthält. body ist z.B. das Grundgerüst mit HEADER und FOOTER, und bindet andere *.tpl Dateien ein. index_entry.tpl stellt nur einen einzigen Eintrag dar. index_entry_comment.tpl den Kommentar für einen Eintrag. Es ist nötig dies in verschiedene Dateien aufzuteilen, da diese Teile ja dynamisch eingebunden werden, wenn diese Information verfügbar ist. Beispiel:

index_body.tpl enthält den Platzhalter {TEMPLATE_ENTRIES}. Dieser wird ersetzt durch die Datei index_entry.tpl. Diese wiederum enthält den Platzhalter {TEMPLATE_ENTRY_COMMENT} der durch die index_entry_comment.tpl ersetzt wird. Wenn kein Kommentar verfügbar ist, dann wird der Platzhalter {TEMPLATE_ENTRY_COMMENT} einfach durch einen leeren String ersetzt, und es erscheint kein Kommentar unter dem Eintrag.

CSS

Um die Farben oder die Tabellenbreiten des Templates zu verändern, ist es nötig die benutzte CSS Datei zu bearbeiten. Eine CSS Datei enthält verschiedene Angaben, zu verschiedenen Klassen, die im Template benutzt werden. Eine Klasse wird im allgemeinen so definiert:

span.title {
	font-family: 'lucida console', verdana, arial, helvetica, sans-serif;
	font-size: 14px;
	color: #7F7F7F; }

Somit wird jeder Text der in einem <span> Tag mit der Klasse title

<span class="title">

erscheint, mit der Schriftart Lucida Console (falls verfügbar, wenn nicht wird die nächste in der Reihe genommen: verdana), der Schriftgröße 14 und der HTML Farbe #7F7F7F dargestellt.

Hier die wichtigsten CSS Attribute:

Attribut Auswirkung
font-family Schriftart
font-size Schriftgröße
font-weight Gewichtung der Schrift
color Farbe
background-color Hintergrundfarbe
text-decoration Darstellung (Unterstrichen, durchgestrichen etc.)
border Rahmen
width Breite
height Höhe
text-align Ausrichtung
vertical-align Vertikale Ausrichtung
padding Innenabstand
margin Außenabstand

Ich empfehle die Seite http://www.css4you.de/. Dort wird sehr ausführlich erklärt was die einzelnen Attribute bedeuten, und was man damit alles anstellen kann. Sehr zu empfehlen ist der CSS Workshop für blutige Anfänger.

Farbtabelle und Farbnamen

Hier eine „kleine“ Liste der wichtigsten verfügbaren Farben, um seinem Template die richtigen Farben zu geben. Vielen lieben Dank an http://mahopa.de/ für die freundliche Bereitstellung! :)

RGB Wert Hexadezimal Wert RGB Wert Hexadezimal Wert
0,0,0 #000000 255,255,255 #FFFFFF
0,0,51 #000033 255,255,204 #FFFFCC
0,0,102 #000066 255,255,153 #FFFF99
0,0,153 #000099 255,255,102 #FFFF66
0,0,204 #0000CC 255,255,51 #FFFF33
0,0,255 #0000FF 255,255,0 #FFFF00
0,51,0 #003300 255,204,255 #FFCCFF
0,51,51 #003333 255,204,204 #FFCCCC
0,51,102 #003366 255,204,153 #FFCC99
0,51,153 #003399 255,204,102 #FFCC66
0,51,204 #0033CC 255,204,51 #FFCC33
0,51,255 #0033FF 255,204,0 #FFCC00
0,102,0 #006600 255,153,255 #FF99FF
0,102,51 #006633 255,153,204 #FF99CC
0,102,102 #006666 255,153,153 #FF9999
0,102,153 #006699 255,153,102 #FF9966
0,102,204 #0066CC 255,153,51 #FF9933
0,102,255 #0066FF 255,153,0 #FF9900
0,153,0 #009900 255,102,255 #FF66FF
0,153,51 #009933 255,102,204 #FF66CC
0,153,102 #009966 255,102,153 #FF6699
0,153,153 #009999 255,102,102 #FF6666
0,153,204 #0099CC 255,102,51 #FF6633
0,153,255 #0099FF 255,102,0 #FF6600
0,204,0 #00CC00 255,51,255 #FF33FF
0,204,51 #00CC33 255,51,204 #FF33CC
0,204,102 #00CC66 255,51,153 #FF3399
0,204,153 #00CC99 255,51,102 #FF3366
0,204,204 #00CCCC 255,51,51 #FF3333
0,204,255 #00CCFF 255,51,0 #FF3300
0,255,0 #00FF00 255,0,255 #FF00FF
0,255,51 #00FF33 255,0,204 #FF00CC
0,255,51 #00FF66 255,0,153 #FF0099
0,255,153 #00FF99 255,0,102 #FF0066
0,255,204 #00FFCC 255,0,51 #FF0033
0,255,255 #00FFFF 255,0,0 #FF0000
51,0,0 #330000 204,255,255 #CCFFFF
51,0,51 #330033 204,255,204 #CCFFCC
51,0,102 #330066 204,255,153 #CCFF99
51,0,153 #330099 204,255,102 #CCFF66
51,0,204 #3300CC 204,255,51 #CCFF33
51,0,255 #3300FF 204,255,0 #CCFF00
51,51,0 #333300 204,204,255 #CCCCFF
51,51,51 #333333 204,204,204 #CCCCCC
51,51,102 #333366 204,204,153 #CCCC99
51,51,153 #333399 204,204,102 #CCCC66
51,51,204 #3333CC 204,204,51 #CCCC33
51,51,255 #3333FF 204,204,0 #CCCC00
51,102,0 #336600 204,153,255 #CC99FF
51,102,51 #336633 204,153,204 #CC99CC
51,102,102 #336666 204,153,153 #CC9999
51,102,153 #336699 204,153,102 #CC9966
51,102,204 #3366CC 204,153,51 #CC9933
51,102,255 #3366FF 204,153,0 #CC9900
51,153,0 #339900 204,102,255 #CC66FF
51,153,51 #339933 204,102,204 #CC66CC
51,153,102 #339966 204,102,153 #CC6699
51,153,153 #339999 204,102,102 #CC6666
51,153,204 #3399CC 204,102,51 #CC6633
51,153,255 #3399FF 204,102,0 #CC6600
51,204,0 #33CC00 204,51,255 #CC33FF
51,204,51 #33CC33 204,51,204 #CC33CC
51,204,102 #33CC66 204,51,153 #CC3399
51,204,153 #33CC99 204,51,102 #CC3366
51,204,204 #33CCCC 204,51,51 #CC3333
51,204,255 #33CCFF 204,51,0 #CC3300
51,255,0 #33FF00 204,0,255 #CC00FF
51,255,51 #33FF33 204,0,204 #CC00CC
51,255,102 #33FF66 204,0,153 #CC0099
51,255,153 #33FF99 204,0,102 #CC0066
51,255,204 #33FFCC 204,0,51 #CC0033
51,255,255 #33FFFF 204,0,0 #CC0000
102,0,0 #660000 153,255,255 #99FFFF
102,0,51 #660033 153,255,204 #99FFCC
102,0,102 #660066 153,255,153 #99FF99
102,0,153 #660099 153,255,102 #99FF66
102,0,204 #6600CC 153,255,51 #99FF33
102,0,255 #6600FF 153,255,0 #99FF00
102,51,0 #663300 153,204,255 #99CCFF
102,51,51 #663333 153,204,204 #99CCCC
102,51,102 #663366 153,204,153 #99CC99
102,51,153 #663399 153,204,102 #99CC66
102,51,204 #6633CC 153,204,51 #99CC33
102,51,255 #6633FF 153,204,0 #99CC00
102,102,0 #666600 153,153,255 #9999FF
102,102,51 #666633 153,153,204 #9999CC
102,102,102 #666666 153,153,153 #999999
102,102,153 #666699 153,153,102 #999966
102,102,204 #6666CC 153,153,51 #999933
102,102,255 #6666FF 153,153,0 #999900
102,153,0 #669900 153,102,255 #9966FF
102,153,51 #669933 153,102,204 #9966CC
102,153,102 #669966 153,102,153 #996699
102,153,153 #669999 153,102,102 #996666
102,153,204 #6699CC 153,102,51 #996633
102,153,255 #6699FF 153,102,0 #996600
102,204,0 #66CC00 153,51,255 #9933FF
102,204,51 #66CC33 153,51,204 #9933CC
102,204,102 #66CC66 153,51,153 #993399
102,204,153 #66CC99 153,51,102 #993366
102,204,204 #66CCCC 153,51,51 #993333
102,204,255 #66CCFF 153,51,0 #993300
102,255,0 #66FF00 153,0,255 #9900FF
102,255,51 #66FF33 153,0,204 #9900CC
102,255,102 #66FF66 153,0,153 #990099
102,255,153 #66FF99 153,0,102 #990066
102,255,204 #66FFCC 153,0.51 #990033
102,255,255 #66FFFF 153,0,0 #990000

Farbname Hexadezimal-Wert RGB-Wert
maroon maroon maroon #800000 128,0,0
darkred darkred darkred #8B0000 139,0,0
firebrick firebrick firebrick #B22222 178,34,34
brown brown brown #A52A2A 165,42,42
crimson crimson crimson #DC143C 220,20,60
red red red #FF0000 255,0,0
orangered orangered orangered #FF4500 255,69,0
indianred indianred indianred #CD5C5C 205,92,92
darksalmon darksalmon darksalmon #E9967A 233,150,122
lightsalmon lightsalmon lightsalmon #FFA07A 255,160,122
coral coral coral #FF7F50 255,127,80
tomato tomato tomato #FF6347 253,99,71
salmon salmon salmon #FA8072 250,128,114
lightcoral lightcoral lightcoral #F08080 240,128,128
palevioletred palevioletred palevioletred #DB7093 219,112,147
mediumvioletred mediumvioletred mediumvioletred #C71585 199,21,133
deeppink deeppink deeppink #FF1493 255,20,147
fuchsia fuchsia fuchsia #FF00FF 255,0,255
magenta magenta magenta #FF00FF 255,0,255
hotpink hotpink hotpink #FF69B4 255,105,180
lightpink lightpink lightpink #FFB6C1 255,182,193
pink pink pink #FFC0CB 255,192,203
thistle thistle thistle #D8BFD8 216,191,216
plum plum plum #DDA0DD 221,160,221
violet violet violet #EE82EE 238,130,238
orchid orchid orchid #DA70D6 218,112,214
mediumorchid mediumorchid mediumorchid #BA55D3 186,85,211
darkorchid darkorchid darkorchid #9932CC 153,50,204
darkviolet darkviolet darkviolet #9400D3 148,0,211
purple purple purple #800080 128,0,128
darkmagenta darkmagenta darkmagenta #8B008B 139,0,139
indigo  indigo indigo #4B0082 75,0,130
blueviolet blueviolet blueviolet #8A2BE2 138,43,226
mediumpurple mediumpurple mediumpurple #9370DB 147,112,219
mediumslateblue mediumslateblue mediumslateblue #7B68EE 123,104,238
slateblue slateblue slateblue #6A5ACD 106,90,205
darkslateblue darkslateblue darkslateblue #483D8B 72,61,139
midnightblue midnightblue midnightblue #191970 25,25,112
 navy navy navy #000080 0,0,128
darkblue darkblue darkblue #00008B 0,0,139
mediumblue mediumblue mediumblue #0000CD 0,0,205
blue blue blue #0000FF 0,0,255
royalblue royalblue royalblue #4169E1 65,105,225
cornflowerblue cornflowerblue cornflowerblue #6495ED 100,149,237
steelblue steelblue steelblue #4682B4 70,130,180
dodgerblue dodgerblue dodgerblue #1E90FF 30,144,255
deepskyblue deepskyblue deepskyblue #00BFFF 0,191,255
lightskyblue lightskyblue lightskyblue #87CEFA 135,206,250
skyblue skyblue skyblue #87CEEB 135,206,235
lightsteelblue lightsteelblue lightsteelblue #B0C4DE 176,196,222
lightblue lightblue lightblue #ADD8E6 173,216,230
powderblue powderblue powderblue #B0E0E6 176,224,230
paleturquoise paleturquoise paleturquoise #AFEEEE 175,238,238
mediumturquoise mediumturquoise mediumturquoise #48D1CC 72,209,204
lightseagreen lightseagreen lightseagreen #20B2AA 32,178,170
darkcyan darkcyan darkcyan #008B8B 0,139,139
teal teal teal #008080 0,128,128
cadetblue cadetblue cadetblue #5F9EA0 95,158,160
darkturquoise darkturquoise darkturquoise #00CED1 0,206,209
aqua aqua aqua #00FFFF 0,255,255
cyan cyan cyan #00FFFF 0,255,255
turquoise turquoise turquoise #40E0D0 64,224,208
aquamarine aquamarine aquamarine #7FFFD4 127,255,212
mediumaquamarine mediumaquamarine mediumaquamarine #66CDAA 102,205,170
darkseagreen darkseagreen darkseagreen #8FBC8F 143,188,143
mediumseagreen mediumseagreen mediumseagreen #3CB371 60,179,113
seagreen seagreen seagreen #2E8B57 46,139,87
darkgreen darkgreen darkgreen #006400 0,100,0
green green green #008000 0,128,0
forestgreen forestgreen forestgreen #228B22 34,139,34
limegreen limegreen limegreen #32CD32 50,205,50
springgreen springgreen springgreen #00FF7F 0,255,127
mediumspringgreen mediumspringgreen mediumspringgreen #00FA9A 0,250,154
palegreen palegreen palegreen #98FB98 152,251,152
lightgreen lightgreen lightgreen #90EE90 144,238,144
lime