CSS Styles für Torwelten

Achtung: Dieses Wiki enthält Grafiken für die CSS von TorWeltenCOM!

In diesem Wiki werden schicke CSS Klassen zur Gestaltung der Seiten vorgestellt und ihre Anwendung demonstriert. Tipp: Die Beispieltexte in den Boxen enthalten wichtige Hinweise zur Benutzung ...

1. Infoboxen - allgemeine Einführung ...

1.1. Infobox blau

~!MINIPAGE($class=infobox-blau,$width=90)
Inhalt der Infobox
!~

Der wichtigste Hinweis
Der $width=Wert sollte 90 betragen - bei 100 läuft der Text über den Rahmen hinaus. Ich werde das jetzt nicht demonstrieren, wenn ihr mir nicht glaubt, könnt ihr es selbst ausprobieren ... mich hat es genug Zeit gekostet, das Problem zu lösen.

1.2. Infobox grau

~!MINIPAGE($class=infobox-grau,$width=90)
Inhalt der Infobox
!~


Eine Überschrift mit ~p
Prinzipiell funktioniert die Überschrift so, während die höherrangigen Überschriften ~ bis ~~~ innerhalb von MINIPAGEs nicht gehen ...
Allerdings wird an dieser Stelle deutlich davon abgeraten die ~p Überschrift zu verwenden. Die Antwort auf daas 'Warum?' findest du weiter unten.

1.3. Infobox rot

~!MINIPAGE($class=infobox-rot,$width=90)
Inhalt der Infobox
!~


Farben
Wie du aber besonders an dieser Box siehst, zieht die ~p Überschrift ihre graue Farbe aus der CSS h1-h6 Definition ...
Wenn man das aber dort nicht definiert, sind die Überschriften dummerweise schwarz und ganz unlesbar ...

Darum gilt die Empfehlung innerhalb der Infoboxen Pseudoüberschriften zu benutzen:
~* ~%12 Überschrift %~ *~ ...

Überschrift

Das sieht einfach deutlich besser aus und es gibt noch einen anderen guten Grund die Überschriften innerhalb von Infoboxen so zu erstellen - dieser Grund wird weiter unten gezeigt...
Der Vollständigkeit halber: Man kann auch Tabellen in Infoboxen verwenden, aber auch die ziehen sich ihre Farben von außen, besonders die Rahmenfarbe aber auch die Textfarbe ...
Nichtsdestotrotz, nur als Hinweis, Tabellen lassen sich in den Infoboxen prinzipiell benutzen... 

PRE Texte funktionieren - aber Vorsicht, die werden nicht automatisch umgebrochen.
Wenn eine Zeile zu lang ist, laufen sie über ...

1.4. Infobox gelb

~!MINIPAGE($class=infobox-gelb,$width=90)
Inhalt der Infobox
!~

Es gibt übrigens auch noch diese Box in gelb ...

1.5. Infobox grün

~!MINIPAGE($class=infobox-gruen,$width=90)
Inhalt der Infobox
!~

... und der Vollständigkeit halber, dasselbe in Grün.

2. Verwendung der Infoboxen

2.1. DataLINKS


Diese blaue Infobox ist für IT-Texte, die als Datalinks-Terminal-Info angezeigt werden. Um den DataLINKS-Schriftzug einzufügen, kommt direkt in die Zeile mit der ~!MINIPAGE-Definition der Aufruf des entsprechenden Bildes

~IMG($class=infobox-header,$align=right)=_/datalinks.png

Achtung, der Aufruf muss so erfolgen, dass die Grafik aus TorWeltenCOM_CSS eingebunden wird.

2.2. Anekdoten, Hinweise, Vergleiche

Damit du es weißt
Diese eleganten grauen Boxen sind für Hinweise, Anekdoten und Kurzgeschichten gedacht. Da dieses Box keine Ecküberschrift enthält kann der Text gleich hinter dem ~!MINIPAGE Aufruf stehen, dann ist die Box oben nicht so leer - so wie in diesem Beispiel!

Hinweis: Bei einer ~p-Überschrift führt dies zu einem Fehler, auch bei ~c u.ä. aber ~* funktioniert - die Überschriftsformatierung also mit der Fettauszeichung einleiten.

2.3. Infobox Regelwerk: Regeloption


Nahkampf

Anstatt zu würfeln, könnt ihr den Schwertkampf natürlich auch direkt austragen. Aber denkt daran: Spielertod = Charaktertod.

~IMG($class=infobox-header,$align=right)=_/regeloption.png

2.4. Infobox Regelwerk: Tipp


Schaut während des Spiels nicht ins Regelwerk! 

~IMG($class=infobox-header,$align=right)=_/tipp.png

2.5. Infobox Regelwerk: Warnhinweis

In Rot für gefährliche Stolpersteine im Regelwerk!

~IMG($class=infobox-header,$align=right)=_/warnung.png

3. Ein Wort der Warnung!

Es ist möglich mehrere Infoboxen in einem Textabschnitt einzusetzen ...

... so lange man keine ~p Überschriften verwendet ... Ich hatte das ja oben schon erwähnt, als ich mich zu den Farben geäußert habe ...

Benutzt man nämlich ~p Überschriften in mehreren MINIPAGEs in einem Überschriftsblock kommt es zu solchen Effekten:


Ein Überschrift
Der Inhalt einer Infobox


Noch eine Überschrift
Und das ist eine andere Infobox ...

Uh Oh!

4. Ein Terminal

~!MINIPAGE($class=databox,$width=90)
Inhalt der Databox
!~


Das Ding hier funktioniert im Endeffekt genauso - sieht halt noch mal ein bisschen anders aus - vielleicht baue ich das aber noch mal neu ... Also noch nicht zu exzessiv verwenden ...

Aufgrund des breiteren Randes, sollte man hier eine $width von maximal 85 setzen

Die Infoboxen dürfen benutzt werden - die bleiben so ...

5. Rechter Seitenabschluss

Auf den folgenden Seiten wird der rechte Seitenabschluss als background in body.wiki definiert:
  • TorWeltenCOM (nur streifen)
    bg-wt.png
    #000000
  • TorWeltenCOM_Ausruestung
    bg-ausruestung.png
    bg-wt.png
    #000000
  • TorWeltenCOM_Regeln
    bg-regelwerck.png
    bg-wt.png
    #000000
  • TorWeltenCOM_Universum
    bg-regelwerck.png
    bg-wt.png
    #000000
  • TorWeltenCOM_Spielleiter
    bg-regelwerck.png
    bg-wt.png
    #000000
Möglicherweise könnte man auch für die folgenden Unterbereiche welche erstellen
  • TorWeltenCOM_Abenteuer
  • TorWeltenCOM_Downloads

Letzte Änderung am 15.1.2015 um 13:40:45 Uhr von Eric


Linksymbole
interner Link
Weblink