TwentyFifteen में दाईं ओर साइडबार को कैसे स्थानांतरित करें?

Question

क्या केवल बाल विषय और सीएसएस का उपयोग करते हुए साइडबार को ट्वेंटीफिफ्ट थीम में स्थानांतरित करना संभव है, या क्या इसे थीम में ही बदलाव की आवश्यकता है? मुख्य मुद्दा जो मैं चला रहा हूं वह यह है कि मैं "डिफ़ॉल्ट" या "स्क्रॉल" परिदृश्य में दाईं ओर साइडबार प्राप्त कर सकता हूं, लेकिन दोनों में नहीं (डिफ़ॉल्ट का उपयोग करता है स्थिति: रिश्तेदार और वह है जो आपको पृष्ठ पर मिलता है जब पृष्ठ स्क्रॉल किया जाता है, तो लोड किया जाता है, स्क्रॉल किया जाता है और साइडबार स्थिति को निरपेक्ष में बदल देता है।

Comments

विषय को देखो rtl.css। यह वह करता है।

— FUXIA

काफी नहीं है। यदि मैं RTL परीक्षक के साथ कोशिश करता हूं, तो साइडबार बाईं ओर रहता है । जब मैंने संबंधित अनुभाग को RTL.css से कॉपी / पेस्ट किया, तो साइडबार ने वास्तव में स्विच किया, लेकिन स्क्रॉल करते समय यह फिर से टूट जाएगा।

— ऐतरेयू

Answer 1

मैंने निम्नलिखित से लिया rtl.cssऔर उन्हें मैजिक विजेट के माध्यम से अतिरिक्त !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;
}

जब आप नीचे स्क्रॉल करते हैं तो भी यह काम करने लगता है।

Comments

मेरे लिए पर्याप्त नहीं है। मुझे भी जोड़ना था: शरीर {दिशा: आरटीएल; }। साइडबार, .साइट-कंटेंट, .साइट-फूटर {दिशा: ltr; }

— ऐंटरू

@ अटरू मैं मानता हूं कि आप जानते हैं कि एसई नेटवर्क कैसे काम करता है: यदि आपको कोई अतिरिक्त मिला है, तो एक संपादन फ़ाइल करें और एक संपादन संदेश में क्यों समझाएं । धन्यवाद।

— कासर

कम से कम फ़ायरफ़ॉक्स में यह पर्याप्त नहीं था, जब मैं नीचे स्क्रॉल करूंगा, साइड बार बेतरतीब ढंग से गायब हो जाएगा और फिर से दिखाई देगा। RTL / LTR ट्रिक लगता है कि हल करने के लिए। ओह और रिकॉर्ड के लिए: बच्चे के विषय में इसे डालते समय, इसकी !importantआवश्यकता नहीं होती है।

— ऐंटरू

हां, जब मैं इसका परीक्षण करता हूं तो वही समस्या आती है।

— ब्रैड डाल्टन

@Anteru - बहुत बहुत धन्यवाद, आपके अतिरिक्त कोड ने भी मेरी मदद की!

— इगोर लास्ज़लो

Answer 2

आप अपने बच्चे के विषय में नीचे कोड जोड़ सकते हैं।

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

Comments

मेरे परीक्षण के आधार पर काम करता है।

— ब्रैड डाल्टन

मेरे लिए काम नहीं करता, जैसे ही मैं स्क्रॉल करता हूं और जावास्क्रिप्ट साइडबार को चिपचिपा बनाता है, यह दाईं ओर ले जाता है। शायद इसलिए कि जावास्क्रिप्ट स्थिति को "निश्चित" में बदल देता है, जो कि सही के साथ मिलकर होता है: 0 नियम इसे राइट-हैंड साइड पर चिपका देता है (और इसलिए इसे आगे बढ़ाता है, अगर विंडो पर्याप्त चौड़ी है।)

— एंटेरू

Answer 3

जब मोबाइल से उपयोग किया जाता है तो स्वीकृत समाधान थीम की जवाबदेही को तोड़ देता है। मुझे @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; }
}

Answer 4

मैंने हाल ही में बीस पंद्रह थीम के लिए टिप्स और ट्रिक्स से एक चाइल्ड थीम को बढ़ाया है और मैंने सोचा कि मुझे साझा करना चाहिए कि आप साइडबार को कैसे सही तरीके से आप लोगों के साथ स्थानांतरित कर सकते हैं। विस्तारित चाइल्ड थीम में मैंने बीस पंद्रह थीम से साइडबार को पूरी तरह से हटा दिया क्योंकि कुछ लोग इसे इस तरह से उपयोग करना पसंद करते हैं। आप यहां बाल थीम डाउनलोड कर सकते हैं और साइडबार को दाईं ओर पुनर्स्थापित करने के लिए कोड बदल सकते हैं:

निम्नलिखित कोड बदलें:

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