it-roy-ru.com

Как переместить боковую панель в TwentyFifteen вправо?

Можно ли переместить боковую панель в теме TwentyFifteen вправо, используя только дочернюю тему и CSS, или это требует изменений самой темы? Основная проблема, с которой я сталкиваюсь, заключается в том, что я могу получить боковую панель с правой стороны либо в сценарии "по умолчанию", либо в "прокрутке", но не в обоих (по умолчанию используется позиция: относительная и это то, что вы получаете, когда страница загружается, прокрутка устанавливается при прокрутке страницы и меняет положение боковой панели на абсолютное.)

15
Anteru

Я взял следующее из rtl.css и применил их через Magic Widget с дополнительными ключевыми словами !important к английскому сайту:

body:before {
    right: 0 !important;
    left: auto !important;
}
.sidebar {
    float: right !important;
    margin-right: auto !important;
    margin-left: -100% !important;
}
.site-content {
    float: right !important;
    margin-right: 29.4118% !important;
    margin-left: auto !important;
}
.site-footer {
    float: right !important;
    margin: 0 35.2941% 0 0 !important;
}

Кажется, это работает, даже когда вы прокручиваете страницу вниз.

6
fuxia

Вы можете добавить приведенный ниже код в свою дочернюю тему.

@media screen and (min-width: 59.6875em) {
    .site-content {
        float: left;
        margin-left: 0px;
        width: 70.5882%;
    }   
    .sidebar {
        float: right;
        right:0;
        margin-right: 0px;
        max-width: 413px;
        width: 29.4118%;
    }   
    body:before {
        right: 0;
        left:auto;
    }       
    .site-footer {
        margin: 0 0 0 6.1%;
    }
}
4
amolveer

Принятое решение нарушает отзывчивость темы при использовании с мобильного телефона. Мне пришлось обернуть принятое решение Тошо и Антеру в @media screen как исходный шаблон двадцать пятнадцати.

@media screen and (min-width: 59.6875em) {
  body:before {
    right: 0 !important;
    left: auto !important;
  }

  .sidebar {
    float: right !important;
    margin-right: auto !important;
    margin-left: -100% !important;
  }
  .site-content {
    float: right !important;
    margin-right: 29.4118% !important;
    margin-left: auto !important;
  }
  .site-footer {
    float: right !important;
    margin: 0 35.2941% 0 0 !important;
  }

  body { direction: rtl; }
  .sidebar, .site-content, .site-footer { direction: ltr; }
}
1
Augusto

Недавно я расширил детскую тему из советов и подсказок для темы двадцать пятнадцать, и я подумал, что должен поделиться с вами, ребята, как вы можете переместить боковую панель вправо. в расширенной дочерней теме я полностью удалил боковую панель из темы двадцать пятнадцать, так как некоторые люди предпочитают использовать ее таким образом. Вы можете скачать дочернюю тему здесь и изменить код для восстановления боковой панели справа:

Измените следующий код:

.sidebar {
    float: none !important;
    margin-right: 0px;
    max-width: 413px;
    position: relative !important;
    width: 29.4118%;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    display: none;
}

в

.sidebar {
    float: right;
    margin-right: 0px;
    max-width: 413px;
    position: relative !important;
    width: 29.4118%;
    background: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
0
Djouonang Landry