¿Cómo mover la barra lateral en TwentyFifteen a la derecha?

16

¿Es posible mover la barra lateral en el tema TwentyFifteen a la derecha usando un tema secundario y CSS solamente, o requiere cambios en el tema en sí? El principal problema con el que me encuentro es que puedo obtener la barra lateral en el lado derecho en el escenario "predeterminado" o "desplazado", pero no en ambos (el predeterminado usa position: relative y es lo que obtienes cuando la página cargas, desplazado se establece cuando se desplaza la página y cambia la posición de la barra lateral a absoluta).

themes child-theme theme-twenty-fifteen

— Anteru
fuente

3

Mira el tema rtl.css. Hace eso.

— fuxia

No es suficiente. Si lo intento con el probador RTL, la barra lateral permanece en el lado izquierdo. Cuando copié / pegué la sección relevante del RTL.css, la barra lateral se alteró, pero se rompió nuevamente al desplazarse.

— Anteru

6

Tomé lo siguiente del rtl.cssy los apliqué a través de Magic Widget con !importantpalabras clave adicionales a un sitio en 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;
}

Esto parece funcionar, incluso cuando te desplazas hacia abajo.

— fuxia
fuente

1

No es suficiente para mi. También tuve que agregar: body {direction: rtl; } .sidebar, .site-content, .site-footer {dirección: ltr; }

— Anteru

@Anteru Supongo que sabe cómo funciona la red SE: si tiene una adición, presente una edición y explique el por qué en un mensaje de edición. Gracias.

— kaiser

Al menos no fue suficiente en Firefox, cuando me desplazaba hacia abajo, la barra lateral desaparecería y reaparecería al azar. El truco RTL / LTR parece resolver eso. Ah, y para que conste: al poner esto en un tema secundario, !importantno son necesarios.

— Anteru

Sí, tengo el mismo problema cuando lo pruebo.

— Brad Dalton

@Anteru - muchas gracias, ¡tus códigos adicionales también me ayudaron!

— Igor Laszlo

4

Puede agregar el siguiente código al tema de su hijo.

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

1

Trabajos basados en mis pruebas.

— Brad Dalton

No funciona para mí, tan pronto como me desplazo y el JavaScript hace que la barra lateral sea pegajosa, se mueve hacia la derecha. Probablemente porque el JavaScript cambia la posición de "fijo", que junto a la derecha: 0 regla hace que se pegue a la parte derecha (y por lo tanto lo mueve, si la ventana es lo suficientemente amplia.)

— Anteru

1

La solución aceptada rompe la capacidad de respuesta del tema cuando se usa desde un dispositivo móvil. Tuve que envolver la solución aceptada por Toscho y Anteru en una @media screenplantilla original de veinticinco.

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

0

Recientemente extendí un tema infantil a partir de consejos y trucos para el tema veinticinco y pensé que debería compartir cómo pueden mover la barra lateral a la derecha con ustedes. en el tema secundario extendido, eliminé la barra lateral por completo del tema veinticinco, ya que algunas personas prefieren usarlo de esa manera. Puede descargar el tema secundario aquí y cambiar el código para restaurar la barra lateral a la derecha:

Cambia el siguiente 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;
}

a

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