Como mover a barra lateral do TwentyFifteen para a direita?

16

É possível mover a barra lateral no tema TwentyFifteen para a direita usando apenas um tema filho e CSS, ou isso requer alterações no próprio tema? O principal problema que encontro é que posso obter a barra lateral do lado direito no cenário "padrão" ou "rolado", mas não nos dois (o padrão usa position: relative e é o que você obtém quando a página carrega, rolada é definida quando a página é rolada e altera a posição da barra lateral para absoluta.)

themes child-theme theme-twenty-fifteen Anteru
fonte
3
Veja o tema rtl.css. Faz isso.
fuxia
Não é suficiente. Se eu tentar com o testador RTL, a barra lateral permanecerá no lado esquerdo. Quando copiei / colei a seção relevante do RTL.css, a barra lateral realmente mudou, mas ela seria quebrada novamente ao rolar.
Anteru

Respostas:

6

Peguei o seguinte rtl.csse os apliquei via Magic Widget com !importantpalavras-chave adicionais em um site em inglês:

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

Isso parece funcionar, mesmo quando você rola para baixo.

fuxia
fonte
1
Não é suficiente para mim. Eu também tive que adicionar: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }
Anteru
@Anteru Suponho que você saiba como a rede SE funciona: se você recebeu uma adição, arquive uma edição e explique o porquê em uma mensagem de edição. Obrigado.
kaiser
Pelo menos, não era suficiente no Firefox; quando eu rolava para baixo, a barra lateral desaparecia aleatoriamente e reaparecia. O truque RTL / LTR parece resolver isso. Ah, e para constar: ao colocar isso em um tema infantil, !importantnão são necessários.
Anteru
Sim, obtenha o mesmo problema quando eu testá-lo.
Brad Dalton
@ Anteru - muito obrigado, seus códigos adicionais também me ajudaram!
Igor Laszlo
4

Você pode adicionar o código abaixo ao seu tema filho.

@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
Funciona com base nos meus testes.
Brad Dalton
Não funciona para mim, assim que eu rolar e o JavaScript deixar a barra lateral pegajosa, ela se moverá para a direita. Provavelmente porque o JavaScript muda a posição de "fixo", que, juntamente com o direito: 0 regra torna manter o lado direito (e, portanto, move-lo, se a janela é grande o suficiente.)
Anteru
1

A solução aceita interrompe a capacidade de resposta do tema quando usada em um celular. Eu tive que embrulhar a solução aceita por toscho e Anteru em um @media screenmodelo original dos vinte e quinze .

@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

Recentemente, estendi um tema infantil com dicas e truques para o tema vinte e quinze e achei que deveria compartilhar como vocês podem mover a barra lateral para a direita com vocês. no tema filho estendido, removi completamente a barra lateral do tema vinte e quinze, pois algumas pessoas preferem usá-lo dessa maneira. Você pode baixar o tema filho aqui e alterar o código para restaurar a barra lateral à direita:

Altere o seguinte código:

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

para 

.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