1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Sidebar nur für Startseite breiter machen

Dieses Thema im Forum "Design" wurde erstellt von Drag and Drop, 6. März 2018.

  1. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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
     
  2. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    Wie krieg ich das über CSS hin? Die Sidebar wird bei mir mit #secondary angesprochen
     
  3. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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 ;}
     
  4. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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;}
     
  5. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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.
     
  6. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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?
     
  7. Hille

    Hille Well-Known Member

    Registriert seit:
    22. Januar 2012
    Beiträge:
    7.965
    Zustimmungen:
    9
    Das wird so angewendet

    .page-id-194 #secondary
     
  8. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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?
     
  9. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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!
     
  10. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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%;
    }
     
  11. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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!
     
  12. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    Ich hatte .moz-widget-list-adjust #secondary vom Inspektor übernommen und wollte dann einfach die page ID davor packen.

    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
     
  13. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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: ;)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden