2013 Anpassung im (Haupt) Widgetbereich

NeroPalme

Hallo Leute,
ich möchte im 2013er Template den unteren Widgetbereich so ändern, dass dieser (bei der größten Seitenbreite) max. 3 gleichbreite Spalten hat. Bei Verkleinerung der Seite sollen die Anzahl der Spalten, bei immer zueinander gleicher Spaltenbreite, verringert werden. Bisher konnte ich nichts passendes finden... ;-) Gibt es da ggf schon eine Idee?
Vielen Dank!

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

pixselig

Hallo NeroPalme

ich würde dabei mit %-Werten arbeiten.
zBsp:

Code

.widget-area-1 {width: 33%;}
.widget-area-2 {width: 33%;}
.widget-area-3 {width: 33%;}

LG, pixselig

NeroPalme

Zitat von pixselig
ich würde dabei mit %-Werten arbeiten.
zBsp:
Code
.widget-area-1 {width: 33%;}
.widget-area-2 {width: 33%;}
.widget-area-3 {width: 33%;}

Das funktioniert aber nur bei 3 Spalten. Das 2013er Template passt aber die Anzahl der Spalten der Seitenbreite an.Ich suche jetzt auch schon wieder eine ganze Zeit, kann aber den passenden Abschnitt bei den CSS nicht finden :-(

sidebar-main.php

PHP

<?php
if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <div id="secondary" class="sidebar-container" role="complementary">
        <div class="widget-area">
            <?php dynamic_sidebar( 'sidebar-1' ); ?>
        </div>
    </div>
<?php endif; ?>

Widget- und Footer CSS

Code

/**
 * 6.1 Widgets
 * ----------------------------------------------------------------------------
 */


.widget {
    background-color: rgba(247, 245, 231, 0.7);
    font-size: 14px;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    -ms-hyphens:     auto;
    hyphens:         auto;
    margin:0; /*0 0 10px;*/
    padding: 20px;
    word-wrap: break-word;
}


.widget .widget-title {
    font: 300 italic 20px "Source Sans Pro", Helvetica, sans-serif;
    margin: 0 0 10px;
}


.widget ul,
.widget ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


.widget li {
    padding: 5px 0;
}


.widget .children li:last-child {
    padding-bottom: 0;
}


.widget li > ul,
.widget li > ol {
    margin-left: 20px;
}


.widget a {
    color: #bc360a;
}


.widget a:hover {
    color: #ea9629;
}


/* Search widget */
.search-form .search-submit {
    display: none;
}


/* RSS Widget */
.widget_rss .rss-date {
    display: block;
}


.widget_rss .rss-date,
.widget_rss li > cite {
    color: #a2a2a2;
}


/* Calendar Widget */
.widget_calendar table,
.widget_calendar td {
    border: 0;
    border-collapse: separate;
    border-spacing: 1px;
}


.widget_calendar caption {
    font-size: 14px;
    margin: 0;
}


.widget_calendar th,
.widget_calendar td {
    padding: 0;
    text-align: center;
}


.widget_calendar a {
    display: block;
}


.widget_calendar a:hover {
    background-color: rgba(0, 0, 0, 0.15);
}


.widget_calendar tbody td {
    background-color: rgba(255, 255, 255, 0.5);
}


.site-footer .widget_calendar tbody td {
    background-color: rgba(255, 255, 255, 0.05);
}


.widget_calendar tbody .pad, .site-footer .widget_calendar tbody .pad {
    background-color: transparent;
}




/**
 * 7.0 Footer
 * ----------------------------------------------------------------------------
 */


.site-footer {
    color: #333;
    font-size: 14px;
    text-align: center;
}


.site-footer .widget-area,
.sidebar .site-footer {
    text-align: left;
}


.site-footer a {
    color: #686758;
}


.site-footer .sidebar-container {
    background-color: #999;
    padding: 25px 0;
}


.site-footer .widget-area {
    margin: 0 auto;
    max-width: 1040px;
    width: 100%;
}


.sidebar .site-footer .widget-area {
    max-width: 724px;
    position: relative;
    left: -158px;
}


.site-footer .widget {
    background: transparent;
    color: #333;
    float: left;
    margin-right: 20px;
    width: 245px;
}


.sidebar .site-footer .widget {
    width: 228px;
}


.sidebar .site-footer .widget:nth-of-type(4),
.sidebar .site-footer .widget:nth-of-type(3) {
    margin-right: 0;
}


.site-footer .widget a {
    color: #333;
}


.site-footer .widget a:hover {
    color: #333;
    text-decoration:underline;
}


.site-footer .widget-title,
.site-footer .widget-title a,
.site-footer .wp-caption-text {
    color: #333;
}


.site-info {
    margin: 0 auto;
    max-width: 1040px;
    padding: 10px 0;
    width: 100%;
}


#wpstats {
    display: block;
    margin: -10px auto 0;
}

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

2013 Anpassung im (Haupt) Widgetbereich

Jetzt mitmachen!