Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
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.
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:
… sollte hier nicht fehlen! 🙂
Aktualisiert im Jahr 2023-März