Benutzer:ErhardRainer/monobook.css/Testseite

Einführung

1. Die eigentliche CSS-Datei dazu findet man unter http://de.wikipedia.org/skins-1.5/monobook/main.css.
2. 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.
3. 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.
4. Dann folgt MediaWiki:Monobook.css, die gemeinsame Änderungen für den Monobook-Skin beinhaltet.
5. 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

Metadaten einblenden

Personendaten einblenden

table.metadata  { display:block; }

Inhaltsverzeichnisse hervorheben

#toc { background-color: #FFFF33; }

siehe dazu das Inhaltsverzeichnis dieser Seite

Weiterleitungen

#contentSub { background-color: #FFFF33; }

siehe dazu auch diese Seite

Copyright und Co ausblenden

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="/"><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>
<pre>

==Links==
===Links hervorheben===
====externe Links hervorheben====
wie beispielsweise: http://www.erhard-rainer.com oder [http://www.erhard-rainer.com Erhard Rainer]
<pre>#bodyContent a.external {
        background-color: #CCCCCC;
        color: #990000;
        border-style : dashed;
        border-width : thin;
        border-color : #333333;
        font-weight: bold;}

Textpassagen verändern

Lesbarkeit fördern

Dieser Teil ermöglicht es dien 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

pre {
	padding: 1em;
	border: 1px dashed #2f6fab;
	color: black;
	background-color: #f9f9f9;
	line-height: 1.1em;
	text-align: justify;
} 

Hyperlinks verändern

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:

• Bullet Madness
• Content per CSS anzeigen
• Pseudoelemente und Pseudoklassen

Damit sich das nicht auf "Bearbeiten", "Inhaltsverzeichnis" ... auswirkt.

siehe dazu:

• Workshop CSS: Teil 6 - Kaskaden (insb. Spezifität)

Sprungmarken

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:
  • Dezimalwerte
  • Dezimal/Hexadezimal-Umrechner

Links innerhalb der Wikipedia

• 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

• 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

weitere coole Dinge

Feststehende Benutzeleiste

siehe dazu Feststehende Benutzeleiste

siehe auch

• Benutzer:Fristu/CSS-Tipps
• Benutzer:Steffen/Monobook-Hacks