Portal:Rudern/styles

CSS

.PortalRudern { /* DIV-Boxen */
	border: 1px solid #A7D7F9;
	margin: 0 0 15px;
	padding: 9px 9px 5px;
	background: #F6F6F6;
}
.PortalRudern H2 { /* Überschriften zweiter Ebene in den Boxen */
	margin: 0 0 9px;
	border-bottom: 1px solid #A7D7F9;
	font-size: 1.4em;
	font-weight: 600;
	text-align: center;
}
.PortalRudern H2::after, .WikiProjektRudern H2::after { /* fix for the Timeless skin which otherwise adds an H2::after pseudo element with an ugly bottom border */
	display: none;
}
.PortalRudern-Titel { /* für sehr schmale Endgeräte; kann vermutlich auch weg */
	overflow: auto;
}
@media screen and (min-width: 801px) { /* zweispaltig ab (ca.) 801 Pixeln Browserfenster-Breite; bei schmaleren Geräten/Fenstergrößen wird dieser Code nicht genutzt und die Darstellung ist automatisch einspaltig */
	.PortalRudern-RechteSpalte {
		clear: right;
		float: right;
		width: 37.5%;
	}
	.PortalRudern-LinkeSpalte {
		margin-right: 40%;
		margin-right: calc(37.5% + 34px); /* Das hier ist ein Hack. Die zweite Anweisung "margin-right" überschreibt die erste, sofern der Browser modern ist und sie versteht; ansonsten wird sie ignoriert und die erste stellt eine brauchbare Not-Darstellung dar. */
		overflow: auto;
	}
}
.PortalRudern-Highlight { /* andere Hintergrundfarbe für speziell hervorgehobene Boxen; hier für Verweis vom Portal ins WikiProjekt genutzt */
	background-color: #EAEAFF;
}
.PortalRudern-Ermunterung { /* Platz für Hintergrundbilder in [[Portal:Rudern/Ermunterung zur Mitarbeit]] schaffen */
	background-size: 64px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 72px;
	min-height: 64px; /* damit die Hintergrundbilder nicht in ungünstigen Fällen (sehr breite Browserfenster) oben und unten abgeschnitten werden */
}
.PortalRudern-Mitmachen {
	/* [[commons:File:Correct.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Correct.svg/64px-Correct.svg.png');
}
.PortalRudern-Fragen {
	/* [[commons:File:HSSamarbetecolor.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/HSSamarbetecolor.svg/64px-HSSamarbetecolor.svg.png');
}

.WikiProjektRudern { /* DIV-Boxen */
	border: 1px solid #A7D7F9;
	margin: 0 0 10px;
	padding: 7px 7px 0; 
	background: #F6F6F6;
	position: relative; /* really? we need this for absolute-positioned edit links within the boxes; see selector .PortalRudern-EditLink */
}
.WikiProjektRudern H2 { /* Überschriften zweiter Ebene in den Boxen */
	margin: 0;
	font-size: 1.4em;
	font-weight: 700;
	border-bottom: 1px solid #A7D7F9;
}
@media screen and (min-width: 801px) { /* zweispaltig ab (ca.) 801 Pixeln Browserfenster-Breite; bei schmaleren Geräten/Fenstergrößen wird dieser Code nicht genutzt und die Darstellung ist automatisch einspaltig */
	.WikiProjektRudern-RechteSpalte {
		margin-left: 44%;
		margin-left: calc(42% + 25px); /* Das hier ist ein Hack. Die zweite Anweisung "margin-left" überschreibt die erste, sofern der Browser modern ist und sie versteht; ansonsten wird sie ignoriert und die erste stellt eine brauchbare Not-Darstellung dar. */
 		overflow: auto;
	}
	.WikiProjektRudern-LinkeSpalte {
		clear: left;
		float: left;
		width: 42%;
	}
}
.WikiProjektRudern-BoxMitIcon H2 { /* Platz für Icons in der Überschrift-Zeile */
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}
.WikiProjektRudern-Mitmachen H2 {
	/* [[commons:File:System-users.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/a/a8/System-users.svg/24px-System-users.svg.png');
}
.WikiProjektRudern-Portal H2 {
	/* [[commons:Internet-web-browser.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/7/74/Internet-web-browser.svg/24px-Internet-web-browser.svg.png');
}
.WikiProjektRudern-Recherche H2 {
	/* [[commons:File:Book-cover-A-Z.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Book-cover-A-Z.svg/24px-Book-cover-A-Z.svg.png');
}
.WikiProjektRudern-FehlendeArtikel H2 {
	/* [[commons:File:System-search.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/1/17/System-search.svg/24px-System-search.svg.png');
}
.WikiProjektRudern-Werkstatt H2 {
	/* [[commons:File:Text-x-generic with pencil.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Text-x-generic_with_pencil.svg/24px-Text-x-generic_with_pencil.svg.png');
}
.WikiProjektRudern-NeueArtikel H2 {
	/* [[commons:File:New text document.svg]]; only do this with CC0 or public domain files */
	background-image: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e8/New_text_document.svg/24px-New_text_document.svg.png');
}

.PortalRudern-EditLink {
	 position: absolute;
	 right: 5px;
	 top: 13px;
	 font-size: 0.8em;
	 padding: 3px;
}

Kopiervorlage

<templatestyles src="Portal:Rudern/styles.css" />

Über diese Seite

Portal:Rudern/styles.css steuert das Aussehen des Portal:Rudern (sowie des thematisch verwandten Wikipedia:WikiProjekt Rudern). Ziele sind:

Es wird für gängige Endgeräte eine flexible Anordnung der Boxen angestrebt, so dass auf (großen) Desktopmonitoren ein zweispaltiges Design angezeigt wird, auf (schmalen) Mobilgeräten dagegen ein einspaltiges Design. In der einspaltigen Ansicht auf schmalen Geräten werden im Portal nach der oberen Titelbox zuerst die Boxen der rechten und dann die der linken Spalte aus dem zweispaltigen Design angezeigt. Im WikiProjekt ist die Ordnung genau andersherum, dort werden zuerst die Boxen der linken und dann die der rechten Spalte angezeigt.
Weiterhin werden rein als Designelemente eingesetzte Icons als Hintergrundbilder eingebunden (Achtung: das darf lizenzbedingt nur mit gemeinfreien Dateien – Public Domain bzw. CC0 – gemacht werden).

Die Umsetzung erfolgt mit der TemplateStyles-Funktionalität von MediaWiki. Damit sind seit 2018 auch modernere CSS-Anweisungen möglich, insbesondere sogenannte „Media Queries“.

Diverses

Relevante Seiten: Portal:Rudern/styles (diese Seite, zur Dokumentation), Portal:Rudern/styles.css (die CSS-Anweisungen)
Die CSS-Anweisungen kommen insbesondere in den Code-Fragmenten von der Vorlage Portal:Rudern/Kasten (Dokumentation) zur Anwendung, welche auf der Portalseite und auf der WikiProjekt-Seite eingebunden wird. Die Kasten-Vorlage lädt die CSS-Anweisungen selbstständig.
Auf der Seite Wikipedia:Technik/Skin/CSS/TemplateStyles wurden zwei projektweit eindeutige Klassenpräfixe PortalRudern- und WikiProjektRudern- für diese Seite reserviert.

Gültige Klassenparameter

Siehe auch den Code unter Portal:Rudern/styles.css
Gültig sind zurzeit: PortalRudern-Titel, PortalRudern-LinkeSpalte, PortalRudern-RechteSpalte, PortalRudern-Highlight; Demo siehe nachfolgend.

Beispiele

Anmerkung: zu Demonstrationszwecken wird hier die Produktiv-Box aus dem Portal Portal:Rudern/Ermunterung zur Mitarbeit mehrfach eingebunden. Die dadurch entstehende Überschrift zweiter Ebene („Mitmachen“) erscheint ebenfalls mehrfach als Teil der Demo; leider erscheint sie auch im Inhaltsverzeichnis dieser Seite. Folgende Szenarien werden demonstriert:

#Ohne zusätzliche Klassen
#Hervorhebung
#Titel
#Linke Spalte
#Rechte Spalte
#Mehrfache Klassen

Ohne zusätzliche Klassen

{{Portal:Rudern/Kasten
| TITEL   = Mitmachen
| INHALT  = {{Portal:Rudern/Ermunterung zur Mitarbeit}}
}}

Mitmachen

Mach mit! Im WikiProjekt Rudern organisieren wir die Verbesserung der Wikipedia-Inhalte mit Bezug zum Rudersport. Deine Hilfe ist Willkommen!