Vergrößerung der Abstände in der Sidebar

peterzle

Hallo Leute,

in meiner Sidebar sind einige Widgets, aber auch "feste" Bestandteile wie Bilder, Seiten, Blogroll. Wie kann ich die Abstände in der Sidebar ändern sowohl zwischen Widgets, wie auch bei Nicht-Widgets?
Die einzenen Bereiche hängen mir nämlich viel zu sehr zusammen, da muss Abstand her.

Werbepost

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

Annalena

Hi peterzle,
setze einfach am Ende der jeweiligen Zeile, oder des Bildes, ein <br /> und falls der Abstand dann immer noch nicht groß genug ist eben zwei oder so in der sidebar.
Und natürlich speichern.

LG
Annalena

peterzle

Hi Annalena

aber in der sidebar.php finde ich ja nur die Elemente, die ich selber eingebaut habe. Wie soll ich denn ein <br /> unter ein Widget setzen?

Rarehero

Eleganter wäre es natürlich, wenn du den Abstand mit CSS steuern würdest. Jedes Widget hat eine Klasse, die "widget widget_*****_****" heisst. Ich denke, es sollte genügen, wenn du in der style.css des Themes folgenden Code einfügst:

.widget { margin: 0 0 20px 0 } (alternativ .widget { padding 0 0 20px 0 } )

Dieser Code sollte unter jedem Widget 20 Pixel Platz schaffen. Sollte es mit ".widget" nicht funktionieren, wirst du jedes einzelne Widget benennen müssen. Du müsstest also die genauen Klassennamen aus dem GTML-Code, den der Browser generiert, heraus lesen (sieht in etwa so aus: "class="widget widget_name") und einzeln aufführen, was dann wie folgt aussehen könnte:

.widget widget_*****, widget widget_*****, widget widget_**** { margin: 0 0 Wert in Pixeln 0 }

Anstelle der Sternchen würden dann die Bezeichnungen der Widget erscheinen, etwa "widget widget_recent_entries (die letzten Artikel).

Kurz zur Erläuterung: "padding" definiert den Abstand zwischem dem Rand eines Objekts und dem Inhalt des Objekts; "margin" definiert den Abstand eines Objekts zum nächsten Objekt. In der oben dargestellten zusammengefassten Schreibweise werden die Angaben im Uhrzeigersinn angewandt (also { padding: oben rechts unten link }. Wenn du eine intuitivere Schreibweise bevorzugst, dann schreibst du besser { padding-bottom: Wert in Pixeln } bzw. { margin-bottom: Wert in Pixeln }, wobei die Deklaration "margin" vorzuziehen ist, weil "padding" Objekt nach unten erweitert.

Das Beste wird aber sein, wenn du uns deinen Blog mal zeigst, damit wir erkennen können, wie dein Sidebar aufgebaut ist. Dann können wir dir die beste Lösung vorschlagen (vielleicht kann man auch einfach über die funktions.php des Themes einen Container um die Widget legen und dann dem Container sagen, wieviel Luft bis zum nächsten Container vorhanden sein soll).

peterzle

Hallo Rarehero,
vielen Dank für deine ausführlichen Antworten.
Leider funktionieren die css-Einträge nicht. :cry:
Den Blog kann ich an dieser Stelle leider noch nicht nennen, was sicherlich nicht sehr hilfreich für euch ist.

Habe folgende Codes probiert, keiner funktionierte:

Code

.widget widget_calendar { margin: 0 0 30px 0 } 
.widget widget_rss { margin: 0 0 30px 0 } 
.widget widget_tag_cloud  { margin: 0 0 30px 0 }

Code

.widget widget_calendar, widget widget_rss, widget widget_tag_cloud  { margin: 0 0 30px 0 }

Code

.widget widget_calendar, .widget widget_rss, .widget widget_tag_cloud  { margin: 0 0 30px 0 }

Rarehero

Versuch es mal mit padding und nicht mit margin!
Und versuch es auch mal mit

.widget_recent_entries { ... }

und nicht mit

.widget widget_recent_entries { ... }

Kann sein, dass ich mir an der Stelle auch geirrt habe was die korrekte Verwendung des Selektors angeht. Ich in meiner CSS-Datei auch ".widget_recent_entries" (usw.) eingefügt (allerdings geht es bei mir auch nur mit "widget", was ich aber nicht so umsetze, weil ich dem Selektor nicht ganz traue).

Und kannst du nicht einfach den Code deiner sidebar.php posten? Möglicherweise musst du den Selektor weiter eingrenzen, aber das sehen wir dann, wenn der Code auf dem Tisch liegt.

peterzle

OK, werde es morgen Mittag auf der Arbeit nochmal probieren. Ich lass es dich dann hier wissen, ob es geklappt hat. :)

Den Code der Sidebar schick ich dir morgen per PN, falls dann noch etwas nicht klappt. :)

Grüße

peterzle

Hat wunderbar geklappt

Danke @ Rarehero

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Vergrößerung der Abstände in der Sidebar

Jetzt mitmachen!