Benutzer:ErhardRainer/monobook.css/Testseite
Einführung Bearbeiten
- Die eigentliche CSS-Datei dazu findet man unter http://de.wikipedia.org/skins-1.5/monobook/main.css.
- An dieser Stelle werden per Java-Script wenn nötig eigene Stylsheets für Fixey für den InternetExplorer eingebunden, auf die ich jetzt nicht weiter eingehe.
- Als nächstes folgt die für alle Skins der deutschen Wikipedia geltende MediaWiki:Common.css. Dort können gemeinsame Anpassungen für alle Benutzer gemacht werden.
- Dann folgt MediaWiki:Monobook.css, die gemeinsame Änderungen für den Monobook-Skin beinhaltet.
- Als letztes kommt das für den einzelnen Benutzer wichtigste und mächtigste Instrument: die eigene monobook.css. Um sich diese selbst anzulegen, muss man die Seite Benutzer:Benutzername/monobook.css anlegen, meine monobook.css liegt also unter Benutzer:Steffen/monobook.css.
(Quelle: Benutzer:Steffen/Monobook-Hacks
Wikipedia - Standardelemente Bearbeiten
Metadaten einblenden Bearbeiten
Personendaten einblenden Bearbeiten
table.metadata { display:block; }
Personendaten | |
---|---|
NAME | Kant, Immanuel |
KURZBESCHREIBUNG | deutscher Philosoph |
GEBURTSDATUM | 22. April 1724 |
GEBURTSORT | Königsberg, Ostpreußen |
STERBEDATUM | 12. Februar 1804 |
STERBEORT | Königsberg, Ostpreußen |
Inhaltsverzeichnisse hervorheben Bearbeiten
#toc { background-color: #FFFF33; }
siehe dazu das Inhaltsverzeichnis dieser Seite
Weiterleitungen Bearbeiten
#contentSub { background-color: #FFFF33; }
siehe dazu auch diese Seite
Copyright und Co ausblenden Bearbeiten
Anmerkung: brauchen nur Platz, es steht sowieso auf jeder Seite das Selbe
#footer { display:none; }
blendet folgenden Quelltext aus
<div id="footer"> <div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/skins-1.5/common/images/poweredby_mediawiki_88x31.png" alt="MediaWiki" /></a></div> <div id="f-copyrightico"><a href="http://wikimediafoundation.org/"><img src="/images/wikimedia-button.png" border="0" alt="Wikimedia Foundation"/></a></div> <ul id="f-list"> <li id="lastmod"> Diese Seite wurde zuletzt am 17. November 2006 um 20:45 Uhr geändert.</li> <li id="copyright">Ihr Inhalt steht unter der <a class='internal' href="/wiki/Wikipedia:GNU_Free_Documentation_License">GNU-Lizenz für freie Dokumentation</a>.<br /> Wikipedia® ist eine eingetragene Marke der Wikimedia Foundation Inc.<br /></li> <li id="privacy"><a href="/wiki/Wikipedia:Datenschutz" title="Wikipedia:Datenschutz">Datenschutz</a></li> <li id="about"><a href="/wiki/Wikipedia:%C3%9Cber_Wikipedia" title="Wikipedia:Über Wikipedia">Über Wikipedia</a></li> <li id="disclaimer"><a href="/wiki/Wikipedia:Impressum" title="Wikipedia:Impressum">Impressum</a></li> </ul> </div>
Links Bearbeiten
Gerade in Bezug auf Links sind viele mit dem Layout nicht zufrieden. Sei es an der Unterstreichung oder an den Farben. Das ist aber recht schnell geändert.
- will man lediglich die Links beim Überfahren mit der Maus unterstrichen haben:
a { text-decoration: none; }
- will man die Links generell nicht unterstrichen haben:
a, a:visited, a:active, a:hover, a.stub, a.new, a.new:visited { text-decoration: none; }
Links hervorheben Bearbeiten
externe Links hervorheben Bearbeiten
wie beispielsweise: http://www.erhard-rainer.com oder Erhard Rainer
#bodyContent a.external { background-color: #CCCCCC; color: #990000; border-style : dashed; border-width : thin; border-color : #333333; font-weight: bold;}
Textpassagen verändern Bearbeiten
Lesbarkeit fördern Bearbeiten
Dieser Teil ermöglicht es den Teil, den man gerade mit der Maus überfährt farblich zu markieren, um bei langen Textpassagen zu wissen, wo man gerade ist.
p {color: #666666; } p:hover { color: #000000; background-color: #DDEEFF;}
Beachte, dass Veränderungen der Schriftarten, wie beispielsweise
font-weight: bold;
nicht zur Lesbarkeitsverbesserung beitragen. Selbiges gilt für die Veränderung von Schriftgrößen:
font-size: 12px;
PRE-Elemente mit anderer Farbe Bearbeiten
pre { padding: 1em; border: 1px dashed #2f6fab; color: black; background-color: #f9f9f9; line-height: 1.1em; text-align: justify; }
Hyperlinks verändern Bearbeiten
a { text-decoration: none; color: #002bb8; background: none; } a:visited { color: #5a3696; } a:active { color: #faa700; } a:hover { text-decoration: underline; } a.stub { color: #772233; } a.new, #p-personal a.new { color: #ba0000; background-color: #FFFF00; } a.new:visited, a.new:visited { color: #ba0000; background-color: #00FFFF; }
vergleiche dazu:
Damit sich das nicht auf "Bearbeiten", "Inhaltsverzeichnis" ... auswirkt.
siehe dazu:
Sprungmarken Bearbeiten
Bei Sprungmarken unterscheidet man zwischen
- Sprungmarken innerhalb eines Dokumentes
<a href=#sprungmarkeintern>...</a>
- Sprungmarken auf Ankerpunkte in anderen Dokumenten.
<a href=http://www.seite2.de#sprungmarkeextern>...</a>
- Sprungmarken auf Abschnitte in anderen Dokumenten (so Art Querverweise)
a[href*="#"]:after { content: "\23"; }
- Sprungmarken innerhalb eines Dokuments mit "#" markieren (insb. beim Inhaltsverzeichnis)
a[href$="#"]:after { content: "\23"; }
- beim Überfahren mit einer Maus soll dann stehen: "[springe zu: Sprungmarke]" mit einer bestimmten Farbe hinterlegt.
a[href$="#"]:hover:before { content: " [springe zu: "; } a[href$="#"]:hover:after { content: " ]"; } a[href$="#"]:hover { background-color: #FFCC99; }
für Links auf Sprungmarken auf anderen Dokumenten ist das "href$" durch "href*" zu ersetzen.
- Beispiel: Sprungmarke
- Links:
Links innerhalb der Wikipedia Bearbeiten
- Links innerhalb der Wikipedia mit einem "Pfeil" versehen
a[href*="/wiki/"]:before { content: "\2192"; }
- beim Überfahren mit einer Maus soll sich dann die Farbe verändern
a[href*="/wiki/"]:hover { background-color: #FFCC99; }
- Beispiel: Kant
Links die noch ins Leere zeigen Bearbeiten
- Links innerhalb der Wikipedia mit einem "Kreuz" versehen
a.new:before { content: "\2020"; }
- beim Überfahren mit einer Maus soll sich dann die Farbe verändern
a.new:hover { background-color: #FFCC99; }
- Beispiel: Heinz Kant
=Versionsunterschiede Bearbeiten
Arten von Versionsunterschieden Bearbeiten
CSS-TAG | Beschreibung |
---|---|
.diff-context | |
.diff-deletedline | |
.diffchange | Unterschiedliche einzelne Zeichen bei ansonsten gleichen Zeilen |
.diff-addedline |
Beispiele Bearbeiten
.diff-context, .diff-deletedline, .diffchange, .diff-addedline { font-size:120%; } .diffchange { font-weight:bold; background: #92DBFE; }
User-Benachrichtigungen Bearbeiten
#usermessage { background-color: #ff0000; border: 1px solid #ffa500; color: Black; font-weight: bold; margin: 2em 0em 1em 0em; padding: 0.5em 1em; vertical-align: middle; }
vgl. ähnlich auch hier
verschmelzte Boxen hervorheben Bearbeiten
Da man sonst immer wieder die verschmolzenen Boxen übersieht.
#BoxenVerschmelzen { border-left-color:#FF0000; border-left-style:double; border-left-width:thick;} }
Markiert <div class="BoxenVerschmelzen"> Testtext </div> mit einen doppelten roten Strich auf der linken Seite. (mEn ist das recht dezent, aber trotzdem nicht zu übersehen) sollte dann so aussehen:
Beispiele: TKKG
Administratoren kennzeichnen Bearbeiten
Es ist oftmals gut zu wissen, ob es sich bei einem Beitrag um den eines Administrators handelt oder nicht. (siehe Liste der Administratoren)
weitere coole Dinge Bearbeiten
Feststehende Benutzeleiste Bearbeiten
siehe dazu Feststehende Benutzeleiste
Button für einklappbare Abschnitte Bearbeiten
/* Button für einklappbare Abschnitte (von Benutzer:D) */ /* a button for folding headers */ .foldButton { position: relative; width: 1.5ex; margin-left: 0; margin-right: 0.4ex; padding-left: 0.4ex; padding-right: 0.3ex; cursor: pointer; color: black; /* background-color: transparent; top: -0.2ex; font-size: 1.2ex; background-color: white; border-style: solid; border-width: 1px; border-color: lightgrey; */ } .foldButton:hover { color: red; }
siehe auch Bearbeiten
- Benutzer:Fristu/CSS-Tipps
- Benutzer:Steffen/Monobook-Hacks
- [[[Wikipedia:Technik/Archiv/Skin/Baukasten|Skin-Baukasten]]]
- Benutzer:Dbenzhuser/Monobook
- Benutzer:Bender2004/monobook.css