Twenty Fourteen: Website zentriert; Inhaltsbereich breiter

Lesedauer so 3 Min.
Lernzeit ein wenig mehr 2023-März 2016-Februar like

Bild geralt

Info echo

Ist der Classic-Editor schon zu kennen? –

"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.

"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Advanced Editor Tools aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Im Grunde ist das Twenty Fourteen 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, die Website zu zentrieren, dem Inhaltsbereich die Breite zu erweitern. Dazu habe ich noch so Tipps bzw. Erfahrungswerte, welche für sich zu überlegen ist oder ob es nicht gescheiter ist gleich ein anderes Theme zu verwenden.

Inhaltsverzeichnis

Twenty Fourteen

Grundsätzlich ist das Theme der Website gut durchdacht und sollte so belassen werden. Anpassung für die Zentrierung der Website, die Erweiterung der Breite des Inhaltsbereichs ist nichts Großartiges und schnell erledigt.

Website zentriert

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

.site {
margin: 0 auto;
}

Dem Inhaltsbereich mehr breite, CSS

/* Vergrößerung des Inhaltsbereichs von normal 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%;
}

Beispiel von obigen CSS ist im Beitrag https://wegerl.at/columns-text-in-spalten/

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
474px	98px
499px	84px
524px	72px
549px	60px
599px	34px
100%	30px

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

In Arbeit und aufgegeben …

Die Anpassung eines Themes erfordert in der Regel fortgeschrittene Kenntnisse in HTML, CSS und PHP sowie die Kenntnis der internen Struktur des Themes. Wenn diese Fähigkeiten nicht so aus dem Effeff kommen, kann es schwierig sein, das Theme effektiv anzupassen, insbesondere wenn es um größere Änderungen geht.

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

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

Um ein Hintergrundbild zugleich als Headerbild zu definieren, kann man über den Customizer die Option 'Hintergrundbild' nutzen. Also, dabei wird kein separates Headerbild verwendet. Stattdessen wird das definierte Hintergrundbild automatisch als Headerbild verwendet. Das entsprechende CSS sieht dann etwa so aus:

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

#main {
margin-top: 0;
}

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

Jedoch ist dieses Vorgehen für den Dunkelmodus nicht geeignet, da der Headerbildbereich so abgedeckt wird, der nur noch als schwarzer Balken erscheint.

Mein Fazit der Arbeit

Ich habe mich dafür entschieden, die Website zentriert darzustellen und auf größeren Bildschirmen keinen zusätzlichen Platz zu nutzen. Stattdessen habe ich mich für einen milderen Hintergrund entschieden und das Theme im Wesentlichen belassen. Um die Lesbarkeit zu verbessern, habe ich die Schrift etwas vergrößert und den Inhaltsbereich um 30 Pixel erweitert. Damit umfasst jeder Textabschnitt etwa 58 Zeichen, einschließlich 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: 504px; 
}

Der folgende Hinweis: