Wie die Seitenleiste in TwentyFifteen nach rechts bewegen?

16

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

themes child-theme theme-twenty-fifteen

— Anteru
quelle

3

Schau dir das Thema an rtl.css. Das macht es.

— fuxia

Ist nicht ausreichend. Wenn ich es mit dem RTL-Tester versuche, bleibt die Seitenleiste auf der linken Seite. Wenn ich den relevanten Abschnitt aus der RTL.css kopiere / einfüge, ist die Seitenleiste zwar umgeschaltet, aber beim Scrollen würde sie wieder kaputt gehen.

— Anteru

6

Ich habe Folgendes aus dem genommen rtl.cssund sie über Magic Widget mit zusätzlichen !importantSchlü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.

— fuxia
quelle

1

Für mich nicht ausreichend. Ich musste auch hinzufügen: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }

— Anteru

@ Enteru Ich gehe davon aus, dass Sie wissen, wie das SE-Netzwerk funktioniert: Wenn Sie einen Zusatz erhalten haben, reichen Sie eine Bearbeitung ein und erläutern Sie das Warum in einer Bearbeitungsnachricht. Vielen Dank.

— Kaiser

Zumindest hat es in Firefox nicht gereicht, wenn ich nach unten scrolle, verschwindet die Seitenleiste zufällig und erscheint wieder. Der RTL / LTR-Trick scheint das zu lösen. Oh und fürs Protokoll: Wenn Sie dies in ein untergeordnetes Thema einfügen, !importantwerden die nicht benötigt.

— Anteru

Ja, bekomme das gleiche Problem, wenn ich es teste.

— Brad Dalton

@ Enteru - vielen Dank, Ihre zusätzlichen Codes haben mir auch geholfen!

— Igor Laszlo

4

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

— Amolveer
quelle

1

Arbeitet basierend auf meinen Tests.

— Brad Dalton

Funktioniert bei mir nicht, sobald ich einen Bildlauf durchführe und das JavaScript die Seitenleiste klebrig macht, wird sie nach rechts verschoben. Wahrscheinlich, weil das JavaScript die Position in "fixed" ändert, was zusammen mit der Rechts: 0-Regel dazu führt, dass es auf der rechten Seite bleibt (und es daher verschiebt, wenn das Fenster breit genug ist.)

— Anteru

1

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 eine @media screenwie die Originalvorlage von 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; }
}

— Augusto
quelle

0

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 hier herunterladen 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);
}

— Djouonang Landry
quelle