Bagaimana cara memindahkan bilah sisi di TwentyFifteen ke kanan?

16

Apakah mungkin untuk memindahkan bilah sisi dalam tema TwentyFifteen ke kanan menggunakan tema anak dan hanya CSS, atau apakah itu memerlukan perubahan pada tema itu sendiri? Masalah utama yang saya hadapi adalah bahwa saya bisa mendapatkan bilah sisi di sisi kanan baik dalam skenario "default" atau "scrolled", tetapi tidak dalam keduanya (default menggunakan posisi: relatif dan adalah apa yang Anda dapatkan ketika halaman memuat, digulir diatur ketika halaman digulir dan mengubah posisi sidebar menjadi absolut.)

themes child-theme theme-twenty-fifteen

— Anteru
sumber

3

Lihatlah temanya rtl.css. Itu yang terjadi.

— fuxia

Tidak cukup. Jika saya mencoba dengan tester RTL, bilah sisi tetap di sisi kiri. Ketika saya menyalin / menempelkan bagian yang relevan dari RTL.css, bilah sisi memang beralih, tetapi akan rusak lagi saat menggulir.

— Anteru

6

Saya mengambil yang berikut dari rtl.cssdan menerapkannya melalui Widget Ajaib dengan !importantkata kunci tambahan ke situs berbahasa Inggris:

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

Ini sepertinya berhasil, bahkan ketika Anda menggulir ke bawah.

— fuxia
sumber

1

Tidak cukup untukku. Saya juga harus menambahkan: body {direction: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }

— Anteru

@Anteru Saya berasumsi bahwa Anda tahu cara kerja jaringan SE: Jika Anda mendapat tambahan, ajukan suntingan dan jelaskan alasannya dalam pesan edit. Terima kasih.

— kaiser

Setidaknya itu tidak cukup di Firefox, ketika saya gulir ke bawah, bilah samping akan menghilang secara acak dan muncul kembali. Trik RTL / LTR tampaknya menyelesaikannya. Oh dan sebagai catatan: Ketika menempatkan ini dalam tema anak, !importantitu tidak diperlukan.

— Anteru

Yap, dapatkan masalah yang sama saat saya mengujinya.

— Brad Dalton

@Anteru - terima kasih banyak, kode tambahan Anda juga membantu saya!

— Igor Laszlo

4

Anda dapat menambahkan kode di bawah ini ke tema anak Anda.

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

1

Bekerja berdasarkan pengujian saya.

— Brad Dalton

Tidak berfungsi untuk saya, segera setelah saya gulir dan JavaScript membuat bilah sisi lengket, bergerak ke kanan. Mungkin karena JavaScript mengubah posisi menjadi "diperbaiki", yang bersama-sama dengan aturan kanan: 0 membuatnya tetap di sisi kanan (dan karenanya memindahkannya, jika jendela cukup lebar.)

— Anteru

1

Solusi yang diterima memecah respons tema ketika digunakan dari ponsel. Saya harus membungkus solusi yang diterima oleh toscho dan Anteru @media screensebagai template asli dua belas belas .

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

0

Saya baru-baru ini memperluas tema anak dari tips dan trik untuk tema dua puluh lima belas dan saya pikir saya harus berbagi bagaimana Anda dapat memindahkan bilah sisi ke kanan dengan kalian. dalam tema anak diperluas saya menghapus sidebar sepenuhnya dari tema dua puluh lima belas karena beberapa orang lebih suka menggunakannya dengan cara itu. Anda dapat mengunduh tema anak di sini dan mengubah kode untuk mengembalikan bilah sisi ke kanan:

Ubah kode berikut:

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

untuk

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