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

16

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 problème principal 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 valeur par défaut utilise position: relative et c'est ce que vous obtenez lorsque la page charge, le défilement est défini lorsque la page défile et change la position de la barre latérale en absolu.)

themes child-theme theme-twenty-fifteen Anteru
la source
3
Regardez les thèmes rtl.css. Ça fait ça.
fuxia
C'est insuffisant. Si j'essaie avec le testeur RTL, la barre latérale reste sur le côté gauche. Lorsque je copiais / collais la section pertinente du RTL.css, la barre latérale basculait en effet, mais elle se cassait à nouveau lors du défilement.
Anteru

Réponses:

6

J'ai pris les éléments suivants de la 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.

fuxia
la source
1
Cela ne me suffit pas. J'ai également dû ajouter: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }
Anteru
@Anteru Je suppose que vous savez comment fonctionne le réseau SE: si vous avez un ajout, déposez une modification et expliquez pourquoi dans un message de modification. Merci.
kaiser
Au moins, cela ne suffisait pas dans Firefox, lorsque je descendais, la barre latérale disparaissait au hasard et réapparaissait. L'astuce RTL / LTR semble résoudre ce problème. Oh et pour mémoire: lorsque vous mettez cela dans un thème enfant, les !importantne sont pas nécessaires.
Anteru
Oui, obtenez le même problème lorsque je le teste.
Brad Dalton
@Anteru - merci beaucoup, vos codes supplémentaires m'ont aussi aidé!
Igor Laszlo
4

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%;
    }
}
amolveer
la source
1
Fonctionne sur la base de mes tests.
Brad Dalton
Cela ne fonctionne pas pour moi, dès que je défile et que le JavaScript rend la barre latérale collante, elle se déplace vers la droite. Probablement parce que le JavaScript change la position en "fixe", ce qui, avec la règle du droit: 0, le fait rester sur le côté droit (et donc le déplace, si la fenêtre est suffisamment large.)
Anteru
1

La solution acceptée rompt la réactivité du thème lorsqu'il est utilisé à partir d'un mobile. J'ai dû envelopper la solution acceptée par toscho et Anteru dans un @media screenmodèle original de vingt-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
la source
0

J'ai récemment étendu un thème enfant à partir de trucs et astuces pour le thème vingt quinze et j'ai pensé que je devrais partager comment vous pouvez déplacer la barre latérale vers la droite avec vous. dans le thème enfant étendu, j'ai complètement supprimé la barre latérale du thème vingt quinze car certaines personnes préfèrent l'utiliser de cette façon. Vous pouvez télécharger le thème enfant ici et modifier le code pour restaurer la barre latérale à droite:

Modifiez le code suivant:

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

à 

.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
la source