RPTools.net

Discussion and Support

Skip to content

It is currently Fri Feb 23, 2018 3:38 pm 






Reply to topic  [ 154 posts ]  Go to page Previous  1 ... 3, 4, 5, 6, 7, 8, 9 ... 11  Next

Previous topic | Next topic 

  Print view

Author Message
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:37 pm 
13.2 - Zeichen maskieren

Bereits am Anfang habe ich dir gesagt, dass du, wenn du normalen Text schreibst, bestimmte Zeichen nicht benutzen darfst. Dazu zählen z. B. Umlaute und zum Schreiben von Code benötigte Zeichen wie eckige Klammern oder Anführungszeichen. Wenn du diese Zeichen trotzdem in deinem Text benutzen willst kannst du mit HTML diese Zeichen maskieren. Körperkraft liest sich eben einfach besser als Koerperkraft, und Anführungszeichen würdest du bestimmt auch gerne mal in einem Fenster oder in der Chatbox verwenden.

Zeichen maskieren bedeutet einfach nur, dass du statt des eigentlichen Zeichens eine bestimmte Zeichenfolge eingibst. Der Parser erkennt diese Zeichenfolge dann und zeigt bei der Ausgabe das gewünschte Zeichen richtig an. Bleiben wir doch bei Körperkraft als Beispiel. Statt des ö gibst du dann einfach die Zeichenfolge ö ein. Das sieht jetzt zwar komisch aus, aber es funktioniert:

Code:
[r: "Körperkraft"]

Wenn du ein großes Ö benötigst schreibst du den Buchstaben nach dem "&" einfach groß:

Code:
[r: "Öffne die Truhe."]

Oder wie wäre es mit der Anzeige eines Würfelergebnisses in doppelten Anführungszeichen? Für das ü gibst du ü ein, und jeweils " für die Anführungszeichen:

Code:
[h: wurf = 1d6]
Du hast eine "[r: wurf]" gewürfelt.

Es gibt viele Zeichen die du auf diese Weise maskieren kannst. Manche Zeichen, die sich selbst auf der Tastatur nicht finden lassen, können sogar nur auf diese Art dargestellt werden.

Hier eine Liste der wichtigsten Zeichen die du immer maskieren musst:

ä - ä - a Umlaut, klein
Ä - Ä - A Umlaut, groß
ö - ö - o Umlaut, klein
Ö - Ö - O Umlaut, groß
ü - ü - u Umlaut, klein
Ü - Ü - U Umlaut, groß
ß - ß - Scharfes S
& - & - Ampersand-Zeichen
' - ' - Einfaches Anführungszeichen, Apostroph
" - " - Doppeltes Anführungszeichen
< - &lt; - Spitze Klammer, öffnend
> - &gt; - Spitze Klammer, schließend
[ - &#91; - Eckige Klammer, öffnend
] - &#93; - Eckige Klammer, schließend
- &nbsp; - Leerzeichen

Das Leerzeichen muss natürlich nicht maskiert werden. Es kann aber ganz nützlich sein wenn du mehrere Leerzeichen hintereinander darstellen willst. Wenn du nämlich einfach ein paar Mal hintereinander die Leertaste (Space) auf deiner Tastatur drückst liest der Parser das nur als ein einziges Leerzeichen.

Bei SELFHTML findest du eine Liste vieler weiterer Zeichen, die du durch eine bestimmte Zeichenfolge darstellen kannst. Manche davon gibt es allerdings erst seit HTML 4, einige funktionieren also in MapTool wahrscheinlich nicht.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:39 pm 
13.3 - Tabellen

Tabellen sind ein sehr wichtiges Werkzeug um Inhalte zu strukturieren und anzuordnen, egal ob in einem Fenster oder bei der Ausgabe in der Chatbox. Wenn du dich mit HTML auskennst weißt du wahrscheinlich, dass man für diese Zwecke heute eigentlich andere Werkzeuge benutzt. Diese Werkzeuge stehen uns in MapTool wegen der veralteten HTML- und CSS-Unterstützung aber nicht zur Verfügung. Scheue dich also nicht davor Tabellen nach Belieben einzusetzen.

Tabellen gehören zur Kategorie der Block-Elemente (seit HTML 5 zu den Fluss-Elementen). Das bedeutet, dass sie vor und nach sich einen Zeilenumbruch erzwingen. Eine Tabelle steht also quasi als ein einzelner Block in einer Zeile.


Tabelle erstellen

Schauen wir uns an wie so eine Tabelle aussieht:

Code:
<table>
  <tr>
    <td>
      Inhalt Zelle 1
    </td>
    <td>
      Inhalt Zelle 2
    </td>
  </tr>
</table>

<table>...</table>
Erstellt eine Tabelle. Das alleine langt aber nicht, es fehlen noch Zeilen und Zellen.

<tr>...</tr>
Erstellt eine neue Zeile innerhalb einer Tabelle. Die Anzahl der Zeilen in einer Tabelle ist nicht begrenzt (mindestens eine Zeile muss vorhanden sein).

<td>...</td>
Erstellt eine neue Zelle innerhalb einer Zeile. Die Anzahl der Zellen in einer Zeile ist nicht begrenzt (mindestens eine Zelle muss vorhanden sein). In jeder Zeile einer Tabelle müssen allerdings die gleiche Anzahl Zellen vorhanden sein. Wenn du also z. B. eine Tabelle mit drei Zeilen erstellst, und die erste Zeile fünf Zellen enthält, müssen alle anderen Zeilen auch fünf Zellen enthalten.

Jetzt ein Beispiel zum Ausprobieren. Damit es übersichtlicher wird, und du die genaue Einteilung der Zellen sehen kannst, benutzen wir zusätzlich das Attribut "border", mit dem wir Gitternetzlinien für die Tabelle aktivieren können. Später zeige ich dir noch bessere Möglichkeiten um Rahmen zu erstellen.

Code:
[dialog("tabletest"):
  {
    <html>
      <head>
        <title>
          Tabellentest
        </title>
      </head>
      <body>
        <table border='1'>
          <tr>
            <td>
              Zeile 1<br>
              Zelle 1
            </td>
            <td>
              Zeile 1<br>
              Zelle 2
            </td>
            <td>
              Zeile 1<br>
              Zelle 3
            </td>
          </tr>
          <tr>
            <td>
              Zeile 2<br>
              Zelle 1
            </td>
            <td>
              Zeile 2<br>
              Zelle 2
            </td>
            <td>
              Zeile 2<br>
              Zelle 3
            </td>
          </tr>
          <tr>
            <td>
              Zeile 3<br>
              Zelle 1
            </td>
            <td>
              Zeile 3<br>
              Zelle 2
            </td>
            <td>
              Zeile 3<br>
              Zelle 3
            </td>
          </tr>
        </table>
      </body>
    </html>
  }
]

Image


Verschachtelte Tabellen

Tabellen lassen sich beliebig ineinander verschachteln. Du kannst also in jeder Zelle eine weitere Tabelle erstellen. Dadurch lassen sich Inhalte noch besser strukturieren. Aber Achtung: Achte hier besonders auf eine übersichtliche Schreibweise, sonst verlierst du ganz schnell den Überblick.

Hier ein Beispiel. Es handelt sich um eine Tabelle mit zwei Zeilen, in denen jeweils eine Zelle vorhanden ist. Die Zelle in Zeile 1 kann z. B. als Überschrift verwendet werden. Die Zelle in Zeile zwei dagegen enthält eine weitere Tabelle mit einer Zeile und drei Zellen.

Code:
[dialog("tabletest"):
  {
    <html>
      <head>
        <title>
          Tabellentest
        </title>
      </head>
      <body>
        <table border='1'>
          <tr>
            <td>
              Tabelle 1 - Zeile 1 - Zelle 1
            </td>
          </tr>
          <tr>
            <td>
              <table>
                <tr>
                  <td>
                    Tabelle 2<br>
                    Zeile 1<br>
                    Zelle 1
                  </td>
                  <td>
                    Tabelle 2<br>
                    Zeile 1<br>
                    Zelle 2
                  </td>
                  <td>
                    Tabelle 2<br>
                    Zeile 1<br>
                    Zelle 3
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>
  }
]

Image


Vertikale Ausrichtung in Zellen

Später zeige ich dir wie du mit Hilfe von CSS die Höhe von Tabellenzellen festlegen kannst. Dann wird es auch wichtig sein wie du den Inhalt einer Zelle vertikal ausrichten kannst. Das geht mit dem Attribut valign. Das Attribut hat drei mögliche Werte:

  • top - der Inhalt wird am oberen Rand der Zelle ausgerichtet
  • middle - der Inhalt wird mittig ausgerichtet
  • bottom - der Inhalt wird am unteren Rand der Zelle ausgerichtet

Hier ein kleines Beispiel anhand einer Tabellenzelle deren Höhe geändert ist:

Code:
<td style='height: 100px' valign='bottom'>...</td>

Wenn du später bei dem entsprechenden Kapitel angelangt bist, blättere nochmal hierher zurück und probiere es selbst aus.


Rahmenabstand

MapTool fügt unglücklicherweise bei jeder HTML-Tabelle automatisch einen Rahmenabstand ein. Was es damit auf sich hat, und wie du das verhindern kannst, erfährst du später in den Kapiteln über CSS.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:40 pm 
13.4 - DIV Container

DIV Container sind eine praktische Sache, denn damit kannst du mehrere Elemente, z. B. Text, Grafiken und Tabellen, zu einem gemeinsamen Bereich zusammenschließen. Das macht es z. B. leichter wenn du alle Elemente innerhalb eines Bereichs auf einmal formatieren möchtest, z. B. allen eine bestimmte Schriftgröße zuordnen möchtest. Ansonsten müsstest du das bei jedem Element einzeln machen.

Wie das mit dem Formatieren genau funktioniert siehst du später. Schauen wir uns erst mal an wie man einen DIV-Containern erstellt:

Code:
<div>
  Der Inhalt des Containers.
</div>

Mit <div>...</div> erstellst du also einen Container, und markierst so einen gemeinsamen Bereich der dann weitere Elemente enthalten kann. Das ist doch ganz leicht, oder? DIV-Container sind übrigens Block-Elemente, erzwingen also vor und nach sich einen Zeilenumbruch.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:42 pm 
13.5 - Bilder & Grafiken

Wenn du Bilder oder Grafiken in einem Fenster oder in der Chatbox ausgeben willst, musst du diese Bilder vorher erst mal in einer MapTool-Tabelle speichern. Eine MapTool-Tabelle hat nichts mit HTML-Tabellen zu tun. Wenn du dich noch nicht mit MapTool-Tabellen auskennst, schaue dir bitte erst das deutsche Videotutorial dazu an.

Erstelle jetzt eine neue MapTool-Tabelle mit dem Namen "images" und speichere ein beliebiges Bild darin. Vergiss nicht für das Bild eine "Range" anzugeben. Da du nur ein Bild hast wählst du dafür natürlich die "1". Hättest du mehrere Bilder würdest du diese einfach durchnummerieren, also "1, 2, 3, 4" etc.


Die "asset id"

Wenn du ein Bild in einer MapTool-Tabelle speicherst weist MapTool diesem Bild eine einzigartige Adresse zu, die asset id. Diese Adresse brauchst du immer wenn du ein Bild abrufen willst. Dafür benutzt du die Funktion tableImage(), die als Rückgabewert die asset id liefert. Als Parameter gibst du dabei den Namen der Tabelle an, also images, und die Range (bzw. Position) des gewünschten Bildes, also die 1. Probiere es aus:

Code:
[r: tableImage("images", 1)]

Als Ergebnis bekommst du die asset id zurück. Die sieht ungefähr so aus: "asset://dc4931471cda41381ef95c639525dbcb". Da du die Adresse noch benötigst, solltest du sie in einer Variable speichern:

Code:
[h: testbild = tableImage("images", 1)]


Der HTML-Code

Jetzt hast du also die Adresse und kannst mit HTML das Bild anzeigen lassen. Dafür benutzt du das Element img (Abkürzung für "image", auf Deutsch also "Bild"). Dieses Element steht für sich alleine und hat kein Anfang oder Ende. Als Attribut musst du src (Abkürzung für "source", auf Deutsch also "Quelle") angeben. Der Wert des Attributs ist dann die asset id des Bildes. Probiere es aus:

Code:
[h: testbild = tableImage("images", 1)]
<img src='[r: testbild]'>

Wenn du das Bild nur an einer Stelle benötigst, kannst du es dir natürlich auch sparen die Adresse vorher in einer Variable zu speichern:

Code:
<img src='[r: tableImage("images", 1)]'>


ToolTip anzeigen

Praktische Sache: Mit dem Attribut alt (Abkürzung für "alternative", auf Deutsch also "alternativ") kannst du einen ToolTip zum Bild anzeigen lassen. Das ist ein kleiner Text, der erscheint wenn der der User mit der Maus über das Bild fährt.

Code:
<img src='[r: tableImage("images", 1)]' alt='Beispieltext'>

Bei der Erstellung von Webseiten ist das HTML-Attribut eigentlich dazu gedacht einen alternativen Text anzuzeigen, falls das Bild nicht geladen werden kann. In MapTool kannst du das Attribut dagegen für alle möglichen Dinge missbrauchen. Wenn du z. B. das Bild eines NSC's anzeigen willst, könntest du als alternativen Text den Namen des NSC's angeben.


Größe von Bildern ändern

Wenn du ein Bild ausgibst muss das nicht in der Originalgröße des Bildes sein. Du kannst das Bild auch größer oder kleiner anzeigen lassen. Dazu stehen dir gleich zwei Möglichkeiten zur Verfügung.

Bei der ersten Variante gibst du bei der Funktion tableImage() einen dritten Parameter an: die Höhe des Bildes in Pixel. Die Breite des Bildes wird dann von MapTool automatisch angepasst, damit das Bild nicht verzerrt dargestellt wird. Ein Beispiel:

Code:
<img src='[r: tableImage("images", 1, 100)]'>

Bei der zweiten Variante änderst du die Größe des Bildes mit den HTML-Attributen width (Breite des Bildes in Pixel) und height (Höhe des Bildes in Pixel). Ein Beispiel:

Code:
<img src='[r: tableImage("images", 1)]' width='100' height='100'>

Natürlich kannst du auch nur eines der beiden Attribute benutzen. Achte aber darauf, dass hier die Größe nicht automatisch angepasst wird. Wenn du also z. B. nur die Höhe des Bildes änderst, wird es logischerweise verzerrt dargestellt.


Tokenbilder

Statt eines Bildes aus einer MapTool-Tabelle kannst du auch das Bild eines Tokens an beliebiger Stelle ausgeben. Das geht mit der Funktion getTokenImage(). Wie bei Properties bezieht sich diese Funktion immer auf den Current Token.

Code:
<img src='[r: getTokenImage()]'>

Als Parameter kann die Größe, also die Höhe des Bilds angegeben werden. Die Breite wird auch hier automatisch angepasst. Natürlich kannst du zum Ändern der Größe auch wieder die Variante mit den HTML-Attributen benutzen.

Neben dem Bild eines Tokens kannst du mit den Funktionen getTokenPortrait() und getTokenHandout() auch das Token-Portrait oder das Handout-Bild eines Tokens abrufen. Das funktioniert dann genau so wie bei getTokenImage()


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:43 pm 
13.6 - HTML und der Parser

Bereits ziemlich am Anfang habe ich ja schon erwähnt, dass sich MapTool und HTML nicht wirklich gut verstehen. Das Problem ist, dass der Parser zum Lesen von HTML-Tags eine ganze Menge des internen MapTool-Speichers verbraucht, viel mehr als bei normalem Text oder Makro-Befehlen. Und wenn zu viel vom Speicher verbraucht wird kommt es zu einem Fehler, dem sogenannten Stack Overflow. Dein Makro funktioniert dann nicht und du bekommst eine entsprechende Fehlermeldung.

Solange du nur wenig HTML in einem Makro verwendest ist das kein Problem. Wenn du aber richtig viel HTML in einem einzigen Makro verwendest, z. B. bei großen Tabellenkonstruktionen, dann kann es genau das werden: ein Problem. Zum Glück lässt sich dagegen etwas unternehmen. Statt einfach den Text mit den HTML-Tags in das Makro zu schreiben, schreibst du alles in Strings. Der Text und die HTML-Befehle werden somit quasi als Makro-Code getarnt:

Code:
[r: "In diesem String wird <b>HTML</b> verwendet."]

Wenn, wie bei diesem Beispiel, HTML in Makro-Code integriert wird, hat der Parser es beim Lesen gleich wieder viel leichter und verbraucht erheblich weniger Speicher. Klingt vielleicht komisch, ist aber so!

Wenn du große HTML-Konstruktionen baust, z. B. mit Tabellen, möchtest du allerdings bestimmt auch einige Variablen oder Properties innerhalb der HTML-Elemente ausgeben. Das ist aber auch kein Problem. Benutze dann einfach die Funktion strformat wie in Kapitel 5.5 gezeigt. Hier ein kleines Beispiel:

Code:
[h: wurf = 1d6]
[r: strformat("<div>Du hast eine <b>%s</b> gew&uuml;rfelt.</div>", wurf)]


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:45 pm 
14 - CSS

14.1 - CSS Grundlagen


Was ist CSS?

CSS (Cascading Style Sheets) kannst du dir als eine Art Erweiterung zu HTML vorstellen. Die Aufgabe von CSS ist die Formatierung von HTML-Elementen, also z. B. die Schriftgröße von Text oder die Hintergrundfarbe von Tabellen festlegen. Wie HTML hat auch CSS nichts direkt mit MapTool zu tun, wird aber ebenfalls unterstützt.


CSS in diesem Tutorial

Wie auch schon im Kapitel über HTML beschränke ich mich erneut auf die wichtigsten Dinge in Verbindung mit MapTool, alles andere wäre zu ausufernd. Wenn du mehr über CSS und dessen Möglichkeiten erfahren möchtest empfehle ich dir wieder die Seite SELFHTML.Dort findest du nämlich nicht nur alles Wissenswerte über HTML, sondern eben auch alles über CSS.


Die CSS-Version

MapTool unterstützt leider nur eine veraltete CSS-Version, nämlich "CSS Level 1", und selbst davon nicht alle Möglichkeiten. Das musst du beachten falls du dich bereits besser mit CSS auskennst, oder dich entschließt mehr darüber zu lernen. Im Rahmen dieses Tutorials spielt das aber keine Rolle.


Aufbau

Schauen wir uns an wie CSS-Anweisungen, auch Styles genannt, aufgebaut sind. Zuerst kommt die Eigenschaft, dann ein Doppelpunkt (:) und schließlich der Wert für die Eigenschaft. Ein Beispiel:

Code:
font-weight: bold

Die Eigenschaft hier ist font-weight, mit der du die Strichstärke beeinflussen kannst. Als Wert ist bold (fett) angegeben. Die Schrift würde also fett dargestellt werden. Ein weiterer möglicher Wert wäre z. B. "normal" (normale Strichstärke, Standardwert).

Es können natürlich auch mehrere Eigenschaften angegeben werden. Diese werden dann einfach mit einem Semikolon (;) voneinander getrennt:

Code:
font-weight: bold; font-style: italic


Integration

Nun müssen wir die Styles ja auch irgendwie in den Code integrieren, das kannst du auf zwei verschiedene Arten tun. Bei der ersten Möglichkeit benutzt du das HTML-Attribut "style", um die CSS-Anweisung direkt im HTML-Tag für das Element unterzubringen. Dabei werden die CSS-Anweisungen nochmal in Anführungszeichen eingeschlossen:

Code:
<table style='font-weight: bold'>...</table>

In diesem Fall würde also der gesamte Text in der Tabelle, und somit in allen Zellen, fett dargestellt. Nun kann es aber natürlich auch sein, dass du nur ein paar Wörter innerhalb der Tabelle fett darstellen möchtest. Dann wäre diese Variante natürlich nicht sehr hilfreich. Zum Glück gibt es eine weitere Möglichkeit.

span ist ein HTML-Element und wird wie andere Tags gehandhabt, markiert also einen Bereich:

<span>...</span>

Allerdings ist span ein Sonderfall, denn in dieser Form hat es keine Bedeutung. Wirklich, es bewirkt einfach absolut gar nichts. Damit es aber einen Sinn ergibt kannst du es, wie andere Elemente auch, mit CSS formatieren. Also:

Code:
<span style='font-weight: bold'>...</span>

Und hier ein Beispiel:

Code:
In diesem Satz werden nur <span style='font-weight: bold'>zwei Worte</span> fett geschrieben.


Vererbung

Wenn du ein Element mit CSS formatierst wirkt sich das, je nach Eigenschaft, oft auch auf alle untergeordneten Elemente, die sogenannten Tochter- oder Kindelemente aus. Wenn du also z. B. für eine Tabelle die Strichstärke festlegst:

<table style='font-weight: bold'>

wirkt sich das auch auf alle Zeilen (<tr>) und Zellen (<td>) innerhalb der Tabelle aus. Auf übergeordnete Elemente, z. B. <body>, das den gesamten Inhalt enthält, oder andere Elemente außerhalb der Tabelle, wirkt sich die Formatierung nicht aus. Übergeordnete Elemente werden übrigens Elternelemente genannt. Gleichwertige Elemente, also weder über- noch untergeordnet, werden Nachbarelemente genannt.

Tochterelemente kannst du auch unabhängig von dem Elternelement formatieren, also weitere Formatierungen festlegen oder auch die Formatierung des Elternelements überschreiben. Wenn wir bei obigem Beispiel mit der Strichstärke bleiben, könntest du z. B. für eine einzelne Zelle (<td>) eine andere Strichstärke festlegen:

Code:
<table style='font-weight: bold'>
  <tr>
    <td>
      Zelle 1
    </td>
    <td>
      Zelle 2
    </td>
    <td style='font-weight: normal'>
      Zelle 3
    </td>
  </tr>
</table>


Standardwerte

CSS Eigenschaften haben meistens auch Standardwerte. Wenn du in einem Element eine Eigenschaft nicht angibst, und diese Eigenschaft auch nicht von einem Elternelement geerbt wurde, wird automatisch der Standardwert der Eigenschaft genutzt. Nehmen wir als Beispiel wieder die Strichstärke. Wenn also font-weight weder in dem betroffenem Element (z. B. eine Tabellenzelle) noch in einem Elternelement angegeben wird, wird für die Strichstärke immer der Wert "normal" genutzt, da dies der Standardwert von font-weight ist.


Das Box-Modell

Später geht es darum "Boxen" zu formatieren. Dafür solltest du natürlich wissen was "Boxen" überhaupt sind. Das ist zum Glück recht einfach: Eine Box ist ein rechteckiger Kasten. Boxen sind selbst keine Elemente, werden aber von Elementen erzeugt. Eine Tabelle (<table>) oder eine Tabellenzelle (<td>) erzeugen zum Beispiel immer eine Box. DIV Container (<div>) und das body-Element (<body>), in dem der gesamte Inhalt notiert wird, ebenfalls. Diese Boxen lassen sich dann mit CSS-Eigenschaften im entsprechenden HTML-Tag auf vielfältige Weise formatieren.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:47 pm 
14.2 - Farben: Jetzt wird's bunt

Farben angeben

Mit CSS lassen sich einige Dinge auch farblich gestalten, z. B. Schriften, Rahmen und Hintergründe. Wenn du etwas einfärben willst musst du natürlich auch die gewünschte Farbe angeben. Dafür stehen dir unterschiedliche Methoden zu Verfügung.

Bei der ersten Variante kannst du direkt den Namen der Farbe in englischer Sprache angeben. Also z. B. blue (Blau), red (Rot) oder green (Grün). Dabei stehen dir 16 Farben der VGA-Palette zur Verfügung:

Image

16 Farben sind natürlich eine recht karge Auswahl. Daher solltest du besser die zweite Variante wählen und die Farbe in Form von HEX-Code angeben. Damit steht dir quasi jede beliebige Farbe zur Verfügung. Wenn du eine Farbe in HEX-Code angeben willst, wird zuerst eine Raute (#) notiert, und dann die drei Farbanteile für rot, grün und blau in einem Bereich von jeweils "00" bis "FF". Falls du dich mit Farbmodellen auskennst: der Bereich entspricht 0-255 RGB. Nähere technische Erklärungen spare ich mir an dieser Stelle. Als Beispiel schaue dir nochmal die Farbtabelle oben an. Dort findest du zu jeder Farbe auch den passenden HEX-Code.


Tools zur Farbauswahl

Jetzt fragst du dich vielleicht wie du ohne viel Aufwand an den HEX-Code einer beliebigen Farbe kommst. Dafür gibt es praktischerweise kleine Helferlein bei denen du nur die gewünschte Farbe auswählen musst, und dir der dazugehörige HEX-Code anschließend angezeigt wird. Zwei verschiedene Tools habe ich für dich herausgesucht:

  • Auf der Seite HTML Color Codes findest du den HTML Color Picker. Wähle einfach die gewünschte Farbe aus und unten rechts wird dir der passende HEX-Code dazu angezeigt. Das funktioniert komplett online, du musst also nichts herunterladen, und kostenlos ist es natürlich auch.
  • Wenn du lieber ein Tool bevorzugst das du auch Offline nutzen kannst empfehle ich den pkColorPicker. Auch hier musst du nur die Farbe auswählen um den HEX-Code angezeigt zu bekommen. pkColorPicker ist sehr kompakt, leicht zu bedienen und kann kostenlos heruntergeladen werden.


Farben richtig einsetzen

Sobald Farben ins Spiel kommen musst du damit auch immer etwas vorsichtig umgehen. Wenn du einfach wild drauflos ballerst hast du schnell irgendetwas fabriziert, das eher Augenkrebs verursacht als dem Auge zu schmeicheln. Hier ein paar Dinge auf die du achten solltest:

  • Verwende keine grellen Farben oder Neonfarben.
  • Verwende immer Farben die gut miteinander harmonieren.
  • Verwende immer Farben die zum Thema passen.
  • Achte unbedingt auf den Kontrast zwischen Vorder- und Hintergrund damit Schrift immer gut leserlich ist.
  • Auch bei längerer Betrachtung dürfen Farben und Gesamtbild nicht störend oder irritierend wirken.
  • Auch bei längerer Betrachtung dürfen Farben und Gesamtbild das Auge nicht ermüden.

Ich möchte jetzt hier nicht weiter ins Detail gehen. Aber wenn du dich für das Thema interessierst, schaue doch mal auf der Seite metacolor.de vorbei. Dort findest du viele Hinweise und Tutorials zum richtigen Einsatz von Farben (Farb- und Harmonielehre). Der Titel der Seite ist zwar "Farben im Webdesign", aber die meisten Informationen sind universell einsetzbar.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:49 pm 
14.3 - Übungsvorbereitungen

In den nächsten Kapiteln zeige ich dir die wichtigsten CSS-Eigenschaften und einige ihrer möglichen Werte. Wie du diese anwendest weißt du ja schon, daher beschränke ich mich auf einfache Beispiele. Um etwas Praxiserfahrung zu sammeln solltest du natürlich trotzdem alles selbst ausprobieren. Baue dir dafür am besten ein neues Makro mit einem Fenster und einer kleinen Tabelle. Daran kannst du dann nach Herzenslust herumdoktern:

Code:
[dialog("csstest"):
  {
    <html>
      <head>
        <title>
          CSS Test
        </title>
      </head>
      <body>
        Ich bin Text. Bitte formatiere mich.
        <br><br>
        <table>
          <tr>
            <td>
              Ich bin eine Zelle und will formatiert werden.
            </td>
            <td>
              Ich mag meine Abst&auml;nde nicht.
            </td>
          </tr>
          <tr>
            <td>
              Bitte zentriere mich.
            </td>
            <td>
              Machst du mich höher?
            </td>
          </tr>
        </table>
      </body>
    </html>
  }
]


Unterstützte Styles

In der MapTool-Wiki findest du eine Liste aller unterstützten CSS Eigenschaften und Werte. Diese Liste ist jedoch nicht ganz vollständig. Wenn du dich bereits etwas mit CSS auskennst, und andere Eigenschaften oder Werte nutzen willst als diejenigen, die in diesem Tutorial oder in der Wiki-Liste angegeben sind, musst du eben einfach ausprobieren ob sie unterstützt werden. Zuviel Hoffnung solltest du dir dabei aber nicht machen.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 12:59 pm 
14.4 - Text formatieren

14.4.1 - Schriftformatierungen

Angaben zur Schriftformatierung haben Einfluss auf die Gestaltung der Schrift, also z. B. Schriftart oder Schriftgröße. Dadurch machen sie für alle Elemente Sinn die Text enthalten können. Beachte jedoch, dass bei Schriftformatierungen, je nach Schriftart, Unterschiede zwischen den verschiedenen Werten einer Eigenschaft eventuell kaum oder gar nicht vorhanden sind, da nicht jede Schriftart alle möglichen Werte unterstützt.


Schriftart

Mit font-family lässt sich die Schriftart ändern. Die Schriftart muss jedoch auch beim User installiert sein, damit sie angezeigt werden kann. Ist sie nicht installiert bleibt die Angabe wirkungslos. Aus diesem Grund empfiehlt es sich nur Standardschriftarten zu verwenden, oder bei der MapTool-Standardschriftart zu bleiben, diese Eigenschaft also komplett zu ignorieren. Es können auch mehrere Schriftarten angegeben werden, die dann durch ein Komma voneinander getrennt werden müssen. Dabei muss auf die Reihenfolge geachtet werden. Ist die erste Schriftart nicht verfügbar, wird die zweite genutzt. Ist diese auch nicht verfügbar, die dritte Schriftart, usw.

Eigenschaft: font-family

Werte: Namen der Schriftarten

Vererblich: Ja

Beispiel 1:
Code:
<span style='font-family: Georgia'>...</span>

Beispiel 2:
Code:
<span style='font-family: Arial, Helvetica, Georgia'>...</span>



Schriftstil

Mit font-style lässt sich ein Schriftstil, also die Neigung der Schrift festlegen. Zur Auswahl stehen "Normal" (keine Neigung), "Kursiv" und "Schräg gestellt".

Eigenschaft: font-style

Werte:

- normal (normaler Schriftstil)
- italic (kursiv)
- oblique (schräg gestellt)

Standardwert: normal

Vererblich: Ja

Beispiel:
Code:
<span style='font-style: italic'>...</span>



Schriftgröße

Mit font-size lässt sich die Schriftgröße bestimmen. Dabei stehen verschiedene numerische, absolute und relative Werte zur Auswahl. Normalerweise bietet es sich an einen numerischen Wert in der Maßeinheit "pt" (Punkt) zu wählen, so lässt es sich auch sehr gut einheitlich arbeiten.

Eigenschaft: font-size

Numerische Werte:

- pt (Punkt)
- px (Pixel)

Absolute Werte:

- xx-small (winzig)
- x-small (sehr klein)
- small (klein)
- medium (mittel)
- large (groß)
- x-large (sehr groß)
- xx-large (riesig)

Relative Werte:

- smaller (kleiner als im Elternelement)
- larger (größer als im Elternelement)

Vererblich: Ja

Beispiel 1:
Code:
<span style='font-size: 14pt'>...</span>

Beispiel 2:
Code:
<span style='font-size: x-large'>...</span>



Strichstärke

Mit font-weight lässt sich die Strichstärke bestimmen, also die Dicke und Stärke einer Schrift. Es stehen absolute und relative Werte zur Auswahl.

Eigenschaft: font-weight

Absolute Werte:

- normal (normale Strichstärke)
- bold (fett)
- 100, 200, 300, 400, 500, 600, 700, 800, 900 (100 = extradünn, 500 = medium, 900 = extrafett)

Relative Werte:

- lighter (dünner als im Elternelement)
- bolder (fetter als im Elternelement)

Standardwert: normal

Vererblich: Ja

Beispiel:
Code:
<span style='font-weight: bold'>...</span>



Schriftformatierungen zusammenfassen

Mit der Eigenschaft font lassen sich alle oben genannten Schriftformatierungen zusammenfassen. Dabei werden für die verschiedenen Eigenschaften nur die Werte angegeben und durch ein Leerzeichen voneinander getrennt. Ein Beispiel:

Code:
<span style='font: bold italic 12pt Arial, Helvetica, Georgia'>...</span>

Dabei gilt es einige Dinge zu beachten:

  • Bei der Angabe der Werte muss folgende Reihenfolge eingehalten werden: Strichstärke, Schriftstil, Schriftgröße, Schriftart
  • Die Werte von font-size und font-family müssen angegeben werden. Werte anderer Eigenschaften sind optional.
  • Die Eigenschaft font wird an Tochterelemente vererbt.


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 1:01 pm 
14.4.2 - Textformatierungen

Mit Angaben zur Textformatierung lässt sich Text auf diverse Arten gestalten und dekorieren. Dadurch machen sie für alle Elemente Sinn die Text enthalten können.


Textfarbe

Mit color lässt sich die Farbe der Schrift bzw. des Textvordergrundes ändern.

Eigenschaft: color

Werte: Farbname oder HEX-Code einer Farbe

Vererblich: Ja

Beispiel 1:
Code:
<span style='color: Blue'>...</span>

Beispiel 2:
Code:
<span style='color: #0000FF'>...</span>



Textdekoration

Mit text-decoration lässt sich Text dekorieren, also unterstrichen oder durchgestrichen darstellen.

Eigenschaft: text-decoration

Werte:

- none (keine Dekoration)
- underline (unterstrichen)
- line-through (durchgestrichen)

Standardwert: none

Vererblich: Nein

Beispiel:
Code:
<span style='text-decoration: underline'>...</span>


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 1:04 pm 
14.4.3 - Textausrichtung

Mit Angaben zur Textausrichtung kann Text innerhalb von Elementen auf verschiedene Arten ausgerichtet werden.


Horizontale Ausrichtung

Mit text-align lassen sich Text und inline-Elemente (Elemente die keinen Zeilenumbruch erzeugen) wie Bilder (img) innerhalb eines Blocklevel-Elements, also z. B. einem DIV-Container oder einer Tabellenzelle, horizontal ausrichten. Auch verschachtelte Tabellen, also eine Tabelle innerhalb einer Tabellenzelle, lassen sich so ausrichten.

Eigenschaft: text-align

Werte:

- left (linksbündig ausgerichtet)
- right (rechtsbündig ausgerichtet)
- center (zentriert ausgerichtet)

Vererblich: Ja

Beispiel:
Code:
<td style='text-align: center'>...</td>


Vertikale Ausrichtung

Mit vertical-align lässt sich Text vertikal ausrichten, also hoch- oder tiefstellen.

Eigenschaft: vertical-align

Werte:

- baseline (normale Ausrichtung)
- sub (tiefgestellt)
- super (hochgestellt)

Standardwert: baseline

Vererblich: Nein

Beispiel:
Code:
<span style='vertical-align: sub'>...</span>


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 1:05 pm 
14.5 - Boxen formatieren

14.5.1 - Größenangaben

Zuerst musst du wissen, dass es zwei verschiedene Typen von HTML-Elementen gibt: Jene, dessen Breite sich an ihren Inhalt anpassen, und solche, dessen Breite von ihrem Elternelementen bestimmt werden. Bei beiden Typen wird die Höhe immer an den Inhalt angepasst. Um ein ansprechendes und praktisches Design zu gestalten kannst du die Abmessungen für Boxen aber auch direkt festlegen.

Mit width lässt sich die Breite in Pixel bestimmen. Die Maßeinheit darf dabei nicht angegeben werden, nur der reine Zahlenwert. Ein Beispiel:

Code:
<div style='width: 400'>...</div>

Mit height lässt sich die Höhe in Pixel bestimmen. Die Maßeinheit darf dabei nicht angegeben werden, nur der reine Zahlenwert. Ein Beispiel:

Code:
<td style='height: 300'>...</td>


Tipp: Messwerkzeuge

Wenn du Fenster mit Charakterbögen oder anderen Inhalten bastelst, und ein ansprechendes Ergebnis haben möchtest, wirst du sehr oft Größenangaben benötigen und dabei auch pixelgenau arbeiten müssen. Da macht es vieles leichter wenn du die Größe von Tabellen und anderen Elementen direkt am Bildschirm abmessen kannst. Dafür möchte ich dir das kostenlose Tool Pixel Lineal empfehlen. Es ist schlank, einfach zu bedienen und hat gleich eine Bildschirmlupe mit dabei. Probiere es mal aus!


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 1:18 pm 
14.5.2 - Rahmen

Es gibt diverse Eigenschaften mit denen sich der Rahmen einer Box auf ganz verschiedene Arten darstellen lässt.


Rahmen & Rahmendicke

Mit border-with lässt sich ein Rahmen für eine Box anzeigen. Gleichzeitig wird die Dicke des Rahmens in Pixel angegeben.

Eigenschaft: border-with

Werte: px

Vererblich: Nein

Beispiel:
Code:
<td style='border-width: 5px'>...</td>

Rahmen und Rahmendicke können auch für alle vier Seiten einer Box separat festgelegt werden. Dafür stehen folgende Eigenschaften zur Verfügung:

  • border-top-width - Rahmen oben
  • border-right-width - Rahmen rechts
  • border-bottom-width - Rahmen unten
  • border-left-width - Rahmen links

Statt einzeln kann der Rahmen auch für alle vier Seiten gleichzeitig bestimmt werden. Dabei werden dann alle vier Werte in der Reihenfolge "oben, rechts, unten, links" nacheinander notiert, und durch ein Leerzeichen voneinander getrennt. Beispiel:

Code:
<td style='border-width: 1px 5px 1px 5px'>...</td>


Rahmentyp

Mit border-style lässt sich die Art des Rahmens anpassen. Ohne die Kombination mit border-with hat die Eigenschaft keine Wirkung.

Eigenschaft: border-style

Werte:

- none (kein Rahmen, bzw. unsichtbarer Rahmen)
- dotted (gepunktet)
- dashed (gestrichelt)
- solid (durchgezogen)
- double (doppelt durchgezogen)
- groove (3D-Effekt)
- ridge (3D-Effekt)
- inset (3D-Effekt)
- outset (3D-Effekt)

Standardwert: none

Vererblich: Nein

Beispiel:
Code:
<td style='border-width: 5px; border-style: solid'>...</td>

Der Rahmentyp kann auch für alle vier Seiten einer Box separat festgelegt werden. Dafür stehen folgende Eigenschaften zur Verfügung:

  • border-top-style - Rahmentyp oben
  • border-right-style - Rahmentyp rechts
  • border-bottom-style - Rahmentyp unten
  • border-left-style - Rahmentyp links

Statt einzeln kann der Rahmentyp auch für alle vier Seiten gleichzeitig bestimmt werden. Dabei werden dann alle vier Werte in der Reihenfolge "oben, rechts, unten, links" nacheinander notiert, und durch ein Leerzeichen voneinander getrennt. Beispiel:

Code:
<td style='border-style: dotted solid dashed solid'>...</td>


Rahmenfarbe

Mit border-color lässt sich eine Farbe für den Rahmen bestimmen. Ohne die Kombination mit border-with hat die Eigenschaft keine Wirkung.

Eigenschaft: border-color

Werte: Farbname oder HEX-Code einer Farbe

Vererblich: Nein

Beispiel 1:
Code:
<td style='border-width: 5px; border-color: Blue'>...</td>

Beispiel 2:
Code:
<td style='border-width: 5px; border-color: #0000FF'>...</td>

Die Rahmenfarbe kann auch für alle vier Seiten einer Box separat festgelegt werden. Dafür stehen folgende Eigenschaften zur Verfügung:

  • border-top-color - Rahmenfarbe oben
  • border-right-color - Rahmenfarbe rechts
  • border-bottom-color - Rahmenfarbe unten
  • border-left-color - Rahmenfarbe links

Statt einzeln kann die Rahmenfarbe auch für alle vier Seiten gleichzeitig bestimmt werden. Dabei werden dann alle vier Werte in der Reihenfolge "oben, rechts, unten, links" nacheinander notiert, und durch ein Leerzeichen voneinander getrennt. Beispiel:

Code:
<td style='border-color: Blue Green Yellow Red'>...</td>


Rahmeneigenschaften zusammenfassen

Mit der Eigenschaft border lassen sich alle oben genannten Rahmeneigenschaften zusammenfassen. Dabei werden für die verschiedenen Eigenschaften die Werte in der Reihenfolge "Rahmendicke, Rahmentyp, Rahmenfarbe" angegeben, und durch ein Leerzeichen voneinander getrennt. Ein Beispiel:

Code:
<td style='border: 2px solid Green'>...</td>


Rahmenabstand

Mit border-spacing lässt sich der Abstand zwischen Rahmen von Tabellenelementen in Pixel festlegen.

Eigenschaft: border-spacing

Werte: px

Beispiel:
Code:
<table style='border-spacing: 10px'>...</table>

Zum besseren Verständnis hier eine Beispielgrafik mit einer Tabelle und einem Rahmenabstand von 10 Pixel:

Image

Achtung: Obwohl es eigentlich nicht sein sollte, wird bei jeder HTML-Tabelle in MapTool automatisch ein Rahmenabstand eingefügt. Das liegt an JAVA, aber eine nähere Erklärung spare ich mir an dieser Stelle. In den meisten Fällen stört dieser automatische Rahmenabstand, z. B. wenn du keine Abstände haben möchtest, die Abstände auf eine andere Weise festlegst, oder Hintergrundgrafiken verwendest. Solange du also nicht explizit Rahmenabstände verwenden möchtest, denke bei jeder Tabelle daran die Eigenschaft border-spacing mit einem Wert von "0" Pixel zu notieren:

Code:
<table style='border-spacing: 0px'>...</table>


Last edited by Thargun on Thu Oct 08, 2015 7:15 am, edited 1 time in total.

Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 1:22 pm 
14.5.3 - Abstände

Für Boxen lassen sich Innen- und Außenabstand festlegen.


Innenabstand

Mit padding lässt sich ein Innenabstand in Pixel festlegen. Der Innenabstand ist der Leerraum zwischen dem Inhalt eines Elements und seinem Rand, also z. B. zwischen dem Text innerhalb einer Tabellenzelle und dem Rahmen der Tabellenzelle.

Eigenschaft: padding

Werte: px

Vererblich: Nein

Beispiel:
Code:
<td style='padding: 10px'>...</td>

Der Abstand kann auch für alle vier Seiten einer Box separat festgelegt werden. Dafür stehen folgende Eigenschaften zur Verfügung:

  • padding-top - Innenabstand oben
  • padding-right - Innenabstand rechts
  • padding-bottom - Innenabstand unten
  • padding-left - Innenabstand links

Statt einzeln kann der Innenabstand auch für alle vier Seiten gleichzeitig bestimmt werden. Dabei werden dann alle vier Werte in der Reihenfolge "oben, rechts, unten, links" nacheinander notiert, und durch ein Leerzeichen voneinander getrennt. Beispiel:

Code:
<td style='padding: 3px 10px 3px 10px'>...</td>

Es können auch nur zwei oder drei Werte angegeben werden. Dann gilt:

  • Bei zwei Angaben: 1. Wert für Innenabstand oben und unten, 2. Wert für Innenabstand links und rechts
  • Bei drei Angaben: 1. Wert für Innenabstand oben, 2. Wert für Innenabstand links und rechts, 3. Wert für Innenabstand unten


Außenabstand

Mit margin lässt sich ein Außenabstand in Pixel festlegen. Der Außenabstand ist der Leerraum zwischen dem aktuellen Element und seinem Elternelement oder benachbarten Elementen, also z. B. der Abstand zwischen zwei aufeinanderfolgenden Tabellen. Beachte, dass bei Tabellenelementen nur der eigentlichen Tabelle (<table>) ein Außenabstand zugewiesen werden kann.

Eigenschaft: margin

Werte: px

Vererblich: Nein

Beispiel:
Code:
<table style='margin: 10px'>...</table>

Der Abstand kann auch für alle vier Seiten einer Box separat festgelegt werden. Dafür stehen folgende Eigenschaften zur Verfügung:

  • margin-top - Außenabstand oben
  • margin-right - Außenabstand rechts[
  • margin-bottom - Außenabstand unten
  • margin-left - Außenabstand links

Statt einzeln kann der Außenabstand auch für alle vier Seiten gleichzeitig bestimmt werden. Dabei werden dann alle vier Werte in der Reihenfolge "oben, rechts, unten, links" nacheinander notiert, und durch ein Leerzeichen voneinander getrennt. Beispiel:

Code:
<table style='margin: 3px 10px 3px 10px'>...</table>

Es können auch nur zwei oder drei Werte angegeben werden. Dann gilt:

  • Bei zwei Angaben: 1. Wert für Außenabstand oben und unten, 2. Wert für Außenabstand links und rechts
  • Bei drei Angaben: 1. Wert für Außenabstand oben, 2. Wert für Außenabstand links und rechts, 3. Wert für Außenabstand unten


Top
 Profile  
 
 Offline
Giant
 
Joined: Sun Sep 14, 2014 3:27 am
Posts: 182
 Post subject: Re: Macros for Dummies - A guide to MapTool-Macros (german)
PostPosted: Tue Sep 29, 2015 1:23 pm 
14.6 - Hintergrundfarben

Mit background-color kann Elementen eine Hintergrundfarbe zugewiesen werden.

Eigenschaft: background-color

Werte: Farbname oder HEX-Code einer Farbe

Vererblich: Nein

Beispiel 1:
Code:
<span style='background-color: yellow'>...</span>

Beispiel 2:
Code:
<td style='background-color: #FFFF00'>...</td>

Beispiel 3:
Code:
<body style='background-color: #FFFF00'>...</body>


Top
 Profile  
 
Display posts from previous:  Sort by  
Reply to topic  [ 154 posts ]  Go to page Previous  1 ... 3, 4, 5, 6, 7, 8, 9 ... 11  Next

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:

Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest (based on users active over the past 5 minutes)
Most users ever online was 243 on Sun Nov 04, 2012 6:14 am

Users browsing this forum: No registered users and 1 guest





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group

Style based on Andreas08 by Andreas Viklund

Style by Elizabeth Shulman