Theme Twenty Seventeen verbreitern

  • Moin allerseits,

    Ich bin begeistert von diesem klasse Standart Theme.

    Allerdings möchte ich das Theme grundsätzlich verbreitern. Auf der Einstiegseite und auch auf den Beitragsseiten ist es mir zu schmal ich habe zu viel Platz rechts neben der Sidebar und links am Rand.
    https://tinyurl.com/ybkuvo38
    Ich bitte um Unterstützung, ich bin einigermaßen hilflos :-) Danke vorab,

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Die Breite des unteren Bereiches wird durch das Element '<div class="wrap">....</div> bestimmt.

    Für diese Klasse (.wrap) ist in der styles.css eine maximale Breite von 1000px (.wrap {max-width: 1000px;}) vorgegeben.

    Diesen Wert kannst du in einem Child Theme oder auch im Custom CSS nach deinen Bedürfnissen ändern!

  • Danke. :-) Was muss ich denn genau in der Custom CSS eintragen?

    Edit:
    hab das mal in der CSS eingetragen.
    [COLOR=#333333].wrap {max-width: 1500px;}
    [/COLOR]
    Da passiert es aber, das die rechte Sidebar ebenfalls mit nach links rückt, und die Seite unformatiert aussieht. Siehe Link.

    Einmal editiert, zuletzt von nobody-44 (12. Juli 2017 um 13:56)

  • Das liegt daran, dass die beiden Elemente ('.has-sidebar #primary' und '.has-sidebar #secondary') den verfügbaren Platz... jetzt 1500px... untereinander aufteilen!
    #primary ist definiert mit 58%
    #secondary ist definiert mit 32%
    Auch diese Parameter kannst du im Custom CSS anpassen.

    Am Besten du kannst du so was erkennen und testen mit den Tools, die die meisten Browser eingebaut haben - zB der Inspektor (unter 'Extras' -> 'Web-Entwickler') beim Mozilla FireFox!
    siehe anhängende Bilder.

  • Danke. Leider habe ich keinen Firefox, da MAC.

    Was muss ich denn in die Custom CSS genau eintragen? Und gilt das dann für alle Seiten? Bitte nochmal um Hilfe.

  • Also ich denke ich habe es hin bekommen. 2 Sachen stören nun;

    - Allerdings werden nun die Beitragsbilder größer. Normalerweise werden die "als Beitragsbild festgelegten " Bilder 535 PX breit. Nun werden sie aber größer dargestellt. Wo kann ich das beeinflussen?

    - wenn ich nun in den Beitrag reinklicke, dann wird das Beitrabsbild nochmals größer dargestellt.

    Einmal editiert, zuletzt von nobody-44 (12. Juli 2017 um 17:43)

  • Darf man hier auch Anmerkungen außerhalb der Fragestellung machen? Ich machs mal. Möchtest Du Deine Site nicht von Google indexiert haben oder warum hast Du in der robots.txt [COLOR=#ff0000]noindex[/COLOR], follow stehen?

  • Auch mit einem Mac solltest du in der Lage sein mit dem vorhandenen Browser - Safari denke ich - deine Seite und deren Layout zu analysieren.
    Schau doch mal, ob dir das weiter hilft:

    https://developer.apple.com/safari/tools/

    Dass sich durch die Änderung der Breite der div-Container auch Änderungen am Inhalt dieser Container ergeben, ist nicht ungewöhnlich. Oft sind dort im CSS Angaben enthalten, die in % des Elternelementes angegeben sind - Beispiel: div Container mit 1000px Breite - darin 2 div Container mit 52% bzw 38% des verfügbaren Platzes (1000px) und darin dann Bilder, die jeweils 100% des verfügbaren Platzes zugewiesen bekommen. Und genau das scheint bei dir der Fall zu sein - deine Bilder sind offensichtlich mit width: 100%; ausgezeichnet. Ja - dann nehmen die sich auch den Platz.

    Aber auch hier kann man natürlich mit CSS eingreifen und zB mit max-width: 535px; eine Maximalgröße vorgeben. Man muss dann nur dieses Element sehr genau ansprechen können, denn du willst ja nicht alle Bilder so auszeichnen, sondern nur die im Container #primary und dort dann nur die, die sich in einem div mit der Klasse .post-thumbnail befinden.
    Dann wäre eine Angabe

    #primary .post-thumbnal img {max-width: 535px;}

    vielleicht zielführend. Aber das musst du ausprobieren und immer beachten, dass Änderungen an einer Stelle auch Einfluss auf andere Elemente haben können.
    Und da diese Beitragsbilder als Hyperlink ausgebracht sind, öffnet sich beim Anklicken eine neue Seite - und da werden die Karten neu gemischt. Den HTML Code und das CSS, dass dort die Darstellung bestimmt, musst du erneut betrachten.

  • Sailor56,

    Vielen Dank für Deine Hilfe ich schaue mal :-)

    Sind solche Änderungen, welche wir hier besprochen haben noch in der Custom CSS gut untergebracht oder ist es sauberer/ besser solches mit einem Child Theme zu lösen?

  • Von der Wirkungsweise ist es eigentlich egal, ob nun Custom CSS oder Child Theme. Der Unterschied besteht darin, dass das Custom CSS im Quellcode der ausgelieferten HTML Seite direkt in einer Style Definition ausgegeben wird... also sichtbar im Quelltext steht.. und das Child Theme als externe Datei zur Verfügung steht und eingelesen wird.

    Beides ist aber richtig und auch sicher vor Änderungen, die sich durch Updates am Theme ergeben könnten.
    Ich persönlich würde aber die Variante mit dem Child Theme bevorzugen - das ist aber mehr ein Bauchgefühl

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!