wake-up-neo.com

Wie verschiebe ich die Sidebar in TwentyFifteen nach rechts?

Ist es möglich, die Seitenleiste im TwentyFifteen-Design mit einem untergeordneten Design und CSS nach rechts zu verschieben, oder müssen Änderungen am Design selbst vorgenommen werden? Das Hauptproblem, auf das ich stoße, ist, dass ich die Seitenleiste entweder im "Standard" - oder im "gescrollten" Szenario auf der rechten Seite sehen kann, aber nicht in beiden wird geladen, gescrollt wird gesetzt, wenn die Seite gescrollt wird und ändert die Seitenleistenposition in absolut.)

15
Anteru

Ich habe Folgendes aus dem rtl.css genommen und sie über Magic Widget mit zusätzlichen !important-Schlüsselwörtern auf eine englische Site angewendet:

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

Dies scheint zu funktionieren, auch wenn Sie nach unten scrollen.

6
fuxia

Sie können Ihrem untergeordneten Thema den folgenden Code hinzufügen.

@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

Die akzeptierte Lösung unterbricht die Reaktionsfähigkeit des Themas, wenn es von einem Mobiltelefon aus verwendet wird. Ich musste die akzeptierte Lösung von toscho und Anteru in einen @media screen als Originalvorlage für fünfundzwanzig einwickeln.

@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

Ich habe kürzlich ein untergeordnetes Thema von Tipps und Tricks für das fünfundzwanzigste Thema erweitert, und ich dachte, ich sollte mit Ihnen teilen, wie Sie die Seitenleiste nach rechts verschieben können. im erweiterten kind-thema habe ich die sidebar komplett aus dem fünfundzwanzig-thema entfernt, da manche menschen es vorziehen, es so zu benutzen. Sie können das untergeordnete Thema herunterladen hier und den Code ändern, um die rechte Seitenleiste wiederherzustellen:

Ändern Sie den folgenden Code:

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

zu

.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