TwentyFifteen içindeki kenar çubuğunu sağa nasıl taşıyabilirim?

16

TwentyFifteen temasındaki kenar çubuğunu yalnızca bir alt tema ve CSS kullanarak sağa taşımak mümkün mü yoksa temanın kendisinde değişiklik yapılmasını gerektiriyor mu? Karşılaştığım ana sorun, kenar çubuğunu "varsayılan" veya "kaydırılan" senaryoda sağ tarafa alabilmem, ancak her ikisinde de olmamamdır (varsayılan konum: relative kullanır ve sayfa ne zaman alırsınızdır) yüklendiğinde, sayfa kaydırıldığında kaydırılır ve kenar çubuğu konumunu mutlak olarak değiştirir.)

themes child-theme theme-twenty-fifteen

— Anteru
kaynak

3

Temaya bakın rtl.css. Bunu yapar.

— fuxia

Yeterli değil. RTL test cihazı ile denersem, kenar çubuğu sol tarafta kalır . İlgili bölümü RTL.css'den kopyaladığımda / yapıştırdığımda kenar çubuğu gerçekten değişti, ancak kaydırma sırasında tekrar kırılacaktı.

— Anteru

6

Aşağıdakilerden aşağıdakileri aldım rtl.cssve bir İngilizce siteye ek anahtar kelimelerle Magic Widget aracılığıyla uyguladım !important:

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

Aşağı kaydırsanız bile bu işe yarıyor gibi görünüyor.

— fuxia
kaynak

1

Benim için yeterli değil. Ayrıca şunu eklemek zorundaydım: body {direction: rtl; }. kenar çubuğu, .site içeriği, .site altbilgisi {direction: ltr; }

— Anteru

@Anteru SE ağının nasıl çalıştığını bildiğinizi varsayıyorum: Bir ekiniz varsa, bir düzenleme dosyası gönderin ve neden bir düzenleme mesajında açıklayın . Teşekkürler.

— Kaiser

En azından Firefox'ta yeterli değildi, aşağı kaydırdığımda yan çubuk rastgele kaybolacak ve yeniden görünecekti. RTL / LTR hilesi bunu çözüyor gibi görünüyor. Oh ve kayıt için: Bunu bir çocuk temasına koyarken, !importantgerekli değildir.

— Anteru

Evet, test ettiğimde aynı problemi yaşayın.

— Brad Dalton

@Anteru - çok teşekkürler, ek kodlarınız da bana yardımcı oldu!

— Igor Laszlo

4

Alt temanıza aşağıdaki kodu ekleyebilirsiniz.

@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
kaynak

1

Testlerime dayanarak çalışır.

— Brad Dalton

Benim için çalışmıyor, kaydırdığımda ve JavaScript kenar çubuğunu yapışkan hale getirdiği anda sağa doğru hareket ediyor. JavaScript birlikte sağ ile "sabit" pozisyonunu değiştirir Muhtemelen çünkü: 0 kural sağ tarafında sopa yapar (ve dolayısıyla pencere yeterince geniş olması durumunda, taşır.)

— Anteru

1

Kabul edilen çözüm, bir cep telefonundan kullanıldığında temanın yanıt verebilirliğini bozar. Kabul edilen çözümü toscho ve Anteru tarafından @media screenorijinal yirmi on beş şablon olarak sarmak zorunda kaldım .

@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
kaynak

0

Son zamanlarda yirmi on beş tema için ipuçları ve püf noktalarından bir çocuk teması uzattım ve kenar çubuğunu sağa nasıl taşıyabileceğinizi paylaşmam gerektiğini düşündüm. genişletilmiş çocuk temasında bazı insanlar bu şekilde kullanmayı tercih ettiği için kenar çubuğunu yirmi on beş temadan tamamen kaldırdım. Alt temayı buradan indirebilir ve kenar çubuğunu sağa geri yüklemek için kodu değiştirebilirsiniz:

Aşağıdaki kodu değiştirin:

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

için

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