Sidebar nur für Startseite breiter machen

  • Hi,

    ich würde gerne meine Sidebar auf der Startseite vergrößern und zwar nur auf der Startseite.

    Die Sidebars auf den anderen Seiten sollen gleich bleiben. Ich möchte trotzdem für alle das

    selbe Sidebar-Seitentemplate nutzen.

    Wie krieg ich das hin? Kann ich irgendwie die page ID mit eine Sidebar verknüpfen und so die Größe

    individuell verändern?


    Danke für die Hilfe

    • 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

  • Das solltest du könne, wenn du eine eindeutige Page ID identifizieren kannst, dann kannst du die auch nutzen und die Elemente auf dieser Seite unabhängig formatieren.
    Einfach im CSS die Page ID vor den Element Selektor schreiben:

    #PageID #secondary { deine Formatierungen ;}

  • Hab folgendes probiert. Geht aber nicht und sieht irgendwie schräg aus. (post=194)

    #194 #secondary {max-width: 2px !important;}


    Über den Inspektor konnte ich die Breite so verändern: Gilt dann aber für alle Sidebars.

    #secondary {max-width: 2px;}

  • Wenn es über den Inspektor klappt, dann klappt das auch mit CSS im 'zusätzlichen CSS' - kann nur sein, dass deine Page ID nicht stimmt! Wo hast du die gefunden? Die sollte im body-Tag der Sartseite zu finden sein.

  • Die Page ID erhalte ich über "Seite bearbeiten" und dann steht die in der URL .../wp-admin/post.php?post=194&action=edit

    Das wäre dann 194. Im body-tag steht page-id-194. Das müsste stimmen. Also das Custom CSS funktioniert. Ohne die Page ID

    kann ich die Breite verändern. Ist die Ansprache richtig mit #194 oder fehlt irgendwo eine Klammer oder ein Punkt?

  • Super!! Jetzt funktioniert es.

    Kann mir jemand kurz sagen, wann eine Bezeichnung einen . und wann ein # bekommt.
    Ich weiß es ist bestimmt so eine Anfängerfrage, aber gibt es da einen einfachen Erklärungstip?

  • der . steht für eine CSS Klasse - diese kann beliebig oft auf der Seite verwendet werden, um eben ein Element so zu formatieren.
    Das # steht für eine ID und darf nur ein einziges mal auf der Seite verwendet werden... es ist ein einmaliges Identifikationsmerkmal für genau dieses Element!

  • Wie ist daa bei zwei Klassen nacheinander. Bei mir geht der erste Code, aber der Zweite irgendwie nicht.

    .page-id-194 #secondary {


    margin-right: 0%;
    }

    Über den Inspektor funktionierts, aber mit der page ID davor nicht mehr?


    .page-id-194 .moz-widget-list-adjust #secondary {
    width: 26.3%;
    }

  • Ich verstehe nicht so genau, was du mit .page-id-194 .moz-widget-list-adjust #secondary erreichen willst?
    Du hast mit #secondary (also eine ID, die nur ein einiges mal auf dieser Seite vorkommt) einen zuverlässigen Sektor - und mit der .page-id-194 einen (hoffentlich) zuverlässigen Selektor, der nur auf der Startseite wirkt... was willst du mehr?
    Außerdem - ist #secondary ein Kindelement von .moz-widget-list-adjust??? Wenn nicht, dann kann das nicht funktionieren!

  • [COLOR=#333333]Ich hatte .moz-widget-list-adjust #secondary vom Inspektor übernommen und wollte dann [/COLOR][COLOR=#333333]einfach [/COLOR][COLOR=#333333]die page ID davor packen.[/COLOR]

    Hab eben gemerkt, dass man .moz.... gar nicht braucht. Folgendes reicht

    .page-id-194 #secondary {


    margin-right: 0%;
    width: 26.3%;
    }

    Danke für den Hinweis. Obwohl ich mittlerweile viel gelernt habe, ist das Ganze für mich immer noch ein Dschungel :?: :-o

  • Um das abzuschließen mal für alle Laien wie mich einfach erklärt:

    Sidebar für eine einzelne Seiten anpassen = Page ID mit #primary und #secondary (Sidebar) kombinieren.

    Bei mir passt es vom CSS her z.B. so (Zahlen sind nicht optimal angepasst)

    .page-id-194 #secondary {


    margin-right: 3%;
    width: 30.0%;
    }


    .page-id-194 #primary {
    margin-right: -35%;
    width: 70%;
    }

    Nun kann man die jeweilige Breite (width) verstellen wie man möchte.
    Der Hille #7 war der Dosenöffner :idea: ;-)

Jetzt mitmachen!

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