WordPress : Comment déplacer la barre latérale dans TwentyFifteen vers la droite ?

Est-il possible de déplacer la barre latérale du thème TwentyFifteen vers la droite en utilisant uniquement un thème enfant et CSS, ou cela nécessite-t-il des modifications du thème lui-même ? Le principal problème que je rencontre est que je peux obtenir la barre latérale sur le côté droit dans le scénario « par défaut » ou « défilé », mais pas dans les deux (la position par défaut utilise la position : relative et correspond à ce que vous obtenez lorsque la page se charge, le défilement est défini lorsque la page défile et change la position de la barre latérale en absolue.)

Solution n°1 trouvée

Vous pouvez ajouter le code ci-dessous à votre thème enfant.

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

Solution n°2 trouvée

J’ai pris les éléments suivants du rtl.csset les ai appliqués via Magic Widget avec des !importantmots-clés supplémentaires à un site anglais :

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

Cela semble fonctionner, même lorsque vous faites défiler vers le bas.

Solution n°3 trouvée

La solution retenue casse la réactivité du thème lorsqu’il est utilisé depuis un mobile. J’ai dû envelopper la solution acceptée par toscho et Anteru dans un @media screenmodèle vingt-quinze 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; }
}