Textfelder in Widgetbereichen nebeneinander

Stefan341

Hallo,
ich habe für das Theme twentytwelve ein Child erstellt und zusätzliche Widgetbereiche hinzugefügt.
Soweit funktioniert das auch.
Mein Problem ist nun, dass ich die Boxen im Footer gerne nebeinander, auf die Seite ausgedehnt hätte. Momentan sind sie untereinander.

Die relevanten Bereiche der einzelnen Dateien:
functions.php

Code

function twentytwelvechild_widgets_init() {
        register_sidebar( array(
            'name'          => __( 'Kein Theorieunterricht', 'twentytwelvechild' ),
            'id'            => 'keintheorie',
            'description'   => __( 'Widgetbereich f&uuml;r kein Theorieunterricht direkt unter dem Header', 'twentytwelvechild' ),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        ) );
        
        register_sidebar( array(
            'name'          => __( 'Gru&szlig;text', 'twentytwelvechild' ),
            'id'            => 'grusstext',
            'description'   => __( 'Widgetbereich f&uuml;r den Gru&szlig;text, direkt unterm Header', 'twentytwelvechild' ),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        ) );


register_sidebar( array(
            'name'          => __( 'Footer', 'twentytwelvechild' ),
            'id'            => 'customfooter',
            'description'   => __( 'Widgetbereich f&uuml;r den Footer', 'twentytwelvechild' ),
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        ) );
    }
    add_action( 'widgets_init', 'twentytwelvechild_widgets_init' );

Alles anzeigen

footer.php

PHP

<!-- ANFANG zus&auml;tzliches Widget //-->
<?php if ( is_active_sidebar( 'customfooter' ) ) : ?>
       <div class="customfooter">
           <?php dynamic_sidebar( 'customfooter' ); ?>
       </div>
   <?php endif; ?>
   <!-- ENDE zus&auml;tzliches Widget //-->

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

SEpp55

Das wird in der style.css des Child gemacht! Beispiel - ([size=14]Styling für Footer Widgets hinzufügen[/SIZE]).

Stefan341

Danke für die Antwort. Ich verstehe nur nicht, welcher Teil im CSS dafür verantwortlich ist das die Boxen nebeneinander und nicht untereinander dargestellt werden.

Sailor56

Dieser Teil... aus dem Tutorial!

HTML

.footer-widget-column {
    float: left;
    width: 25%;
    padding-right: 2em;
    box-sizing: border-box;
}

Mit 'float: left;' stapeln sich die Elemente an der linken Seite... mit 'width: 25%;' wird die Breite so eingestellt, dass 4 nebeneinander passen.

Stefan341

Das funktioniert leider nicht wirklich. Ich habe immernoch die Boxen untereinander

[Blockierte Grafik: https://stefanb341.de/img/1.png]

[Blockierte Grafik: https://stefanb341.de/img/2.png]

In der style.css sieht es so aus

Code

.customfooter {
  padding-bottom: 5px;
  position: relative;
  float: left;
  width: 33%;
  padding-right: 2em;
  box-sizing: border-box;
  font-size: 13px;
  color: #000000;
  font-style: bold;
  text-align: center;
  margin: 0 auto;
  border-radius: 20px;
  }

Alles anzeigen

Sailor56

Ich vermute, du hast dem Elternelement (.customfooter) das float: left; zugewiesen - du willst aber das die Childelemente, also die Widgets im Footer links 'floaten'!
Aber ohne deinen Quellcode zu sehen, kann man dir auch nicht wirklich helfen... nur raten!

Stefan341

Den Quellcode der style.css von dem Elterntheme?

Sailor56

Den Link zur Seite bräuchten wir!

Stefan341

https://c-strothmann.de

Sailor56

Dann teste bitte folgendes - diesen CSS Code ans Ende der style.css des Child Themes oder in das 'zusätzliche CSS' im Customizer kopieren.

HTML

.customfooter {
  float: none;
  width: 100%;
}
.customfooter .widget {
  display: inline-block;
  width: 33%;
}

Da sehe ich jetzt nur 3 Widgets... also braucht jedes für sich 33%. Wenn da doch noch ein Viertes eingebaut werden soll, dann muss der width Wert entsprechend angepasst werden.

Stefan341

Das hat funktioniert. Danke.

Kannst Du noch was zu dem Doppelstrich über den Footerelementen sagen? der geht ja nicht komplett bis zum Ende durch.

SEpp55

Der ist unter jeden Artikel - so auch unten auf der Team - Seite
Der wird in der style.css ab Zeile 984 gebildet.

Code

.site-content article {
    border-bottom: 4px double #ededed;
...
....
.....
}

Sailor56

Ja... kann ich.
Mit

HTML

.site-content article {
   border-bottom: none;
}

ist es weg!

Sailor56

Da ist auch noch eine weitere Linie, unterhalb der Widgets - die geht mit

HTML

#colophon {
    border-top: none;
}

weg.

Stefan341

Ich möchte sie ja nicht weg haben, sondern durchgehend. Liegt das vielleicht daran das die Sidebar zu lang ist?

Sailor56

Dann brauchst du ein Element, das durchgehen ist... in der Gegend ist da nur der .customfooter. Dem könntest du einen durchgehende

HTML

.customfooter {
     border-top: 4px double #ededed;
}

geben.
Dann müsste man allerdings auch mit Abstände in dieser Region etwas anpassen, damit das hübsch aussieht!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Textfelder in Widgetbereichen nebeneinander

Jetzt mitmachen!