Portal:Rudern/styles

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

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

[Quelltext bearbeiten]
<templatestyles src="Portal:Rudern/styles.css" />

Über diese Seite

[Quelltext bearbeiten]

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“.

Gültige Klassenparameter

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

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

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

Frag was! Du hast eine allgemeine Frage zum Rudern oder zu einem Rudersport-Artikel in der Wikipedia? Sprich uns hier an, wir helfen Dir gern!

Hervorhebung

[Quelltext bearbeiten]
  • Klasse: PortalRudern-Highlight (Hintergrundfarbe bläulich)
{{Portal:Rudern/Kasten
| CLASSES = PortalRudern-Highlight
| 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!

Frag was! Du hast eine allgemeine Frage zum Rudern oder zu einem Rudersport-Artikel in der Wikipedia? Sprich uns hier an, wir helfen Dir gern!

  • Klasse: PortalRudern-Titel (praktisch sehr ähnlich wie ohne Nutzung einer Klasse)
{{Portal:Rudern/Kasten
| CLASSES = PortalRudern-Titel
| 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!

Frag was! Du hast eine allgemeine Frage zum Rudern oder zu einem Rudersport-Artikel in der Wikipedia? Sprich uns hier an, wir helfen Dir gern!

Linke Spalte

[Quelltext bearbeiten]
  • Klasse: PortalRudern-LinkeSpalte (Links anordnen, mit 60 % Fensterbreite; nur aktiv sofern Browserfenster breiter als 800 px)
{{Portal:Rudern/Kasten
| CLASSES = PortalRudern-LinkeSpalte
| 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!

Frag was! Du hast eine allgemeine Frage zum Rudern oder zu einem Rudersport-Artikel in der Wikipedia? Sprich uns hier an, wir helfen Dir gern!

Rechte Spalte

[Quelltext bearbeiten]
  • Klasse: PortalRudern-RechteSpalte (Rechts anordnen, mit 37.5 % Fensterbreite; nur aktiv sofern Browserfenster breiter als 800 px)
{{Portal:Rudern/Kasten
| CLASSES = PortalRudern-RechteSpalte
| 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!

Frag was! Du hast eine allgemeine Frage zum Rudern oder zu einem Rudersport-Artikel in der Wikipedia? Sprich uns hier an, wir helfen Dir gern!

Mehrfache Klassen

[Quelltext bearbeiten]
  • Bitte aufpassen, dass keine inkompatiblen Klassen kombiniert werden (zum Beispiel: PortalRudern-LinkeSpalte und PortalRudern-RechteSpalte
  • Klassen einfach mit Leerzeichen voneinander trennen
{{Portal:Rudern/Kasten
| CLASSES = PortalRudern-RechteSpalte PortalRudern-Highlight
| 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!

Frag was! Du hast eine allgemeine Frage zum Rudern oder zu einem Rudersport-Artikel in der Wikipedia? Sprich uns hier an, wir helfen Dir gern!