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

16

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

themes child-theme theme-twenty-fifteen

— Anteru
источник

3

Посмотрите на тему rtl.css. Это делает это.

— fuxia

Не достаточно. Если я попробую с тестером RTL, боковая панель останется с левой стороны. Когда я скопировал / вставил соответствующий раздел из RTL.css, боковая панель действительно переключилась, но при прокрутке она снова сломалась.

— Антеру

6

Я взял следующее 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;
}

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

— Фуксия
источник

1

Не достаточно для меня. Я также должен был добавить: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }

— Антеру,

@Anteru Я предполагаю, что вы знаете, как работает сеть SE: если вы получили дополнение, подайте правку и объясните причину в сообщении правки. Благодарю.

— Кайзер

По крайней мере, в Firefox этого было недостаточно, когда я прокручивал вниз, боковая панель случайным образом исчезала и появлялась снова. Трюк RTL / LTR, кажется, решает это. Да, и для записи: если поместить это в детскую тему, !importantони не нужны.

— Антеру

Да, получите ту же проблему, когда я проверю это.

— Брэд Далтон

@Anteru - спасибо большое, ваши дополнительные коды мне тоже помогли!

— Игорь Ласло

4

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

@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%;
    }
}

— amolveer
источник

1

Работает на основе моего тестирования.

— Брэд Далтон

У меня не работает, как только я прокручиваю и JavaScript делает боковую панель липкой, она перемещается вправо. Возможно, потому что JavaScript меняет положение на «фиксированное», что вместе с правилом right: 0 заставляет его придерживаться правой стороны (и, следовательно, перемещает его, если окно достаточно широкое).

— Anteru

1

Принятое решение нарушает отзывчивость темы при использовании с мобильного. Мне пришлось обернуть принятое решение Тошо и Антеру в @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; }
}

— Аугусто
источник

0

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

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

.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);
}

— Джуонанг Ландри
источник