web-dev-qa-db-fra.com

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

themeschild-themetheme-twenty-fifteen
15
Anteru

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.

6
fuxia

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%;
    }
}
4
amolveer

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

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);
}
0
Djouonang Landry