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!

Benutzer online in diesem Thema