ডানদিকে টুয়েন্টিফফফিনটিতে সাইডবারটি কীভাবে সরানো যায়?

Question

কেবলমাত্র চাইল্ড থিম এবং সিএসএস ব্যবহার করে টোয়েন্টিফফফিনতম থিমের সাইডবারটি ডানদিকে সরানো সম্ভব, নাকি থিমের নিজেই পরিবর্তন দরকার? আমি যে মূল সমস্যাটি চালাচ্ছি তা হ'ল আমি "ডিফল্ট" বা "স্ক্রোলড" দৃশ্যে ডান দিকের সাইডবারটি পেতে পারি, তবে উভয়ই নয় (ডিফল্ট অবস্থানটি ব্যবহার করে: আপেক্ষিক এবং পৃষ্ঠাটি পেলে আপনি যা পান পৃষ্ঠা স্ক্রোল করা হলে লোড, স্ক্রোল সেট করা হয় এবং সাইডবারের অবস্থানটি পরম স্থানে পরিবর্তন করে)

Comments

থিম এর দেখুন 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

আমার পক্ষে যথেষ্ট নয়। আমাকে আরও যুক্ত করতে হয়েছিল: বডি {দিক: আরটিএল; side .সাইডবার, .সাইট-সামগ্রী,। সাইট-পাদচরণ {দিক: ltr; }

— আন্টেরু

@ আন্টেরু আমি ধরে নিয়েছি যে আপনি জানেন যে এসই নেটওয়ার্ক কীভাবে কাজ করে: আপনি যদি একটি সংযোজন পেয়ে থাকেন তবে একটি সম্পাদনা ফাইল করুন এবং একটি সম্পাদনা বার্তায় কেন তা ব্যাখ্যা করুন । ধন্যবাদ।

— কায়সার

অন্তত ফায়ারফক্সে এটি পর্যাপ্ত ছিল না, যখন আমি নীচে স্ক্রোল করতাম তখন পাশের বারটি এলোমেলোভাবে অদৃশ্য হয়ে আবার উপস্থিত হবে। আরটিএল / এলটিআর কৌশলটি এটি সমাধান করে বলে মনে হচ্ছে। ওহ এবং রেকর্ডের জন্য: এটি চাইল্ড থিমের মধ্যে রাখার সময় এগুলির !importantপ্রয়োজন হয় না।

— আন্টেরু

হ্যাঁ, আমি এটি পরীক্ষা করার সময় একই সমস্যা পান।

— ব্র্যাড ডালটন

@ আন্টেরু - অনেক ধন্যবাদ, আপনার অতিরিক্ত কোডগুলি আমাকেও সহায়তা করেছে!

— ইগোর লাসল্লো

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 নিয়ম এটা সঠিক দিকে বিদ্ধ করে তোলে: সম্ভাব্য কারণ হতে জাভাস্ক্রিপ্ট "fixed" করার স্থান, যা একসঙ্গে সাথে পরিবর্তন (এবং অত: পর এটা চলে আসে, যদি জানালা প্রশস্ত যথেষ্ট।)

— Anteru

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