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

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

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.

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-123 .entry-content .entry-header,
.post-123 .entry-content .entry-content,
.post-123 .entry-content .entry-summary,
.post-123 .entry-content .entry-meta,
.post-123 .entry-content,
.post-123 .post-navigation,
.post-123 .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?

Suchen-Button anpassen und animieren

Das Beispiel, wie das hier der Website ist:

/* Search Suchen Headerleiste */
.search-toggle:before {
    content: "";
    width: 35px;
    height: 35px;
    background-image: url("https://../icon-park-search.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 5px;
    transition: all 0.3s ease-in-out;
}

/* Hover- und Aktivzustand */
.search-toggle:hover:before,
.search-toggle.active:before {
    animation: grow-and-shrink 0.6s forwards;
}

/* Keyframes für die Animation */
@keyframes grow-and-shrink {
    0% {
        width: 40px;
        height: 40px;
    }
    50% {
        width: 45px;
        height: 45px;
    }
    100% {
        width: 40px;
        height: 40px;
    }
}

Das background-image: url("https://../icon-park-search.svg" beispielsweise von iconify.

Das Suchfeld einblenden

Das Suchfeld hat keine Animation zur Einblendung, aber es kann schnell angepasst werden:

#search-container {
    animation: searchIn 0.3s ease forwards; 
}

@keyframes searchIn {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}

Das Suchfeld per Hover einblenden

Das hat mich einmal interessiert und wurde mithilfe von ChatGPT und JavaScript erstellt:

/* "Suche" bei Mouseover öffnen und Klicks in die Seite schließen */
document.addEventListener('DOMContentLoaded', function() {
    // Funktion zum Überprüfen der Bildschirmbreite
    function checkWidth() {
        if (window.matchMedia('(min-width: 1024px)').matches) {
            const searchContainer = document.getElementById('search-container');
            const searchToggle = document.querySelector('.search-toggle');
            const searchToggleLink = searchToggle ? searchToggle.querySelector('a') : null;

            if (!searchContainer || !searchToggle || !searchToggleLink) {
                console.error('Ein oder mehrere erforderliche Elemente fehlen.');
                return;
            }

            // Funktion zum Aktualisieren von aria-expanded
            function setAriaExpanded(value) {
                searchToggleLink.setAttribute('aria-expanded', value);
            }

            // Zeige die Suchbox bei Mouseover des Toggles und füge 'active' hinzu
            searchToggle.addEventListener('mouseover', function() {
                searchContainer.classList.remove('hide');
                searchToggle.classList.add('active');
                setAriaExpanded(true);
            });

            // Schließe die Suchbox bei Klick außerhalb von searchToggle und searchContainer
            document.addEventListener('click', function(event) {
                if (!searchContainer.contains(event.target) && !searchToggle.contains(event.target)) {
                    searchContainer.classList.add('hide');
                    searchToggle.classList.remove('active');
                    setAriaExpanded(false);
                }
            });
        }
    }

    // Überprüfe beim Laden der Seite
    checkWidth();

    // Optional: Überprüfe bei Größenänderung des Fensters
    window.addEventListener('resize', checkWidth);
});

Das Schließen des Suchfeldes ist hiermit auch mit einem Klick in die Seite möglich. Das Skript wird erst ab einer Bildschirmbreite von 1024px ausgeführt, da Mobilgeräte kein Hover unterstützen und der Toggle ansonsten zweimal angeklickt werden müsste.

Es funktioniert! – Allerdings ist es hier nicht aktiv. Wenn es dir gefällt – bitte sehr!

Cursor automatisch im Suchfeld

Cursor automatisch im Suchfeld platzieren, wenn die Begriffsuche angeklickt wird.

jQuery(document).ready(function($) {
    $('#search-toggle').on('click', function() {
        setTimeout(function() { // leichte Verzögerung, um sicherzustellen, dass das Feld sichtbar ist
            $('#search-container .search-field').focus();
        }, 300); // Anpassbare Verzögerung, falls notwendig
    });
});

Im Zusammenspiel des CSS zum Einblenden des Suchfeldes und/oder der Hover-Funktion zum Einblenden des Suchfeldes funktioniert die automatische Platzierung des Cursors nicht.

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