Como mover a barra lateral em TwentyFifteen para a direita?

14

É possível mover a barra lateral no tema TwentyFifteen para a direita usando apenas um tema filho e CSS, ou isso requer mudanças no próprio tema? O principal problema que estou enfrentando é que eu posso obter a barra lateral no lado direito no cenário "padrão" ou "rolado", mas não em ambos (o padrão usa posição: relativo e é o que você obtém quando a página carrega, rolado é definido quando a página é rolada e muda a posição da barra lateral para absoluto.)

    
por Anteru 02.01.2015 / 17:20

4 respostas

6

Eu peguei o seguinte do rtl.css e apliquei-o por meio do Widget Mágico com outras palavras-chave !important para 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.

    
por fuxia 02.01.2015 / 19:39
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%;
    }
}
    
por amolveer 06.02.2015 / 13:00
1

A solução aceita quebra a capacidade de resposta do tema quando usado em um dispositivo móvel. Eu tive que embrulhar a solução aceita por toscho e Anteru em um @media screen como o modelo vigésimo quinto original.

@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; }
}
    
por Augusto 06.12.2015 / 12:23
0

Recentemente estendi um tema infantil a partir de dicas e truques para o tema dos vinte e quinze e achei que deveria compartilhar como você pode mover a barra lateral para a direita com vocês. No tema da criança estendida eu removi completamente a barra lateral do tema dos vinte e quinze, já que algumas pessoas preferem usá-la dessa maneira. Você pode baixar o tema 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);
}
    
por Djouonang Landry 06.08.2015 / 18:49