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

Classic-Editor mit Advanced Editor Tools

"Advanced Editor Tools – Ausgezeichnet!"
Advanced Editor Tools; und NEU! – Classic Widgets

---

Info echo

Klassischen Editor anwenden! – und …

"Advanced Editor Tools – ist sehr gut!"
Advanced Editor Tools immer NEU – Classic Widgets

---

Info echo

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

– mit Advanced Editor Tools!
Advanced Editor Tools immer NEU! – Classic Widgets

---

Info echo

Aktive Installationen: 2+ Millionen

"Advanced Editor Tools – ist so fabelhaft!"
Advanced Editor Tools immer NEU! Classic Widgets

---

Info echo

Antörnend! – so gehts hier zur Lancierung

"Advanced Editor Tools – ist de luxe!"
Advanced Editor Tools immer NEU! – Classic Widgets

---

Info echo

… Classic Widgets sind so praktisch!

"Classic Widgets – sind so grandiose!"
Advanced Editor Tools immer NEU! – Classic Widgets

---

Info echo

Werkraum ist Werkraum – Frontend ist Frontend

Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker

"Advanced Editor Tools – ist so fein!"
Advanced Editor Tools immer 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. Welches nicht so konform, ist die Kopfzeile mit Browser Safari, dazu ist hier eine Supportanfrage samt Lösung. Auch kann es fallweise gefragt sein, die Website zu zentrieren, dem Inhaltsbereich die Breite zu erweitern. Des Letzteren 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.

Twenty Fourteen Theme

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.

Safari Browser und die Kopfzeile

Vorerst gehen wir des Missfallens mit Safari Browser nach. Indes ist das jeder Website mit dem Theme und ich wunderte mich ein wenig, dass dies noch nie urgiert wurde.

Im Safari-Browser wurde ein problematisches Verhalten festgestellt. Genauer gesagt handelt es sich um die Kopfzeile, genauer gesagt um das Hauptmenü (Selektor #primary-menu), wenn es mit Inhalt gefüllt ist. Das Menü scheint nicht an der richtigen Position zu sein und schwebt stattdessen nach unten.

Somit war das aufzulösen:

.header-main {
  display: flex;
  justify-content:space-between;
}
.header-main .search-toggle {
  order: 3;
}
.header-main .site-navigation {
  margin-left: auto;
}

Hierfür brauchte es Unterstützung, siehe meine Supportfrage: Problem mit dem Twenty Fourteen-Theme und dem Safari-Browser. (Mein Anfrage wurde mehrmals bearbeitet, was in einer gewissen Eile zu häufigen Änderungen führte. Entschuldigt bitte die dadurch entstandene Unannehmlichkeiten.)

Website zentriert

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

.site {
margin: 0 auto;
}

Dem Inhaltsbereich mehr breite, CSS

/* Twenty Fourteen Theme Inhaltsbereich: Content erweitert von normal 474px auf 504px  */ 
.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;	
}

Folgend ein Beispiel für ID, also einzeln Beiträge ist der Selektor .post und für Seiten würde das .page sein.

/* Inhaltsbereich für Beitrag Columns, von normal 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.

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 und bleibt das in Arbeit. 😕

Indessen wie hier Twenty Fourteen Theme hat so seinen Stil und möchte hier auch erhalten bleiben. Also der Versuch des Desktops 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 Beispiel 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;
}

Bezüglich Headerbild: Das Theme erlaubt die Beschneidung des Headerbilds nicht über der Breite von 1260px zu. Somit ist ein separates Headerbild zu erstellen.

Das Bild würde statt der normalen Version über Headerbild mit einem Hintergrundbild auszuwechseln sein. Dann mit: background-size: cover ist das Bild auch nicht gestreckt, 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: Mit kleiner Tüftelei von wegen der Seitenleisten etwas zu ändern, wäre des Themes das auch bei  margin-right: 29.04761904%; einzurichten.  – aber somit ist das Responsive des Themes kaputt.

Das Headerbild ersetzen durch ein Hintergrundbild. – ganz einfach

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

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

#main {
margin-top: 0;
}

Der margin-top von Pixel ist dann individuell.

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

Mein Fazit

Ich habe mich dafür entschieden, dass die Website zentriert ist 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, die Schrift etwas vergrößert und den Inhaltsbereich um 30 Pixel erweitert. Damit umfasst jede Zeile 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; 
}

WordPress Twenty Fourteen in F A R B E. – so perfekt

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024-April