Wikipedia:WikiMUC/styles
CSS
.wikimuc-prettylink .external {
background-image: none !important;
}
/** Navigation **/
div.wikimuc-navigation {
background-color: #efefef;
}
.wikimuc-navigation a {
color: #4e7a92;
outline: none;
text-decoration: none;
}
.wikimuc-navigation a:hover, /* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
.wikimuc-navigation a:focus {
color: white;
text-decoration: none;
background-color: #cfcfcf;
}
.wikimuc-navigation ul {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
white-space: nowrap;
list-style-type: none;
list-style-image: none !important;
width: 100%;
margin-left: 0em;
margin-bottom: 2px;
padding-left: 0em;
}
.wikimuc-navigation ul li {
flex: auto;
margin-bottom: 2px;
}
/** #navigation ul li:first-child a { border-bottom: none; } **/
/** #navigation ul li:first-child a:before { width:0.1em; } **/
.wikimuc-navigation ul li a {
display: block;
border-bottom: 1px solid #4e7a92;
font-size: 1.1em;
line-height: 1.5em;
padding: 0.5em 20px;
text-decoration: none;
text-align: center;
/** width: 6em; **/
}
.wikimuc-navigation ul li a:before{
content:" ";
display:inline-block;
width:0.1em;
height:1em;
/* border-left:2px solid #4e7a92;; */
}
.wikimuc-navigation a[aria-current=page]{
background: #aaa;
}
div.wikimuc-banner {
background-image: linear-gradient(to right,rgba(167,215,249,0) 0,#a7d7f9 100%);
}
.wikimuc-banner h2:first-of-type {
text-transform: uppercase;
margin: 0 0 0 0;
padding-top: 0;
padding-bottom: 0;
}
@media screen and (max-width: 900px) {
div.wikimuc-banner {
background-image: linear-gradient(to right,rgba(167,215,249,0.3) 0,#a7d7f9 100%);
}
.wikimuc-banner img { display: none; }
.wikimuc-banner h2:first-of-type {
padding-top: 1em;
padding-bottom: 1em;
text-align: center; }
}
@media screen and (max-width: 700px) {
.wikimuc-banner h2:first-of-type {
padding-top: 1em;
padding-bottom: 1em;
font-size: small; }
}
Kopiervorlage
<templatestyles src="Wikipedia:WikiMUC/styles.css" />
WikiMUC/styles.css enthällt verschiedene CSS Definitionen zur Gestaltung der Seite WikiMUC und Unterseiten.
wikimuc-prettylink
In einem Bereich mit classe wikimuc-prettylink
werden die Pfeile nach externen Links versteckt.
Beispiel:
Code | Ergibt |
---|---|
[http://example.com/ example.com]
|
example.com |
<div class="wikimuc-prettylink">
[http://example.com/ example.com]
</div>
|
wikimuc-banner
Die Klasse wikimuc-banner formattiert das Banner am Anfang der WikiMUC-Hauptseite und aller Unterseiten
Der Quellcode
<div class="wikimuc-banner" >
== <span>[[File:WikiMUC - Banner - v5 - Bayrisch Blau.svg|200x100px]]</span> Willkommen auf der Seite des WikiMUC! ==
</div>
ergibt,
Das Banner ist responsive. Auf kleineren Bildschirmen wird erst das .svg-Logo unsichtbar und dann der Font verkleinert um einen Zeilenumbruch zu vermeiden.
wikimuc-navigation
Mit einer <div> ... </div> Sektion der Klasse wikimuc-navigation wird ein horizontales Menü zur Navigation zwischen mehreren Seiten realisiert.
Das Menü wird mit einer Wikitext- Aufzählungsliste beschrieben.
Beispiel:
<div class="wikimuc-navigation">
*[[Wikipedia:WikiMUC|Start]]
*[[Wikipedia:WikiMUC/Termine|Termine]]
*[[Wikipedia:WikiMUC/Info|Über uns]]
*[[Wikipedia:WikiMUC/Anfahrt|Anfahrt]]
*[[Wikipedia:WikiMUC/Mitarbeit|Mitarbeit]]
*[[Wikipedia:WikiMUC/Technik|Technik]]
*[[Wikipedia:WikiMUC/Presse|Presse]]
</div>
ergibt die folgende Zeile,
bei Überschreitung der Bildschirmbreite lässt sich die Zeile scrollen.