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.css
et les ai appliqués via Magic Widget avec des !important
mots-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 screen
modè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; }
}
0 commentaire