Jak przesunąć pasek boczny w TwentyFifteen w prawo?

16

Czy można przesunąć pasek boczny w kompozycji TwentyFifteen w prawo, używając tylko motywu potomnego i CSS, czy też wymaga zmian w samym motywie? Głównym problemem, na który wpadam, jest to, że mogę uzyskać pasek boczny po prawej stronie w scenariuszu „domyślnym” lub „przewijanym”, ale nie w obu przypadkach (domyślnie używa pozycji: względna i jest to, co dostajesz, gdy strona ładuje, przewijany jest ustawiany podczas przewijania strony i zmienia pozycję paska bocznego na absolutną).

themes child-theme theme-twenty-fifteen

— Anteru
źródło

3

Spójrz na motyw rtl.css. Robi to.

— fuxia

Nie jest wystarczający. Jeśli spróbuję z testerem RTL, pasek boczny pozostanie po lewej stronie. Kiedy skopiowałem / wkleiłem odpowiednią sekcję z pliku RTL.css, pasek boczny rzeczywiście się przełączył, ale podczas przewijania znów się zepsuje.

— Anteru

6

Wziąłem następujące rtl.cssi zastosowałem je za pomocą Magic Widget z dodatkowymi !importantsłowami kluczowymi na angielskiej stronie:

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

To wydaje się działać, nawet gdy przewijasz w dół.

— fuxia
źródło

1

Za mało dla mnie. Musiałem także dodać: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }

— Anteru

@Anteru Zakładam, że wiesz, jak działa sieć SE: Jeśli masz dodatek, prześlij edycję i wyjaśnij dlaczego w wiadomości edycyjnej. Dzięki.

— kaiser

Przynajmniej nie wystarczyło w Firefoksie, kiedy przewijałem w dół, pasek boczny losowo znikał i pojawiał się ponownie. Wydaje się, że sztuczka RTL / LTR to rozwiązuje. Aha, i dla przypomnienia: kiedy umieszczamy to w dziecięcym motywie, !importantnie są potrzebne.

— Anteru

Tak, otrzymuję ten sam problem, kiedy go testuję.

— Brad Dalton,

@Anteru - wielkie dzięki, twoje dodatkowe kody też mi pomogły!

— Igor Laszlo

4

Możesz dodać poniższy kod do motywu podrzędnego.

@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
źródło

1

Działa w oparciu o moje testy.

— Brad Dalton,

Nie działa dla mnie, gdy tylko przewijam, a JavaScript sprawia, że pasek boczny jest lepki, przesuwa się w prawo. Prawdopodobnie dlatego, że JavaScript zmienia pozycję na „naprawioną”, co wraz z regułą right: 0 powoduje, że przykleja się do prawej strony (a zatem przesuwa ją, jeśli okno jest wystarczająco szerokie.)

— Anteru

1

Akceptowane rozwiązanie przerywa czas reakcji motywu, gdy jest używany z telefonu komórkowego. Musiałem owinąć zaakceptowane rozwiązanie Toscho i Anteru @media screenjako oryginalny dwadzieścia piętnaście szablonów.

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

— Augusto
źródło

0

Niedawno rozszerzyłem motyw podrzędny z porad i wskazówek dotyczących dwudziestu piętnastu tematów i pomyślałem, że powinienem podzielić się z wami, jak przesuwać pasek boczny w prawo z wami. w rozszerzonym motywie potomnym całkowicie usunąłem pasek boczny z dwudziestu piętnastu motywów, ponieważ niektórzy wolą go używać w ten sposób. Możesz pobrać motyw podrzędny tutaj i zmienić kod, aby przywrócić pasek boczny po prawej stronie:

Zmień następujący kod:

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

do

.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
źródło