mment déplacer la barre latérale en vingt -fifeen vers la droit

Question

03Cp> Est-il possible de déplacer la barre latérale dans le thème de vingt -Fetien à droite en utilisant un thème de l'enfant et un CSS uniquement, ou nécessite-t-il des modifications au thème lui-même? Le problème principal que je rencontre est que je puisse obtenir la barre latérale du côté droit dans le scénario "défaut" ou "défilé", mais pas dans les deux (par défaut utilise la position: relatif et c'est ce que vous obtenez lorsque la page Les charges, défilées sont définies lorsque la page est défilée et modifie la position de la barre latérale en absolu.)u003C/

Answer 1

03Cp> J'ai suivi les éléments suivants à partir de rtl.css et les ai appliqués via 03Ca href="https://wordpress.org/plugins/magic-widgets/">Widget magiqueu003C/ avec !important mots-clés supplémentaires vers un site anglais:u003C/

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

03Cp> Cela semble fonctionner, même lorsque vous faites défiler.u003C/

Answer 2

03Cp> Vous pouvez ajouter ci-dessous le code à votre thème de votre enfant.u003C/

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

Answer 3

03Cp> La solution acceptée brise la réactivité du thème lorsqu'il est utilisé à partir d'un mobile. Je devais envelopper la solution acceptée par Toscho et Anteru dans un @media screen en tant que vingt fiduits d'origine.u003C/

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

Answer 4

03Cp> J'ai récemment étendu un thème enfant des astuces et des astuces pour la vingt quinze thème et je pensais que je devrais partager la manière dont vous pouvez déplacer la barre latérale vers la droite avec vous les gars. Dans le thème de l'enfant étendu, j'ai complètement retiré la barre latérale de la vingt quinze thème, car certaines personnes préfèrent l'utiliser de cette façon. Vous pouvez télécharger le thème enfant 03Ca href="http://wedevall.com/product/twenty-fifteen-child-no-sidebar/" rel="nofollow">Iciu003C/ et modifier le code pour restaurer la barre latérale à droite:u003C/

03Cp> Changez le code suivant:u003C/

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

03Cp> àu003C/

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