बेहतर पठनीयता के लिए फ़ायरफ़ॉक्स रीडर व्यू को कैसे कस्टमाइज़ करें
रीडर व्यू फ़ायरफ़ॉक्स ब्राउज़र की एक लोकप्रिय विशेषता है उपस्थिति बदल जाती है एक वेब पेज की, और इसे और अधिक पठनीय बनाता है द्वारा दृश्य अव्यवस्था को हटाने जैसे कि चित्र, विज्ञापन, हेडर और साइडबार। हालाँकि, सभी होम पेज के लिए रीडर व्यू उपलब्ध नहीं है.
यदि यह सुविधा एक निश्चित पृष्ठ के लिए उपलब्ध है, तो आप इसे एक के आकार में सक्षम करने के लिए आइकन पाएंगे छोटी पुस्तक आइकन पता बार के दाईं ओर प्रदर्शित होता है.
कुछ बिल्ट-इन विकल्प हैं जो पाठकों को लुक को कस्टमाइज़ करने की अनुमति देते हैं पाठक देखें. हम आपको पाठक दृश्य के स्वरूप को और अधिक निजीकृत करने के लिए क्या कर सकते हैं, यह दिखाने से पहले हम उन विकल्पों को देखेंगे। डेमो उद्देश्यों के लिए, मैं नेशनल जियोग्राफिक के एक लेख का उपयोग करूंगा.
पूर्व निर्मित विकल्प
फ़ायरफ़ॉक्स रीडर व्यू कुछ पूर्व-निर्मित अनुकूलन विकल्पों जैसे अंधेरे, प्रकाश और सीपिया के साथ आता है पृष्ठभूमि, समायोज्य फ़ॉन्ट आकार, और सेरिफ़ और संस-सेरिफ़ टाइपफेस. आप द्वारा थीम को कस्टमाइज़ कर सकते हैं CSS नियमों को ओवरराइड करना इन पहले से मौजूद विकल्पों में.
मैं सीरीफ फोंट के साथ एक अंधेरे त्वचा का उपयोग करता हूं, और इसका मतलब है कि मुझे अपने मामले में संबंधित सीएसएस कक्षाओं को ओवरराइड करने की आवश्यकता होगी .अंधेरा तथा .सेरिफ़.
यदि आप किसी अन्य विषय संस्करण (त्वचा + फ़ॉन्ट) को अनुकूलित करना चाहते हैं, तो आपको इसकी आवश्यकता होगी उपयुक्त सीएसएस चयनकर्ताओं का उपयोग करें. आप F12 मारकर फ़ायरफ़ॉक्स डेवलपर टूल्स की मदद से इन्हें चेक कर सकते हैं.
कस्टम सीएसएस फ़ाइल बनाएँ
आपको एक फ़ाइल बनाने की आवश्यकता है जिसे कहा जाता है userContent.css के अंदर क्रोम का फ़ोल्डर आपका फ़ायरफ़ॉक्स प्रोफ़ाइल फ़ोल्डर अपने रीडर व्यू कस्टमाइज़ेशन के लिए। अपना फ़ायरफ़ॉक्स प्रोफ़ाइल फ़ोल्डर खोजने के लिए, टाइप करें के बारे में: समर्थन URL बार में और एंटर दबाएं.
आप अपने आप को एक पृष्ठ पर पाएंगे जिसमें शामिल हैं आपके फ़ायरफ़ॉक्स इंस्टॉल से संबंधित तकनीकी डेटा. शो फोल्डर बटन पर क्लिक करें, और यह आपके प्रोफाइल फोल्डर को खोल देगा.
नामक एक फ़ोल्डर बनाएँ क्रोम अपने प्रोफ़ाइल फ़ोल्डर के अंदर (यदि आपके पास अभी तक नहीं है), और एक फ़ाइल कहा जाता है userContent.css के अंदर क्रोम फ़ोल्डर। फ़ाइल पथ इस तरह दिखता है:
… \ _ प्रोफाइल\ क्रोम \ userContent.css
कस्टम CSS नियम जोड़ें
एक बार जब आप बनाया और खोला है userContent.css एक कोड संपादक में, यह आपके सीएसएस नियमों को जोड़ने का समय है। रीडर व्यू के डिज़ाइन को कस्टमाइज़ करने के लिए, आपको इसकी आवश्यकता है निशाना लगाओ उपयुक्त चयनकर्ताओं के साथ टैग करें.
आप विभिन्न डिफ़ॉल्ट विकल्पों के लिए निम्न चयनकर्ताओं का उपयोग कर सकते हैं:
/ * जब डार्क बैकग्राउंड का चयन किया जाता है * /: रूट [hasbrowserhandlers = "true"] body.dark / * जब लाइट बैकग्राउंड का चयन किया जाता है * /: रूट [hasbrowserhandlers = "true"] body.light / * जब सेपिया पृष्ठभूमि का चयन किया गया है * /: रूट [hasbrowserhandlers = "true"] body.sepia / * जब सेरिफ़ फ़ॉन्ट का चयन किया जाता है * /: रूट [hasbrowserhandlers = "true"] body.serif और * जब sans-serif फ़ॉन्ट है चयनित * /: रूट [hasbrowserhandlers = "true"] body.sans-serif
सेटिंग्स के विशिष्ट संयोजन को लक्षित करने के लिए, आप कक्षाओं को भी जोड़ सकते हैं.
/ * जब डार्क बैकग्राउंड और सेरिफ़ फॉन्ट का चयन किया जाता है * /: रूट [hasbrowserhandlers = "true"] body.dark.serif / * जब सेपिया बैकग्राउंड और सेन्स-सेरिफ़ फ़ॉन्ट का चयन किया जाता है * /: रूट [.browserhandlers = "true" ] body.sans-serif.sepia
प्रयोग नहीं करें आम चयनकर्ता : रूट [hasbrowserhandlers = "true"] बॉडी एक बार में सभी सेटिंग्स को लक्षित करने के लिए। यह काम करेगा, लेकिन यह होगा अन्य ब्राउज़र पृष्ठों को भी प्रभावित करते हैं, जैसे कि के बारे में: newtab, जैसा कि उनके मूल तत्व भी हैं hasbrowserhandlers विशेषता (जिसका उपयोग आंतरिक फ़ायरफ़ॉक्स पृष्ठों के ईवेंट हैंडलर को चिह्नित करने के लिए किया जाता है, जैसे कि के बारे में: पृष्ठों).
यहाँ कोड मेरे द्वारा जोड़ा गया है userContent.css. मैंने फ़ॉन्ट परिवार, फ़ॉन्ट शैली, रंग बदल दिए और टेक्स्ट कंटेनर को चौड़ा कर दिया। आप अपने स्वाद के अनुसार किसी अन्य शैली के नियमों का उपयोग कर सकते हैं.
/ ** userContent.css ******************************************** जड़: [[hasbrowserhandlers = "true"] body.dark.serif:: root [hasbrowserhandlers = "true"] body.dark.serif # रीडर-डोमेन font-family: "कूरियर नया" महत्वपूर्ण! : रूट [hasbrowserhandlers = "true"] body.dark.serif पृष्ठभूमि-रंग: # 13131F - महत्वपूर्ण! रंग: # BAE3DB महत्वपूर्ण है; : root [hasbrowserhandlers = "true"] body.dark.serif # रीडर-डोमेन font-style: italic-important; : root [hasbrowserhandlers = "true"] body.dark.serif h1,: root [hasbrowserhandlers = "true"] body.dark.serif h2:: root [hasbrowserhandlers = = true "] body.dark.serif h3:: root [hasbrowserhandlers = "true"] body.dark.serif h4,: root [hasbrowserhandlers = "true"] body.dark.serif h5 color: # 06FEB0! महत्वपूर्ण! : root [hasbrowserhandlers = "true"] body.dark.serif a: लिंक color: #EEE7FF- महत्वपूर्ण! : रूट [hasbrowserhandlers = "true"] body.dark.serif #container अधिकतम-चौड़ाई: 50em! महत्वपूर्ण!
ध्यान दें कि इसका उपयोग करना आवश्यक है !जरूरी में कीवर्ड userContent.css सभी सीएसएस नियमों के लिए. ब्राउज़र उपयोगकर्ता द्वारा निर्दिष्ट संपत्ति मूल्यों को जोड़ता है लेखक द्वारा निर्दिष्ट मूल्यों से पहले (दिए गए वेब पेज के डेवलपर, यहाँ रीडर देखें)। इसलिए, किसी भी उपयोगकर्ता द्वारा निर्दिष्ट संपत्ति मूल्य !जरूरी यदि कोई लेखक द्वारा निर्दिष्ट स्टाइलशीट भी उसी संपत्ति को लक्षित करती है, तो यह काम नहीं करेगा, क्योंकि यह ओवरराइड हो जाएगा.
अंतिम परिणाम
आप नीचे मेरे रीडर व्यू थीम के बदलाव देख सकते हैं। अपने स्वयं के व्यक्तिगत फ़ायरफ़ॉक्स रीडर दृश्य के डिजाइन को अनुकूलित करने के लिए अपने स्वयं के सीएसएस नियमों का उपयोग करें.
से पहले
बाद
यदि आप फ़ायरफ़ॉक्स टूल्स के थीम कस्टमाइज़ेशन में गहराई से गोता लगाना चाहते हैं, तो फ़ायरफ़ॉक्स डेवलपर टूल्स थीम के अनुकूलन पर मेरे पिछले ट्यूटोरियल को देखें.
