Widgets in der Sidebar mittig platzieren

    Hallo!
    Ich bin gerade dabei, eine Website zu gestalten und nutze dafür Wordpress und das Theme RGB. Blöderweise werden die Widgets nicht mittig in der Sidebar dargestellt, wie z.B. der Kalender von dem Plugin Events Manager.
    Was muss ich verändern, damit die Widgets mittig platziert werden?

    • Gerade eben
    • 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

    Du müsstest herausfinden, welche Klasse der äußere Widgetcontainer hat (.widget?) und dieser dann im Stylesheet zuweisen:

    Code
    margin-left: auto;
margin-right: auto;

    Habe das selbe Problem nur möchte ich nicht alle Widgets zentriert haben sondern nur eine Text/HTML Box am Ende der Sidebar, ist dann denn was zu machen außer alle Widgets zu zentrieren?

    Zitat von Ammaletu

    Du müsstest herausfinden, welche Klasse der äußere Widgetcontainer hat (.widget?) und dieser dann im Stylesheet zuweisen:

    Code
    margin-left: auto;
margin-right: auto;

    Wie finde ich das denn heraus? :smile:

    Geordi: In den Quelltext schauen oder Link posten, wenn Du es selber nicht findest.

    cm2010: Wo kommt die Text/HTML-Box denn her, die Du zentrieren willst. Wenn es ein bestimmtes Widget ist, hat es normalerweise eine eigene Klasse (z.B. .widget-recent-posts oder so), die man ansprechen kann. Wenn Du die Box direkt in die sidebar.php oder in ein Text-Widget eingegeben hast, musst Du die Klasse halt selber verteilen. Und dann in der style.css entsprechend die Ausrichtung ergänzen.

    Hallo,
    ich habe das gleiche Problem.

    Soweit sind die Widgets in der Sidebar zentriert, nur nicht die Facebook-Fan-Box und Amikelive Adsense Widget.

    Wo kann ich das nun am einfachsten einstellen? In der sidebar.php oder muss ich in die einzelnen Widgets? Was muss ich dort und wo reinschreiben?

    LG

    Das ist in der Regel eine Style-Frage, also mit einem Tool wie Firebug nachschauen, auf welche Klasse oder ID das anzuwenden wäre. Oder ein Link zur Seite, dann schaue ich nach.

    Dein Google-Ads-Widget ist auf eine Breite von 250 Pixeln gestellt, deswegen zentriert sich da nichts. Die Sidebar ist aber nur 195 Pixel breit. Ist das Standard von Google oder beim Einbinden so eingestellt?

    Einfacher wäre es natürlich (so das denn geht), das gleich richtig einzustellen. Ansonsten kannst Du es aber so auf die richtige Größe bringen, denke ich:

    Code
    .widget_aml_adsense ins {
  width: 185px;
}
.widget_aml_adsense iframe {
  width: 165px;
  margin-left: 20px;
}

    Für das Banner darüber:

    Code
    .BannerGardenWidgetClass_BannerGardenWidget {
  margin-left: 20px;
}

    Für das Facebook-Widget tüftele ich das jetzt mal nicht aus, da sind eh nur 5 Pixel Spielraum.

    Bei dem Google-Ads-Widget war die Breite auf 250 Pix voreingestellt, aber auch wenn ich es auf 165 stelle passiert nichts....

    Ich habe nicht soviel Ahnung vom programmieren - wo füge ich die Codes denn ein......also in welche php oder css Datei? ...und an welche Stelle?

    Habe den einen Code
    {
    margin-left: 20px;
    }in die bannergarden_widget.class.php eingefügt und da war die ganze Seite nicht mehr erreichbar.......

    Zitat

    Habe den einen Code
    [COLOR=Red]{
    margin-left: 20px;
    }[/COLOR]in die bannergarden_widget.class.php eingefügt

    die beiden Code Teile gehören so wie sie oben stehen, in die style.css deines Themes

    also den ganzen Code einfügen, nicht nur den Teil mit Klammern

    mal abgeändert

    Code
    .widget_aml_adsense iframe {
    margin-left: 40px;
    width: 165px;
}


.BannerGardenWidgetClass_BannerGardenWidget img {
    margin-left: 20px;
}

    Ich möchte das der Facebook - like - Button etwas Abstand hat und habe es mit folgendem Code probiert:

    .widget_facebook-like-button {
    margin-top: 50px;
    }

    Aber funktioniert nicht......wo ist der Fehler?

    die entsprechende css class scheint [FONT=Courier New][COLOR=blue].widget.widget_ffb[/COLOR][/FONT] zu sein.

    Code
    .widget.widget_ffb iframe {margin-top:50px; }


    laesst den grauen container stehen und schiebt den 'facebook' titel und rest nach unten;

    Code
    .widget.widget_ffb {margin-top:50px; }


    schiebt den grauen container nach unten

    Wie kommst Du auf die Klasse "widget_facebook-like-button"? Ich enttäusche Dich ungern, aber CSS funktioniert nicht so, dass Du Dir einfach einen Klassennamen ausdenkst. ;-) Es muss schon der sein, der im Quelltext auch verwendet wird.

    Leider ist der Button über ein iFrame gemacht und das hat keinen Klassennamen, was echt schwach ist. Ansprechen kann man es aber so:

    Code
    .entry-content iframe[src^=http\:\/\/www\.facebook\.com] {
  margin-top: 50px;
}

    Prinzipiell tut es auch diese Variante:

    Code
    .entry-content iframe {
  margin-top: 50px;
}

    Aber das gilt dann für alle iFrames im Content-Bereich, nicht nur für das von Facebook. Nur für den Fall, dass der obige Code nicht geht.

    Naja, ausgedacht habe ich den nicht, vielleicht ein bißchen zusammen geschustert ;-) ......ich hab mich an der Lösung für die anderen widgets ein paar Antworten zuvor orientiert.
    Dachte mit dem Name der widget.php würde es gehen.....

    Der erste Code funktioniert auf jeden Fall!

    Nur auf meinem anderen Blog funktioniert der Code bei gleichem widget nicht. Wonach muss ich da schauen? Anscheinend ist mein Programmier-Wissen zu schwach?

    Kann sein, dass da das iFrame nicht in einem entry-content-Bereich eingebunden ist. Da müsstest Du diesen Klassennamen anpassen. Mach Dich vielleicht wirklich mal mit Firebug vertraut und wie man damit die Struktur der Webseite und er CSS-Klassen anschaut. Das ist für solche kleineren Anpassungsaufgaben unverzichtbar.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden