2 боковые колонки слева twenty twelve

Настраиваем тему Twenty Twelwe: 2 левых сайдбара или 2 правых сайдбара

Здравствуйте, сегодня продолжим изменять стандартную тему wordpress – Twenty Twelve, а именно: создадим в ней два левых сайдбара (боковых колонок с виджетами) или же два правых сайдбара.

Скачать исходники для статьи можно ниже

1. Добавляем к Twenty Twelve еще один сайдбар.
Так как в стандатной теме Twenty Twelve только один сайдбар (боковая колонка), то для начала нужно добавить к ней еще один сайдбар.

Более подробно о создании 2-ого сайдбара в Twenty Twelve читайте в моей предыдущей статье — Настраиваем тему Twenty Twelve: 2 сайдбара слева и справа

Выполняем 4 пункта вышеуказанной статьи по порядку, а 5-ый пункт выполняем частично, то есть добавляем в файл стилей только следующий код:

/* Increase theme width to 1000px */
@media screen and (min-width: 960px) { 
    .site {
        max-width: 1000px;
        max-width: 71.4285rem;
    }
}
.ie .site { max-width: 1000px; }

footer[role="contentinfo"] {
    max-width: 1000px;
    max-width: 71.4285rem;
}

А далее выбираем — какую тему мы будем делать — с 2-мя левыми сайдбарами или же с 2-мя правыми сайдбарами:

2. Два левых сайдбара:

два левых сайдбара в twenty twelve

Для двух левых сайдбаров в теме Twenty Twelve нужно вставить в файл стилей — style.css — следующий код:

/* ===[ Two Left Sidebars ]=== */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        float: right;
        width: 49%;
    }
    .custom-layout .widget-area {
        width: 25%;
        float: left;
        margin-left: 10px;
    }
    .custom-layout #extra-sidebar {
        word-wrap: break-word;
        width: 20%;
        float: left;
        margin-left: 2%;
    }
}
/* IE8 and IE7 - Two Left Sidebars */
.ie .custom-layout .site-content {
    float: right;
    width: 49%;
}
.ie .custom-layout .widget-area {
    width: 25%;
    float: left;
    margin-left: 10px;
}
.ie .custom-layout #extra-sidebar {
    word-wrap: break-word;
    width: 20%;
    float: left;
    margin-left: 2%;
}

Здесь строчка «margin-left: 10px;» — регулирует расстояние между сайдбарами — можно вообще ее удалить если не получается 2 сайдбара.

3. Два правых сайдбара:

два правых сайдбара в twenty twelve

Для двух правых сайдбаров в теме Twenty Twelve нужно вставить в файл стилей — style.css — следующий код:

/* ===[ Two Right Sidebars ]=== */
@media screen and (min-width: 600px) { 
    .custom-layout .site-content {
        float: left;
        width: 49%;
    }
    .custom-layout .widget-area { 
        width: 25%;
        margin-right: 10px;
    }
    .custom-layout #extra-sidebar {
        margin-top: 1.8rem;
        word-wrap: break-word;
        width: 20%;
        float: right;
        margin-right: 2%;
    }
}
/* IE8 and IE7 - Two Right Sidebars */
.ie .custom-layout .site-content {
    float: left;
    width: 49%;
}
.ie .custom-layout .widget-area { width: 25%; }
.ie .custom-layout #extra-sidebar {
    margin-top: 1.8rem;
    word-wrap: break-word;
    width: 20%;
    float: right;
    margin-right: 2%;
}

Здесь строчка «margin-right: 10px;» — регулирует расстояние между сайдбарами — можно вообще ее удалить если не получается 2 сайдбара.

На этом на сегодня все — красивых вам и успешных сайтов!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий