Як перемістити бічну панель в TwentyFifteen вправо?

16

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

themes child-theme theme-twenty-fifteen

— Антеру
джерело

3

Подивіться на теми rtl.css. Це робить це.

— фуксія

Недостатньо. Якщо я спробую з тестером 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 {напрям: rtl; } .sidebar, .site-content, .site-footer {напрям: 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 змінює позицію на "фіксовану", що разом з правим: 0 правило примикає його до правого боку (і, отже, переміщує його, якщо вікно досить широке.)

— Anteru

1

Прийняте рішення порушує чуйність теми при використанні з мобільного. Мені довелося загортати прийняте рішення Toscho та Anteru @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);
}

— Djouonang Landry
джерело