Hilfe:Custom CSS Classes
Aus MDC
Diese speziellen CSS-Klassen wurden von uns für das Devmo Wiki definiert. Wenn Sie, aus welchem Grund auch immer, eine andere CSS-Klasse für diese Wiki benötigen, wenden Sie sich einfach an Dria.
Inhaltsverzeichnis |
[bearbeiten] Spezielle CSS Klassen
[bearbeiten] Hervorhebungen
| Klasse | Ergebnis |
div.bug |
Hilft einen Bug innerhalb des Seitenkörpers auszuzeichnen. |
div.note |
Hilft eine Notiz innerhalb des Seitenkörpers auszuzeichnen. |
div.tip |
Hilft einen Tip innerhalb des Seitenkörpers auszuzeichnen. |
div.warning |
Hilft eine Warnung innerhalb des Seitenkörpers auszuzeichnen. |
div.highlight |
Hebt einen Bereich der Seite durch einen 3px breiten Balken auf der linken Seite hervor. |
.highlightred |
Wechselt die Textfarbe in rot. |
.highlightblue |
Wechselt die Textfarbe in blau. |
[bearbeiten] Float-Elemente
| Klasse | Ergebnis |
.float-left bzw. .float-right |
Erzeugt ein Float-Element auf der linken bzw. rechten Seite (für gewöhnlich ein Bild). |
div.side-note-left bzw div.side-note-right |
Wird benutzt, um um einen Sidebar, oder eine Randnotiz innerhalb eines Artikels zu erstellen. Die erzeugte Box hat 50% der Breite, des Eltern-Elements (für gewöhnlich die Breite des eigentlichen Artikels). Es wird empfohlen, dass Sie diese Randboxen alternierend auf der rechten und linken Seite des Artikels ausrichten. Er wird dadurch besser lesbar. |
[bearbeiten] Tabellen
| Klasse | Ergebnis |
.standard-table |
Standarttabellen erhalten hiermit ihr Aussehen. |
.fullwidth-table |
Wie Standarttabelle, aber mit 100% Breite. (Diese Tabelle ist ein Beispiel.) |
.standard-table td.header oder .fullwidth-table td.header
|
Dient der Formatierung einer Kopfzelle. (Format kann auch durch den Einsatz von <th> Tags erreicht werden.) |
[bearbeiten] Breadcrumbs
| Klasse | Ergebnis |
div.breadcrumbs |
Styling for custom breadcrumbs extension. |
div.breadcrumbs a.breadcrumbs |
Styling for links in breadcrumbs string. |
div.breadcrumbs span.breadcrumbs |
Styling for local page title in breadcrumbs string. |
[bearbeiten] Sonstige
| Klasse | Ergebnis |
.figure |
Für zukünftige Anwendung definiert, enthält noch keine Style Informationen. |
[bearbeiten] Beispiele
[bearbeiten] Boxen
[bearbeiten] Bugs
Zeichnen Sie so Referenzen auf bekannte Bugs aus, mit Link zum relevaten Bugzilla Eintrag.
<div class="bug">[ Link ]</div>
Beispiel:
[bearbeiten] Notizen
Benutzen Sie diese Boxen, um Notizen in dieser Dokumentation hervorzuheben.
<div class="note">Text</div>
Beispiel:
[bearbeiten] Tips
Diese Klasse soll zum formatieren von Tips genutzt werden.
<div class="tip">Text</div>
Beispiel:
[bearbeiten] Warnungen
Benutzen Sie diese Boxen um Warnungen hervorzuheben. (Letztendlich wird es wohl noch umformatiert. Mit Icons und so.)
<div class="warning">Text</div>
Beispiel:
[bearbeiten] Hervorgehobener Bereich
Dies ist ein Beispiel fü einen Bereich, der Hilfe von div.highlight hervorgehoben wurde. Benutzen Sie diese Hervorhebung, um die Aufmerksamkeit auf bestimmte Bereiche ihres Artikels zu lenken. (Ursprünglich wurde es fü das XUL Tutorial hinzugefügt.
<div class="highlight">
Ein vorformatierter Bereich
innerhalb eines solchen div.
</div>
[bearbeiten] Teile von Code hervorheben
Oft will man Aufmerksamkeit auf bestimmte Stellen eines Codestücks lenken. Mit dem <span> Tag kann man einzelne Stellen im Text formatieren. Leider ist es nicht möglich <span> innerhalb eines <pre> Blocks zu verwenden, da diese vom MediaWiki Parser ignoriert werden.
<pre> <span class="highlightred">this doesn't work</span> </pre>
wird angezeigt als:
<span class="highlightred">this doesn't work</span>
Statt mit <pre> zu arbeiten gibt es bei MediaWiki die Möglichkeit den Text um eine Stelle einzurücken um den gleichen Effekt zu erreichen. Darin kann man dann auch mit <span> einen Bereich festlegen auf den man das Highlightning anwenden will.
Bedenken Sie aber, dass Sie auch leere Zeilen einrücken müssen, damit der Parser nicht denkt es handele sich um zwei Codeblocks.
|
So geht es nicht: Beispiel für einen Codeblock
mit einer Leerzeile
die nicht eingerückt ist.
|
So geht es: Beispiel für einen Codeblock mit einer Leerzeile die eingerückt ist. |
[bearbeiten] Tabellen
Mehr Infos über den Aufbau von Tabellen in der Hilfe:Wiki Markup Referenz#Tabellen
[bearbeiten] Standard Tabelle
Dies ist ein Beispiel für Eine Tablle der Klasse table.standard-table
| Tabellenkopf 1 | Tabellenkopf 2 |
|---|---|
| Tabellenzelle 2 | Tabellenzelle 2 |
[bearbeiten] 100% Tabelle
Dies ist ein Beispiel für Eine Tablle der Klasse table.fullwidth-table
| table header 1 | table header 2 |
|---|---|
| Tabellenzelle 1 | Tabellenzelle 2 |
[bearbeiten] Breadcrumbs
- See also Core JavaScript 1.5 Reference:About for an example of a page with breadcrumbs.