Come spostare la barra laterale in TwentyFifteen a destra?

16

È possibile spostare la barra laterale del tema TwentyFifteen a destra usando solo un tema figlio e CSS o richiede modifiche al tema stesso? Il problema principale in cui mi imbatto è che posso ottenere la barra laterale sul lato destro in uno scenario "predefinito" o "scorrevole", ma non in entrambi (l'impostazione predefinita usa: relativo ed è ciò che ottieni quando la pagina viene caricato, lo scorrimento viene impostato quando si scorre la pagina e cambia la posizione della barra laterale in assoluto.)

themes child-theme theme-twenty-fifteen

— Anteru
fonte

3

Guarda il tema rtl.css. Lo fa.

— fuxia

Non è sufficiente. Se provo con il tester RTL, la barra laterale rimane sul lato sinistro. Quando ho copiato / incollato la sezione pertinente da RTL.css, la barra laterale si è effettivamente spostata, ma si spezzerebbe di nuovo durante lo scorrimento.

— Anteru,

6

Ho preso quanto segue da rtl.csse li ho applicati tramite Magic Widget con !importantparole chiave aggiuntive a un sito inglese:

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

Questo sembra funzionare, anche quando si scorre verso il basso.

— fuxia
fonte

1

Non abbastanza per me. Ho anche dovuto aggiungere: body {direction: rtl; } .sidebar, .site-content, .site-footer {direzione: ltr; }

— Anteru il

@Anteru Suppongo che tu sappia come funziona la rete SE: se hai un'aggiunta, invia una modifica e spiega il perché in un messaggio di modifica. Grazie.

— Kaiser

Almeno non era abbastanza in Firefox, quando scorrevo verso il basso, la barra laterale scompariva e riappariva in modo casuale. Il trucco RTL / LTR sembra risolverlo. Oh e per la cronaca: quando si inserisce questo in un tema figlio, !importantnon sono necessari.

— Anteru,

Sì, ottengo lo stesso problema quando lo collaudo.

— Brad Dalton,

@Anteru - grazie mille, anche i tuoi codici aggiuntivi mi hanno aiutato!

— Igor Laszlo,

4

Puoi aggiungere il codice seguente al tema del tuo bambino.

@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
fonte

1

Funziona in base ai miei test.

— Brad Dalton,

Non funziona per me, non appena scorro e JavaScript rende la barra laterale appiccicosa, si sposta a destra. Probabilmente perché JavaScript cambia la posizione in "fixed", che insieme alla regola right: 0 la fa aderire al lato destro (e quindi lo sposta, se la finestra è abbastanza ampia).

— Anteru

1

La soluzione accettata rompe la reattività del tema quando viene utilizzata da un dispositivo mobile. Ho dovuto avvolgere la soluzione accettata da toscho e Anteru in un @media screenmodello originale di venticinque.

@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
fonte

0

Di recente ho esteso un tema per bambini da suggerimenti e trucchi per il tema dei ventiquindici e ho pensato che avrei dovuto condividere il modo in cui puoi spostare la barra laterale a destra con voi ragazzi. nel tema figlio esteso ho rimosso completamente la barra laterale dal tema ventiquindici poiché alcune persone preferiscono usarlo in quel modo. Puoi scaricare qui il tema figlio e modificare il codice per ripristinare la barra laterale a destra:

Modifica il seguente codice:

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

per

.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
fonte