Twenty Fourteen Theme: Website zentriert; Inhaltsbereich Breite

Bild geralt
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Twenty Fourteen die Website zentriert und die Breite des Inhaltsbereichs anpassen samt Vorlage.

Twenty Fourteen

…und so paar Überlegungen.

Website zentriert

Von dieser Website u. a. das auch recht ansprechend sein kann

.site {
margin: 0 auto;
}

Dem Inhaltsbereich mehr breite

Im Grunde ist das Theme so zu handhaben, wie es ist. Die Designer haben sich das ganz gut durch den Kopf gehen lassen. Doch kann es fallweise gefragt sein, von Inhaltsbereich die Breite zu erweitern. Hier ist nun so Vorlage.

Die eine Vorlage ist für die ganze Website, wenn denn sein soll und die andere für sich bestimmten Beiträgen oder Seiten.

CSS

/* Vergrößerung des Inhaltsbereichs normal von 474px auf 524px */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content, .post-navigation,
.comments-area {
	max-width: 524px;	
}

Folgend für ID, also einzeln Beiträge ist der Selektor .post und für Seiten .page

/* Inhaltsbereich für Beitrag Columns, normal ist 474px zu 100% */
.post-10373 .entry-content .entry-header,
.post-10373 .entry-content .entry-content,
.post-10373 .entry-content .entry-summary,
.post-10373 .entry-content .entry-meta,
.post-10373 .entry-content,
.post-10373 .post-navigation,
.post-10373 .comments-area
 {
margin: 0 auto;
max-width: 100%;
}

Durch max-width: 100%; ist die gesamte Seitenbreite zu verwenden. – wenn es gefällt, so ganz schmalen Rand.

Des Themes der Inhaltsbereich von normal 474px breite und der Auflösung von 1260px ist von der Seitenleiste links ein Abstand in etwa von 98px.

Inhaltsbereich Abstand Seitenleiste links
474px98px
499px84px
524px72px
549px60px
599px34px
100%30px

Für größere Bildschirme, dem Theme mehr Platz

…in Arbeit das

Das nächste ist so Spielerei zum Thema. Es ist sicherlich nicht ganz so fehlerfrei. – denn das der Seiten ist noch nicht konform. – eben in Arbeit das.

Indessen  wie hier Twenty Fourteen Theme hat so seinen Stil und möchte hier auch erhalten bleiben, also der Desktops das mit dem Hintergrund sichtbar. Folgend ist es halt nur etwas erweitert für die großen Bildschirme.

/* Bildschirme von größer, Theme mehr Platz */
@media screen and (
	min-width: 2500px) {
.post-thumbnail {
    position: relative;
    overflow: hidden;
    height: 450px !important;
	width: 1060px !important;
	margin-left: -145px !important;
}
		
.post-thumbnail img {
    position: absolute;
    width: 100%;
    height: auto;
}

.post-navigation {
	margin-left: 80px;
	max-width: 524px;
	padding: 25px 0 50px -5px;
}
		
.site {
		max-width: 1920px;
}

.site-header {
	max-width: 1920px;
}
	
#site-header img {
	width: 1920px;
	max-height: 240px;
}	

#site-header {
	position: relative;
	background-image: url("https://..Chainver-gallery-wolken-1920px.png");
	background-size: cover;
	background-repeat: no-repeat;
	height: 240px;
}

#site-header a {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#site-header a img {
	display: none !important;
}
		
.post-navigation {
	margin-left: 285px !important;
	max-width: 610px !important;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
	max-width: 100% !important;
	margin-left: 50px;
	margin-right: -50px;
}
		
#secondary  {
	width: 248px;
}
}	

/* @media für Bildschirm mittel */

@media screen and (max-width: 2499px) and (min-width: 1920px) {
	
/*.post-thumbnail {
    position: relative;
    overflow: hidden;
    padding-bottom: 55% !important;
    height: auto !important;
}

.post-thumbnail img {
    position: absolute;
    width: 100%;
    height: auto;
}
*/	
.post-thumbnail {
    position: relative;
    overflow: hidden;
    height: 450px;
	width: 895px !important;
	margin-left: -65px !important;
}

.post-thumbnail img {
    position: absolute;
    width: 100%;
    height: auto;
}

.post-navigation {
	margin-left: 80px;
	max-width: 524px;
	padding: 25px 0 50px -5px;
}
	
.site {
	max-width: 1680px;
}

.site-header {
	max-width: 1680px;
}
	
#site-header img {
	width: 1680px;
	max-height: 240px;
}	

#site-header {
	position: relative;
	background-image: url("https://..Chainver-gallery-wolken-1920px.png");
	background-size: cover;
	background-repeat: no-repeat;
	height: 240px;
}

#site-header a {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#site-header a img {
	display: none !important;
}
		
.post-navigation {
	margin-left: 200px !important;
	max-width: 610px !important;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.page-content {
	max-width: 100% !important;
	margin-left: 50px;
	margin-right: -50px;
}
		
#secondary  {
	width: 248px;
}
}
	
/* Das Bsp so grundlegend */
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content, .post-navigation,
.comments-area {
	max-width: 499px;	
}

.post-navigation {
	margin-left: 62px;
	max-width: 499px;
}

.entry-meta {
	margin-left: 0px !important;
}

Bzgl. Headerbild: Das Theme lässt nicht die Beschneidung über der Breite von 1260px zu. Somit ist ein separates Headerbild zu erstellen.

Das img Bild ist mit einem Hintergrundbild auszuwechseln, dann mit: background-size: cover ist das Bild auch nicht gestreckt.

Das Beispiel:

#site-header {
    position: relative;
    background-image: url("https://..k-images_wolken.banner.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 240px;
}

#site-header a {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.page #site-header a img {
    display: none !important;
}

Hinweis

Der Idee da mit kleiner Tüftelei von wegen der Seitenleisten zu ändern, da an des Themes  margin-right: 29.04761904%;.  – so ist das Responsive des Themes kaputt.

Das Theme mit Hintergrundbild samt Headerbild. – ganz einfach

Der Form wird über Customizer › Hintergrundbild ein Hintergrundbild definiert und das dient dann zugleich als Headerbild. Also Headerbild ist da keines abzustecken. Das CSS dann so:

#masthead {
margin-top: 192px;
position: sticky;
}

#main {
margin-top: 0;
}

Das mit dem margin-top der Pixel ist dann individuell.

  • Aber des Features von Dunkelmodus ist das so nicht geeignet, da der Bereich Headerbild ganz abgedeckt ist und so nur ein schwarzer Balken ist.

Kleines Fazit

Nebst der Website zentriert habe ich mich von wegen größere Bildschirme nicht für mehr Platz entschieden. Eher so für mildere Farbe des Hintergrunds und sonst so belassen wie es des Themes ist. In Anwendung hier von größerer Schrift wurde nur der Inhaltsbereich um 25px vergrößert. Somit sind das so 55 Zeichen inklusive Leerzeichen.

/* Theme Content erweitert */ 
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content, .post-navigation,
.comments-area {
max-width: 499px; 
}

Der Hinweis von wegen Farbe zum Theme sollte hier nicht fehlen.


Aktualisiert im Jahr 2022-Juli