Twenty Fourteen: Anpassungen u. a. für Safari Browser

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter. Info

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

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.

Inhaltsverzeichnis

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

Einfach und effektiv:

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

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 nicht konform.

/* 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 sollte ein separates Headerbild erstellt werden.

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.

Indessen wie hier Twenty Fourteen Theme hat so seinen Stil und möchte auch erhalten bleiben. Also der Versuch war es. – eben es ist und bleibt, wie es ist. Theme 20/14. Danke sehr!

Diese Website, So machen Sie Twenty Fourteen, geht bei den Anpassungen weit darüber hinaus! Hochachtungsvoll gegenüber dem Autor, aber es stellt sich die Frage: Wäre ein anderes Theme nicht viel sinNvoller?

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. Der Standardinhaltsbereich wurde um 30 Pixel erweitert. Damit umfasst jede Zeile etwa 66 Zeichen, einschließlich Leerzeichen.

Das mit dem Lesemodus ist ein eigenes Kapitel, und kann hier Lesemodus für Website! nachgelesen werden.

/* 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; 
}