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

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

externe Links hervorheben

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

Lesbarkeit fördern

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

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

=Versionsunterschiede

Arten von Versionsunterschieden

CSS-TAG	Beschreibung
.diff-context
.diff-deletedline
.diffchange	Unterschiedliche einzelne Zeichen bei ansonsten gleichen Zeilen
.diff-addedline

Beispiele

 .diff-context, .diff-deletedline, .diffchange, .diff-addedline { font-size:120%; }
 .diffchange { font-weight:bold; background: #92DBFE; }

User-Benachrichtigungen

#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

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

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

Feststehende Benutzeleiste

siehe dazu Feststehende Benutzeleiste

Button für einklappbare Abschnitte

/* 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

• Benutzer:Fristu/CSS-Tipps
• Benutzer:Steffen/Monobook-Hacks
• [[[Wikipedia:Technik/Archiv/Skin/Baukasten|Skin-Baukasten]]]
• Benutzer:Dbenzhuser/Monobook
• Benutzer:Bender2004/monobook.css