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

14

Est-il possible de déplacer la barre latérale du thème TwentyFifteen vers la droite en utilisant un thème enfant et CSS uniquement, 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 lors du défilement de la page et modifie la position de la barre latérale en absolu.)

    
posée Anteru 02.01.2015 - 17:20

4 réponses

6

J'ai pris les éléments suivants dans rtl.css et les ai appliqués via les Widget magique avec des mots-clés supplémentaires à !important . 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 vers le bas.

    
réponse donnée fuxia 02.01.2015 - 19:39
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%;
    }
}
    
réponse donnée amolveer 06.02.2015 - 13:00
1

La solution acceptée rompt la réactivité du thème lorsqu’il est utilisé depuis un mobile. Je devais envelopper la solution acceptée par toscho et Anteru dans un @media screen en tant que modèle original de vingt-cinq.

@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; }
}
    
réponse donnée Augusto 06.12.2015 - 12:23
0

J'ai récemment étendu un thème pour enfants à partir de trucs et astuces pour le thème des vingt-quinze ans et je me suis dit que je devrais vous dire 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 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);
}
    
réponse donnée Djouonang Landry 06.08.2015 - 18:49

Lire d'autres questions sur les étiquettes