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 faut-il modifier le thème lui-même? Le problème principal que je rencontre est que je peux obtenir la barre latérale à droite dans le scénario "par défaut" ou "défilé", mais pas dans les deux cas (la position par défaut utilise: relative et correspond à ce que vous obtenez lorsque la page charge, scrolled est défini lorsque la page est déroulée et modifie la position de la barre latérale en absolu.)
J'ai repris les éléments suivants du rtl.css
et les ai appliqués via Magic Widget avec des mots clés !important
supplémentaires sur 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 l'écran.
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%;
}
}
La solution acceptée rompt la réactivité du thème lorsqu'il est utilisé depuis un mobile. J'ai dû emballer la solution acceptée par toscho et Anteru dans un @media screen
en tant que modèle original de vingt-cinq ans.
@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; }
}
J'ai récemment étendu un thème pour enfants à partir de trucs et astuces pour le thème vingt-quinze et je me suis dit que je devrais expliquer comment vous pouvez déplacer la barre latérale à droite avec vous les gars. dans le thème de l'enfant étendu, j'ai supprimé complètement l'encadré du thème des vingt-quinze, car certaines personnes préfèrent l'utiliser de cette façon. Vous pouvez télécharger le thème de l'enfant ici et modifier le code pour restaurer la barre latérale à droite:
Changer 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);
}