Oceans WP Sidebar breite anpassen

  • Hi Leute,

    Ich möchte auf der Seite https://www.martinemich.com/ diebreite des Sidebars anpassen. Konkret geht es um den weißen Bereich auf der rechten Seite des Sidebars. In meinen Augen ist das verschwendeter Platz und ich würde den Sidebar gern um dieses Stück quasi nach rechts rücken, dass der Bereich für den Kontent etwas breiter wird.

    Ich sollte wohl auch erwähnen, dass ich nicht gerade ein Genie bin was das anpassen von HTML & Co. betrifft.

    Vielen Dank im Voraus :D

    • 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

  • kannst du unter zusätzliche css eintragen

    sofern du in deinen theme die spalten nicht anpassen kannst.
    80 % ist der inhalt content
    20% ist die sidebar

    kannst du anpassen wie die möchtest.
    Jedoch sollten die zahlen nicht mehr als 100 gesamt haben

    Code
    .content-area {
        width: 80%;
    }
    
    
    .widget-area {
        width: 20%;
    }
  • Hallo @Wutzi
    wenn du das OceanWP Theme nutzt wirst du nicht daran vorbeikommen, dich etwas intensiver mit dem Customizer zu befassen!!

    Im Customizer ist die Breite Hauptcontainer, Breite Inhalt und Breite Seitenleiste einstellbar! Dort kannst du dich austoben, bis du für dich die richtigen Breiten definiert hast. Das Verhältnis Content: Sidebar ist 72% : 28%
    Auch viele weitere Einstellungen sind da möglich - einfach mal durchklicken!
    Wenn du schon Arbeit in die Gestaltung und/oder in die Texte/Bilder investiert hast solltest du vor diversen Versuchen ein Full-Backup (inkl. Datenbank) erstellen, um eine Rückfallebene zu haben ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:


  • PS.: Wenn du den Raum lins & rechts nutzen willst, die "Breite Hauptcontainer" erhöhen im Customizer!

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Danke!
    Keine Ahnung wie ich das im Customizer übersehen konnte :confused:

    @SEpp55 Das Bild das du da eingefügt hast, ist das die Ansicht auf deinem Monitor?? Ich arbeite nämlich vom Laptop aus, also mit recht kleinem Monitor und da sieht die Breite des Hauptcontainers gut aus.

    Das einzige was mich noch etwas stört ist der weiße Rand links und rechts bei der Sidebar. Liegt das an der Hauptcontainer Einstellung? Auf deinem Bild ist der nämlich nicht erwähnenswert.

  • Gefunden im Code!
    Ok, du hast den Haupt-Container auf 1300px eingestellt.
    Die Sidebar wird <960px nach unten verschoben.
    1) Also das Anzeigefenster ist auf 960px eingestellt.
    2) Davon sind 90% verfügbar
    3) 80% für den primary - Bereich, der einen Rand von 30 px padding rechts hat
    4) das Bild hat auf allen Seiten 10px Rand und
    5) auch die right-sidebar hat noch einmal 10 px linken Rand

    das mach lt. erster Hochrechnung 50px zwischen Bildrand und Schrift in der Sidebar.

    Das ist teilweise im Elementor gemacht und ggf zu finden bzw im Theme!

    Den Elementor verwende ich NUR zur Fehleranalyse im Forum, sonst nicht. dadurch hier keine Tips zum Finden :rolleyes:
    Die Ränder aus dem Theme - da müsste ich mich durch den Customizer deines Themes quälen, ob da etwas versteckt ist.
    Wenn nicht gibt es die Möglichkeit, das via CSS zu bearbeiten . . . .

    Wenn du z.B. die 30px minimieren willst, kopiere nachfolgenden Code mal im Customizer unter Zusätzliche CSS hinein und beobachte was geschieht.

    Code
    .content-area {
        padding-right: 1px;
    }

    Ebenso sind Anpassungen in den o.g. Bereichen möglich.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Hi,

    danke für die Antwort :) das mit den 10px im letzten Bild habe ich im Customizer eingestellt, die anderen Ränder sind alle ok bis auf den gelben Bereich im 2. Bild, den würde ich gerne reduzieren.

  • Ok, in die Zusätzlichen CSS folgendes hinein kopieren und auf Nebenwirkungen achten!

    Code
    #content-wrap.container {
        max-width: 98%;
    }

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Von jeder deiner Seiten sollte auf EU-DSGVO Anforderungen geachtet werden! Impressum und Datenschutzerklärung sind das mindeste!!!

    Sorry schon gefunden o_O

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

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