Hilfe:Beispiele: Unterschied zwischen den Versionen

Aus GoPalWiki
Wechseln zu: Navigation, Suche
K (Interne CSS-Klassen)
K (Interne CSS-Klassen)
Zeile 92: Zeile 92:
 
*'''wikitable''' formatiert auf einfache Weise Tabellen
 
*'''wikitable''' formatiert auf einfache Weise Tabellen
 
Statt
 
Statt
  <nowiki>{|</nowiki>style="margin: 1em 1em 1em 0px;  <br>border-collapse: collapse;  <br>empty-cells: show; <br>background: rgb(249,249,249);  <br>border-bottom: rgb(170,170,170) 2px solid;  <br>border-left: rgb(170,170,170) 2px solid;  <br>border-top: rgb(170,170,170) 2px solid; <br>border-right: rgb(170,170,170) 2px solid"  
+
  <nowiki>{|</nowiki>style="margin: 1em 1em 1em 0px;  <br>empty-cells: show; <br>background: rgb(249,249,249);  <br>border-collapse: collapse;  <br>border-bottom: rgb(170,170,170) 2px solid;  <br>border-left: rgb(170,170,170) 2px solid;  <br>border-top: rgb(170,170,170) 2px solid; <br>border-right: rgb(170,170,170) 2px solid"  
 
Schreibt ihr einfach
 
Schreibt ihr einfach
 
  <nowiki>{|</nowiki>class="wikitable"
 
  <nowiki>{|</nowiki>class="wikitable"

Version vom 5. Januar 2013, 13:24 Uhr


Darstellung von Script-, Scinning- und sonstigen Anweisungen

Bedeutet:

  • alle Zeichen mit gleicher Zeichenbreite
  • es werden keine automatischen Umbrüche eingefügt
  • Rahmen und Hintergrund (nur bei Codierung mit Leerzeichen)
  • Befehlszeilen sollten nicht länger als 40-50 Zeichen sein, sonst sind sie außerhalb des Bildschirmfensters

Ein Leerzeichen am Zeilenanfang erzeugt Quellcodedarstellung mit Rahmen und Hintergrund:

So codiert:

 Das ist eine Quellanweisung

So sieht es dann aus:

Das ist eine Quellanweisung

Quellcode mitten im Text:

So codiert:

Das ist <code>eine Codeanweisung</code> mitten im Text.

So sieht es dann aus: Das ist eine Codeanweisung mitten im Text.

Mehrere Zeilen:

So codiert:

<code>Zeile1

Zeile2</code>

So sieht es dann aus:

Zeile1

Zeile2

Achtung

ohne Text

{{Achtung}}
Achtung!

mit Text

{{Achtung|Achtungstext}}

Hier darf kein Leerzeichen zwischen dem senkrechten Strich und dem Achtungstext sein!

Achtungstext

Hinweis

ohne Text

{{ Hinweis | }}

Hinweis: 

mit Text

{{Hinweis | kurzer Text }}

Hinweis:  kurzer Text Hinweis:  Langer Text - Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text.

Wichtiger Hinweis

ohne Text

{{Wichtiger Hinweis | }}
Achtung.png Wichtiger Hinweis!

mit Text

{{Wichtiger Hinweis | kurzer Text }}
Achtung.png Wichtiger Hinweis! kurzer Text
Achtung.png Wichtiger Hinweis! Langer Text - Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text Eigener Text.

Einbindung von Videodateien

Einbindung einer flv-Ddatei

<mediaplayer>http://www.gopal-navigator.de/wiki/videos/test3.flv</mediaplayer>

<mediaplayer>http://www.gopal-navigator.de/wiki/videos/test3.flv</mediaplayer>

Einbindung einer swf-Datei

<swf width="400" height="300">/wiki/videos/test.swf</swf>

<swf width="400" height="300">/wiki/videos/test.swf</swf>

Benutzung von CSS-Klassen

Durch Benutzung von CSS-Klassen könnt Ihr die Text- und Tabellengestaltung stark vereinfachen.

Interne CSS-Klassen

Einige CSS-Klassen werden durch das Media-WIKI-System festgelegt und definiert wie z.B. die folgenden, die besonders für Tabellen interessant sind:

  • wikitable formatiert auf einfache Weise Tabellen

Statt

{|style="margin: 1em 1em 1em 0px;  
empty-cells: show;
background: rgb(249,249,249);
border-collapse: collapse;
border-bottom: rgb(170,170,170) 2px solid;
border-left: rgb(170,170,170) 2px solid;
border-top: rgb(170,170,170) 2px solid;
border-right: rgb(170,170,170) 2px solid"

Schreibt ihr einfach

{|class="wikitable"
  • sortable macht Tabellen umsortierbar

Ihr schreibt einfach

{|class="sortable"

bzw.

{|class="wikitable sortable"
  • unsortable schließt Spalten von der Sortierbarkeit aus
|class="unsortable"
  • sortbottom schließt Zeilen von der Sortierbarkeit aus
|-class="sortbottom"
  • hiddenStructure macht Zellen unsichtbar
class="hiddenStructure"

Dies wird in diesem Wiki benutzt um Zellen in Vorlagen bedingt darzustellen (#IF gibt es hier nicht). Ein Beispiel dafür ist die Infobox_Software.

|- class{{{1|}}}="hiddenStructure"|

Erläuterung: Ist die 1. Parameter beim Aufruf nicht angegeben, wird die folgende Tabellenzeile ausgeblendet.

CSS-Klassen von Admins definiert

Weitere CSS-Klassen werden durch die Administratoren und Bürokraten] im System definiert, aber jeder sollte diese benutzen. Es dient der Vereinfachung und Vereinheitlichung des Aussehens.

Ich habe z.B. in der Hauptseite folgende von den Administratoren benutzte CSS gefunden, jedoch wurden diese bisher leider noch nicht von diesen dokumentiert:

  • FCK__ShowTableBorders

(das ist evtl. eine System-Klasse, die Funktion und Benutzung ist mir aber noch nicht bekannt).

<p class="FCK__ShowTableBorders">FCK__ShowTableBorders</p>

"FCK__ShowTableBorders"

  • aktuell
<div class="aktuell">
  • News
<div class="News">
  • wichtige Links
< div class="wichtige Links">
  • inhalt
<p class="inhalt"> class="inhalt"</p>

Test class="inhalt"

  • Hardware
<p class="Hardware"> class="Hardware"</p>

Test class="Hardware"

  • Zusatz-Software
<p class="Zusatz-Software">Test class="Zusatz-Software"</p>

class="Zusatz-Software"

<p class="Inhalt1">class="Inhalt1"</p>

class="Inhalt1"

<p class="Skinning">class="Skinning"</p>

class="Skinning"

<p class="Geräteübersicht">class="Geräteübersicht"</p>

class="Geräteübersicht"