Hilfe:Benutzung von CSS: Unterschied zwischen den Versionen

Aus GoPalWiki
Wechseln zu: Navigation, Suche
K (Interne CSS-Klassen)
K (Textersetzung - „z.B.“ durch „z. B.“)
 
(18 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 
 
Durch Benutzung von CSS-Klassen könnt Ihr die Text- und Tabellengestaltung stark vereinfachen.
 
Durch Benutzung von CSS-Klassen könnt Ihr die Text- und Tabellengestaltung stark vereinfachen.
  
 
=== Interne MediaWiki CSS-Klassen ===
 
=== Interne MediaWiki CSS-Klassen ===
  
Einige CSS-Klassen werden durch das MediaWiki-System festgelegt und definiert wie z.B. die folgenden, die besonders für Tabellen interessant sind:
+
Einige CSS-Klassen werden durch das MediaWiki-System festgelegt und definiert wie z. B. die folgenden, die besonders für Tabellen interessant sind:
 
*[http://www.mediawiki.org/wiki/Help:Tables '''wikitable'''] formatiert auf einfache Weise Tabellen
 
*[http://www.mediawiki.org/wiki/Help:Tables '''wikitable'''] formatiert auf einfache Weise Tabellen
Statt
+
<nowiki>{| </nowiki>class="wikitable"
 +
Wenn nicht grundlegendes dagegen spricht, solltet Ihr '''jede Tabelle''' so formatieren.
 +
 
 +
Die CSS "wikitabe" formatiert (light gray background, borders, padding and align left) und entspricht damit '''in etwa''' folgender Codierung:
 
  <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"  
 
  <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
 
<nowiki>{|</nowiki>class="wikitable"
 
 
'''Hinweis:''' Die hier angegebene Codierung entspricht u.U. nicht exakt der CSS "wikitable". Diese wird immer an die entsprechende MediaWiki-Version angepasst und funktioniert damit besser als eigene Formatierungen.
 
'''Hinweis:''' Die hier angegebene Codierung entspricht u.U. nicht exakt der CSS "wikitable". Diese wird immer an die entsprechende MediaWiki-Version angepasst und funktioniert damit besser als eigene Formatierungen.
 
*'''sortable''' macht Tabellen umsortierbar
 
*'''sortable''' macht Tabellen umsortierbar
Ihr schreibt einfach
+
  <nowiki>{| </nowiki>class="sortable"
  <nowiki>{|</nowiki>class="sortable"
 
 
bzw.
 
bzw.
  <nowiki>{|</nowiki>class="wikitable sortable"
+
  <nowiki>{| </nowiki>class="wikitable sortable"
 
*'''unsortable''' schließt Spalten von der Sortierbarkeit aus
 
*'''unsortable''' schließt Spalten von der Sortierbarkeit aus
  <nowiki>|</nowiki>class="unsortable"
+
  <nowiki>| </nowiki>class="unsortable"
*'''sortbottom''' schließt Zeilen von der Sortierbarkeit aus
+
*'''sortbottom''' (veraltet) schließt Zeilen von der Sortierbarkeit aus
  <nowiki>|-</nowiki>class="sortbottom"
+
  <nowiki>|- </nowiki>class="sortbottom"
 
*'''hiddenStructure''' macht Zellen unsichtbar
 
*'''hiddenStructure''' macht Zellen unsichtbar
  class="hiddenStructure"
+
  <nowiki>| </nowiki>class="hiddenStructure"
Dies wird in diesem Wiki benutzt um Zellen in Vorlagen bedingt darzustellen (<code>#IF</Code> gibt es hier nicht). Ein Beispiel dafür ist  die [[Vorlage:Infobox_Software|Infobox_Software]].
+
Dies wird in diesem Wiki benutzt um Zellen in Vorlagen bedingt darzustellen (<code>#IF</Code> gibt es im Gopal-Wiki nicht). Ein Beispiel dafür ist  die [[Vorlage:Infobox_Software|Infobox_Software]].
 
  <nowiki>|- class{{{1|}}}="hiddenStructure"|</nowiki>
 
  <nowiki>|- class{{{1|}}}="hiddenStructure"|</nowiki>
 
'''Erläuterung:''' Ist der 1. Parameter beim Aufruf nicht angegeben, wird die folgende Tabellenzeile ausgeblendet.
 
'''Erläuterung:''' Ist der 1. Parameter beim Aufruf nicht angegeben, wird die folgende Tabellenzeile ausgeblendet.
Zeile 28: Zeile 27:
 
=== Definierte GopalWiki CSS-Klassen ===
 
=== Definierte GopalWiki CSS-Klassen ===
  
Weitere CSS-Klassen werden normalerweise im Mediawiki-System definiert. Die grundlegendste Seiten wo dies erfolgt ist [[MediaWiki:Common.css |Common.css]]. An dieser Stelle werden '''normalerweise'''  Änderungen zum Mediawiki-Standard und zusätzliche Skin-Änderungen definiert. Hier wurde bisher nur "TOC-Nummerierung und TOC-Eintrag" geändert. 
+
Weitere CSS-Klassen können in speziellen Seiten des MediaWiki-System definiert werden. Die grundlegende Seite dafür ist [[MediaWiki:Common.css|Common.css]], dort werden normalerweise Änderungen zum Mediawiki-Standard und zusätzliche allgemeingültige Skin-Änderungen definiert.
  
Weitere besondere Möglichkeiten sind neue Seiten mit der Bezeichnung "MediaWiki:xxx.css", wobei für xxx beliebige Bezeichner verwendet werden können. Hier ein [http://de.wikipedia.org/wiki/MediaWiki:Cologneblue.css Beispiel aus Wikipedia]. Diese werden aber nur in Ausnahmefällen für spezielle Anwendungen benötigt und sind für unser kleines Wiki nicht relevant.
+
Hier wurde bisher nur folgendes definiert:
 +
* Abstand zwischen TOC-Nummerierung und TOC-Eintrag und
 +
* Tabellenklasse mit unterschiedlicher Hintergrundfarbe  in geraden und ungeraden Tabellenzeilen
 +
<nowiki>{| </nowiki>class="wikitable zebra"
  
Es gibt im MediaWiki noch weitere Möglichkeiten wo CSS definiert werden können, das ist aber m.M. hier nicht notwendig.
 
  
=== CSS-Klassen von Admins definiert ===
 
Weitere CSS-Klassen wurden hier '''wahrscheinlich''' außerhalb des MediaWiki-Systems  durch die [http://www.gopal-navigator.de/wiki/index.php?title=Spezial:Benutzer&group=sysop Administratoren und Bürokraten]] im "Frame" definiert. Es handelt sich hierbei um eine '''sehr problematische''' Programmierung, da diese direkt das System von MediaWiki beeinflusst. Dies Programmierung ist '''keine''' durch Mediawiki unterstützte Methode. Das Problem wurde [http://www.gopal-navigator.de/showthread.php?6249-Darstellungsfehler-im-Wiki hier im Forum] diskutiert [http://www.gopal-navigator.de/showthread.php?6249-Darstellungsfehler-im-Wiki&p=63576&viewfull=1#post63576], es wird zwar hier seitens der Admins von Skin-Programmierung gesprochen, dies ist aber kein Skin im Verständnis von MediaWiki.
 
 
   
 
   
[[Benutzer:B-M-N|Ich]] habe z.B. in der [[Hauptseite]] folgende von den  [[GoPalWiki:Administratoren|Administratoren]] benutzte CSS gefunden, jedoch wurden diese bisher leider noch nicht von diesen dokumentiert, damit jeder sie verwenden kann:
 
  
*'''FCK__ShowTableBorders'''
+
Weitere besondere Möglichkeiten sind neue Seiten mit der Bezeichnung "MediaWiki:xxx.css", wobei für xxx beliebige Bezeichner verwendet werden können. Hier ein [http://de.wikipedia.org/wiki/MediaWiki:Cologneblue.css Beispiel aus Wikipedia]. Diese werden aber nur in Ausnahmefällen für spezielle Anwendungen benötigt und sind für unser kleines Wiki nicht relevant.
<nowiki><p class="FCK__ShowTableBorders"></nowiki>
 
Es ist möglich, das diese eine normale System-Klasse ist, die Funktion und Benutzung ist [[Benutzer:B-M-N|mir]] aber noch nicht bekannt.
 
 
 
*'''aktuell'''
 
<nowiki><div class="aktuell"></nowiki>
 
 
 
*'''News'''
 
<nowiki><div class="News"></nowiki>
 
 
 
*'''wichtige Links'''
 
<nowiki>< div class="wichtige Links"></nowiki>
 
 
 
*'''inhalt'''
 
<nowiki><p class="inhalt"> class="inhalt"</p></nowiki>
 
 
 
*'''Hardware'''
 
<nowiki><p class="Hardware"> class="Hardware"</p></nowiki>
 
 
 
*'''Zusatz-Software'''
 
<nowiki><p class="Zusatz-Software">Test class="Zusatz-Software"</p></nowiki>
 
  
*'''Inhalt1'''
+
Es gibt im MediaWiki noch weitere Möglichkeiten wo CSS definiert werden können, das ist aber m. M. hier nicht notwendig.
<nowiki><p class="Inhalt1">class="Inhalt1"</p></nowiki>
 
  
*'''Skinning'''
 
<nowiki><p class="Skinning">class="Skinning"</p></nowiki>
 
  
*'''Geräteübersicht'''
+
[[Kategorie:GoPalWiki:Hilfe]]
<nowiki><p class="Geräteübersicht">class="Geräteübersicht"</p></nowiki>
 

Aktuelle Version vom 24. April 2021, 19:32 Uhr

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

Interne MediaWiki CSS-Klassen

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

  • wikitable formatiert auf einfache Weise Tabellen
{| class="wikitable"

Wenn nicht grundlegendes dagegen spricht, solltet Ihr jede Tabelle so formatieren.

Die CSS "wikitabe" formatiert (light gray background, borders, padding and align left) und entspricht damit in etwa folgender Codierung:

{|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"

Hinweis: Die hier angegebene Codierung entspricht u.U. nicht exakt der CSS "wikitable". Diese wird immer an die entsprechende MediaWiki-Version angepasst und funktioniert damit besser als eigene Formatierungen.

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

bzw.

{| class="wikitable sortable"
  • unsortable schließt Spalten von der Sortierbarkeit aus
| class="unsortable"
  • sortbottom (veraltet) 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 im Gopal-Wiki nicht). Ein Beispiel dafür ist die Infobox_Software.

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

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

Definierte GopalWiki CSS-Klassen

Weitere CSS-Klassen können in speziellen Seiten des MediaWiki-System definiert werden. Die grundlegende Seite dafür ist Common.css, dort werden normalerweise Änderungen zum Mediawiki-Standard und zusätzliche allgemeingültige Skin-Änderungen definiert.

Hier wurde bisher nur folgendes definiert:

  • Abstand zwischen TOC-Nummerierung und TOC-Eintrag und
  • Tabellenklasse mit unterschiedlicher Hintergrundfarbe in geraden und ungeraden Tabellenzeilen
{| class="wikitable zebra"



Weitere besondere Möglichkeiten sind neue Seiten mit der Bezeichnung "MediaWiki:xxx.css", wobei für xxx beliebige Bezeichner verwendet werden können. Hier ein Beispiel aus Wikipedia. Diese werden aber nur in Ausnahmefällen für spezielle Anwendungen benötigt und sind für unser kleines Wiki nicht relevant.

Es gibt im MediaWiki noch weitere Möglichkeiten wo CSS definiert werden können, das ist aber m. M. hier nicht notwendig.