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>`	example.com

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.

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&nbsp;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.