Benutzer:ErhardRainer/monobook.css/Testseite

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen
  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

Wikipedia - Standardelemente

[Bearbeiten | Quelltext bearbeiten]

Metadaten einblenden

[Bearbeiten | Quelltext bearbeiten]

Personendaten einblenden

[Bearbeiten | Quelltext bearbeiten]
table.metadata  { display:block; }

Inhaltsverzeichnisse hervorheben

[Bearbeiten | Quelltext bearbeiten]
#toc { background-color: #FFFF33; }

siehe dazu das Inhaltsverzeichnis dieser Seite

Weiterleitungen

[Bearbeiten | Quelltext bearbeiten]
#contentSub { background-color: #FFFF33; }

siehe dazu auch diese Seite

[Bearbeiten | Quelltext 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>

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; }
[Bearbeiten | Quelltext bearbeiten]
[Bearbeiten | Quelltext 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 | Quelltext bearbeiten]

Lesbarkeit fördern

[Bearbeiten | Quelltext 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 | Quelltext bearbeiten]
pre {
	padding: 1em;
	border: 1px dashed #2f6fab;
	color: black;
	background-color: #f9f9f9;
	line-height: 1.1em;
	text-align: justify;
} 
[Bearbeiten | Quelltext 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:

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.

[Bearbeiten | Quelltext 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; }
[Bearbeiten | Quelltext 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; }

=Versionsunterschiede

[Bearbeiten | Quelltext bearbeiten]

Arten von Versionsunterschieden

[Bearbeiten | Quelltext bearbeiten]
CSS-TAG Beschreibung
.diff-context
.diff-deletedline
.diffchange Unterschiedliche einzelne Zeichen bei ansonsten gleichen Zeilen
.diff-addedline
 .diff-context, .diff-deletedline, .diffchange, .diff-addedline { font-size:120%; }
 .diffchange { font-weight:bold; background: #92DBFE; }

User-Benachrichtigungen

[Bearbeiten | Quelltext 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 | Quelltext 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 | Quelltext 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 | Quelltext bearbeiten]

Feststehende Benutzeleiste

[Bearbeiten | Quelltext bearbeiten]

siehe dazu Feststehende Benutzeleiste

Button für einklappbare Abschnitte

[Bearbeiten | Quelltext 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;
}