วิธีการย้ายแถบข้างใน TwentyFifteen ไปทางขวา

16

เป็นไปได้ไหมที่จะย้ายแถบด้านข้างในชุดรูปแบบ TwentyFifteen ไปทางขวาโดยใช้ชุดรูปแบบลูกและ CSS เท่านั้นหรือต้องการการเปลี่ยนชุดรูปแบบเอง ปัญหาหลักที่ฉันพบคือฉันสามารถรับแถบด้านข้างทางขวาในสถานการณ์ "เริ่มต้น" หรือ "เลื่อน" แต่ไม่ใช่ทั้งคู่ (เริ่มต้นใช้ตำแหน่ง: สัมพันธ์และเป็นสิ่งที่คุณได้รับเมื่อหน้า โหลดการเลื่อนถูกตั้งค่าเมื่อหน้าถูกเลื่อนและเปลี่ยนตำแหน่งของแถบด้านข้างให้เป็นสัมบูรณ์)

themes child-theme theme-twenty-fifteen

— Anteru
แหล่งที่มา

3

rtl.cssจะมองไปที่รูปแบบ มันทำอย่างนั้น

— fuxia

ไม่เพียงพอ หากฉันลองใช้เครื่องทดสอบ RTL แถบด้านข้างจะยังคงอยู่ทางด้านซ้าย เมื่อฉันคัดลอก / วางส่วนที่เกี่ยวข้องออกจาก RTL.css แถบด้านข้างเปลี่ยนไปจริง ๆ แต่มันจะแตกอีกครั้งขณะเลื่อน

— Anteru

6

ฉันนำสิ่งต่อไปนี้จากrtl.cssและนำไปใช้ผ่านทางMagic Widgetพร้อมด้วย!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;
}

ดูเหมือนว่าจะใช้งานได้แม้ในขณะที่คุณเลื่อนลง

— fuxia
แหล่งที่มา

1

ไม่เพียงพอสำหรับฉัน ฉันยังต้องเพิ่ม: ร่างกาย {ทิศทาง: rtl; } .sidebar, .site-content, .site-footer {direction: ltr; }

— Anteru

@Anteru ฉันถือว่าคุณรู้ว่าเครือข่าย SE ทำงานอย่างไร: หากคุณมีส่วนเพิ่มเติมให้แก้ไขและอธิบายเหตุผลในข้อความแก้ไข ขอบคุณ

— ไกเซอร์

อย่างน้อยมันก็ไม่เพียงพอใน Firefox เมื่อฉันเลื่อนลงแถบด้านข้างก็จะหายไปและปรากฏขึ้นอีกครั้ง เคล็ดลับ RTL / LTR ดูเหมือนว่าจะแก้ปัญหานั้น โอ้และสำหรับบันทึก: เมื่อใส่สิ่งนี้ในธีมลูก!importantไม่จำเป็นต้องมี

— Anteru

ใช่ได้รับปัญหาเดียวกันเมื่อฉันทดสอบ

— แบรดดัลตัน

@Anteru - ขอบคุณมากรหัสเพิ่มเติมของคุณก็ช่วยฉันด้วย!

— Igor Laszlo

4

คุณสามารถเพิ่มโค้ดด้านล่างให้กับธีมลูกของคุณ

@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
แหล่งที่มา

1

ทำงานตามการทดสอบของฉัน

— แบรดดัลตัน

ใช้งานไม่ได้สำหรับฉันทันทีที่ฉันเลื่อนไปและ JavaScript ทำให้แถบด้านข้างติดค้างมันจะเลื่อนไปทางขวา อาจเป็นเพราะ JavaScript เปลี่ยนตำแหน่งเป็น "fixed" ซึ่งพร้อมด้วยขวา: 0 กฎทำให้ติดทางด้านขวา (และทำให้มันขยับถ้าหน้าต่างกว้างพอ)

— Anteru

1

โซลูชันที่ยอมรับแบ่งการตอบสนองของชุดรูปแบบเมื่อใช้จากมือถือ ฉันต้องห่อคำตอบที่ยอมรับโดย toscho และ Anteru ในรูป@media screenแบบเทมเพลตสิบสองฉบับดั้งเดิม

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

— ออกัส
แหล่งที่มา

0

ฉันเพิ่งขยายชุดรูปแบบเด็กจากเคล็ดลับและเทคนิคสำหรับชุดรูปแบบยี่สิบห้าและฉันคิดว่าฉันควรแบ่งปันวิธีที่คุณสามารถย้ายแถบด้านข้างไปทางขวากับพวกคุณ ในชุดรูปแบบขยายเด็กฉันเอาแถบด้านข้างออกจากชุดรูปแบบยี่สิบห้าอย่างสมบูรณ์เนื่องจากบางคนชอบที่จะใช้วิธีนี้ คุณสามารถดาวน์โหลดธีมลูกที่นี่และเปลี่ยนรหัสเพื่อเรียกคืนแถบด้านข้างไปทางขวา:

เปลี่ยนรหัสต่อไปนี้:

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

— Djouonang Landry
แหล่งที่มา