वर्षों से, हाल ही में पहले से कहीं अधिक बार, मुझे अपने मशीनों पर Firefox के दिखने और व्यवहार करने के तरीके में बदलाव करने के लिए मजबूर किया गया था। पहले समझदार डिफॉल्ट्स को लगभग मनमाने ढंग से बदल दिया गया था, जिससे मेरे वर्कफ़्लो में कार्यात्मक और सौंदर्य संबंधी अक्षमताएं आईं। Australis और Proton उक्त घटना के अच्छे उदाहरण हैं।
हाल ही में, मैंने दो काफी विस्तृत गाइड प्रकाशित किए जिनमें बताया गया था कि Firefox 91 onwards में ग्रे-ऑन-ग्रे लुक को कैसे पूर्ववत किया जाए। दोनों मामलों में, मैंने Firefox UI के अपने पूर्व ज्ञान पर भरोसा किया। मुझे एहसास हुआ कि कई लोगों के लिए, निर्देश बहुत गूढ़ हो सकते हैं। इसलिए मैंने Firefox UI को अनुकूलित करने के तरीके पर एक सामान्य गाइड बनाने का फैसला किया, ताकि यदि आप वही अभ्यास करना चाहते हैं, तो इसका पालन करना बहुत कठिन नहीं होगा।
बुनियादी बातें
Firefox UI - एक तरह से - एक वेब पेज की तरह है। इसे CSS नामक वेब-आधारित भाषा में सन्निहित स्टाइलिस्टिक नियमों की एक श्रृंखला द्वारा परिभाषित किया गया है। यह किसी भी साइट की तरह है। मान लें, dedoimedo.com, आप जो देखते और पढ़ते हैं वह टेक्स्ट है, लेकिन परिभाषाएं कि पेज कितना चौड़ा होगा, फॉन्ट का रंग, पैराग्राफ का स्पेसिंग, और इसी तरह, सभी CSS फाइलों का उपयोग करके सेट किए गए हैं। इसी तरह, Firefox को उसी तरह स्टाइल किया गया है।
आप अपना खुद का बनाकर डिफ़ॉल्ट नियमों को ओवरराइड कर सकते हैं। यह आपके Firefox प्रोफ़ाइल में एक नई फाइल जोड़कर किया जाता है। फाइल के अंदर, आप नए नियम बनाते (जोड़ते) हैं जो Firefox UI में मौजूदा विजुअल एलिमेंट्स को प्रभावित करेंगे। यह ऐसे किया जाता है:
- Firefox खोलें, एड्रेस बार में about:support टाइप करें।
- खुलने वाले पेज पर, प्रदर्शित तालिका में "Profile Folder" लाइन का पता लगाएं। Open Folder बटन पर क्लिक करें। यह आपका फाइल एक्सप्लोरर लॉन्च करेगा (जो भी ऑपरेटिंग सिस्टम आप उपयोग कर रहे हैं), और आपके Firefox प्रोफ़ाइल के स्थान पर इंगित करेगा। कृपया ध्यान दें, Firefox प्रोफ़ाइल प्रत्येक उपयोगकर्ता के लिए अद्वितीय हैं, इसलिए आपको प्रत्येक उपयोगकर्ता के लिए अलग से परिवर्तन करने की आवश्यकता है।
- अब जब आप अपने Firefox प्रोफ़ाइल का स्थान जानते हैं, तो एक बैकअप बनाएं! आप पूरे फ़ोल्डर और उसकी सभी सामग्री की एक साधारण मैन्युअल कॉपी भी कर सकते हैं। इस तरह, अगर कुछ गलत होता है, तो आप चीजों को अपनी प्राचीन, वेनिला बेसलाइन पर बहाल कर सकते हैं। किसी भी बड़े बदलाव से पहले ऐसा करें।
- Firefox प्रोफ़ाइल फ़ोल्डर में, chrome नामक एक फ़ोल्डर बनाएं (यदि यह मौजूद नहीं है) (लोअरकेस)।
- इस फ़ोल्डर में नेविगेट करें, और यहां userChrome.css नामक एक फ़ाइल बनाएं (लोअर/अपरकेस पर ध्यान दें)।
- इस फ़ाइल को एक टेक्स्ट एडिटर में खोलें।
डिफ़ॉल्ट रूप से, फ़ाइल खाली होगी और इसमें कुछ भी नहीं होगा। हम अब इसे CSS निर्देशों से भरेंगे, जो Firefox के विभिन्न एलिमेंट्स के लुक (और व्यवहार) को ओवरराइड करेंगे। मैंने इसे कई बार पहले किया है, इसलिए आप वर्कफ़्लो के लिए बेसलाइन के रूप में इनमें से कुछ गाइड्स को संदर्भित कर सकते हैं। उदाहरण के लिए:
- Plasma HD स्केलिंग और Firefox
- Firefox पिन्ड टैब्स
- Firefox और एड्रेस बार व्यवहार
अतिरिक्त आधार कार्य
परिवर्तनों को प्रभावी बनाने के लिए, हमें कई और चीजों की आवश्यकता है:
- एड्रेस बार में about:config टाइप करें। आगे बढ़ने के लिए किसी भी चेतावनी को स्वीकार करें।
- about:config पेज पर सर्च बॉक्स में, legacy खोजें। निम्न प्राथमिकता दिखाई देनी चाहिए:
toolkit.legacyUserProfileCustomizations.stylesheets
इस पर डबल-क्लिक करके इसकी स्थिति को false से true पर टॉगल करें। यह Firefox को आपके कस्टम संशोधनों का उपयोग करने और उन्हें ब्राउज़र पर लागू करने की अनुमति देगा। इस प्राथमिकता को टॉगल किए बिना, कोई UI परिवर्तन नहीं होगा।
- userChrome.css फ़ाइल में, जो वर्तमान में खाली है, शीर्ष पर निम्न टेक्स्ट जोड़ें:
@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
यह आपको किसी भी लीगेसी एलिमेंट्स और घोषणाओं का उपयोग करने की अनुमति देगा।
- अंत में, आपको CSS की कुछ बुनियादी समझ और यह कैसे काम करता है, इसकी आवश्यकता है। इसके बिना, आप यहां बताई गई अवधारणाओं को समझने के लिए संघर्ष करेंगे। क्लासेस, आइडेंटिफायर्स, CSS पदानुक्रम और नियमों की प्राथमिकता की पूरी अवधारणा जैसी चीजें, और इसी तरह। मुझे डर है कि कोई जादुई शॉर्टकट नहीं हो सकते।
Firefox UI लेआउट
अब हमारे पास चीजों को काम करने के लिए मुख्य सामग्री है। अगला, हमें UI से परिचित होने की आवश्यकता है। मेरे ट्यूटोरियल्स (ऊपर लिंक किए गए) में, मैंने .tab-background, #searchbar, #navigator-toolbox, और अधिक जैसी चीजों का उपयोग किया। आप सही आश्चर्य कर सकते हैं, मुझे कैसे पता कि ये क्या हैं, और मुझे वह जानकारी कहां मिलती है?
उत्तर इतना सरल नहीं है, मुझे डर है...
एक, आपको रेफरेंस गाइड्स की आवश्यकता है। दो, आप Firefox के बिल्ट-इन ब्राउज़र टूलबॉक्स का उपयोग कर सकते हैं, जो आपको एलिमेंट्स चुनने और उनकी पहचान करने देता है। यह कुछ कठिन काम है, मन। सबसे पहले, ब्राउज़र के मेनू > More Tools > Web Developer Tools पर क्लिक करें। फिर, जब यह मेनू खुलता है, तो दाईं ओर तीन-डॉट एलिमेंट पर क्लिक करें (एक और मेनू) > Settings। या F1 दबाएं। यहां, आपको दाएं कॉलम में अंतिम दो विकल्पों का चयन करना होगा: Enable browser chrome ... और Enable remote debugging। बहुत सहज नहीं। और एक ही UI में दो अलग-अलग चीजों के लिए हैमबर्गर और तीन-डॉट मेनू के उपयोग के बारे में शिकायत न करें।
एक अन्य विकल्प बस मुझसे एक त्वरित, गंदा क्रैश कोर्स है, केवल सबसे महत्वपूर्ण UI एलिमेंट्स पर ध्यान केंद्रित करते हुए। यही कारण है कि मैंने यह एनोटेटेड स्क्रीनशॉट बनाया, जो मेरे Proton गाइड्स में बदले गए एलिमेंट्स को इंगित करता है।
यहां (शानदार) सात महत्वपूर्ण एलिमेंट्स हैं:
#navigator-toolbox- यह पेज नेविगेशन + टैब बार वाले फ्रेम को समाहित करता है।#nav-bar- यह navigator-toolbox का केवल निचला आधा भाग है (नीचे का सेक्शन)।.tabbrowser-tab[selected="true"]- यह सक्रिय टैब एलिमेंट है। स्थिति (selected, true) पर ध्यान दें।.tabbrowser-tab:not([selected="true"])- यह एक निष्क्रिय टैब है।.tabbrowser-tab[usercontextid]- यह एक कंटेनर टैब है (यदि आप कंटेनर्स एड-ऑन का उपयोग करते हैं)। कृपया ध्यान दें कि आइटम 3-5 के लिए, आपको निम्न एलिमेंट के बारे में भी पता होना चाहिए - एक क्लास जिसे.tab-backgroundकहा जाता है, जो टैब(एस) के बैकग्राउंड क्षेत्र को निर्दिष्ट करता है। हम इसे शीघ्र ही ऊपर tab-browser-tab* घोषणाओं के साथ संयोजन में उपयोग करेंगे।#urlbar- यह एड्रेस बार है। ध्यान दें कि#urlbar-backgroundभी है, एक आइडेंटिफायर जो हमारे द्वारा पहले पेश किए गए टैब बैकग्राउंड एलिमेंट के समान है, और जो एक समान उद्देश्य को पूरा करता है। एक बार फिर, हम बहुत जल्द आवश्यक उदाहरण देखेंगे।#searchbar- यह सर्च बॉक्स है, यदि आप इसका उपयोग करते हैं।
चीजें उससे थोड़ी अधिक जटिल हैं, निश्चित रूप से, लेकिन अब, आप यह समझना शुरू कर सकते हैं कि हम इसके साथ कहां जा रहे हैं। मुझे लगता है कि सबसे अच्छा समाधान केवल कुछ उदाहरणों के साथ प्रदर्शित करना है, ताकि आप समझ सकें कि क्या देता है।
कुछ बुनियादी उदाहरण
नीचे दिया गया कोड, जब userChrome.css में जोड़ा जाता है, तो निम्नलिखित करेगा:
- सक्रिय टैब के लिए, यह टैब के बड़े वर्ग बैकग्राउंड टुकड़े के लिए बॉर्डर सेट करेगा।
- टॉप बॉर्डर 3px मोटा होगा, जबकि बाएं और दाएं केवल 1px मोटे होंगे।
- उनके अलग-अलग रंग भी हैं।
- साइड बॉर्डर में 30% पारदर्शिता है।
.tabbrowser-tab[selected="true"] .tab-background {
border-left: 1px solid rgba(0, 0, 0, 0.3) !important;
border-right: 1px solid rgba(0, 0, 0, 0.3) !important;
border-top: 3px solid #0a84ff !important;
}
नीचे दिया गया कोड, जब userChrome.css में जोड़ा जाता है, तो निम्नलिखित करेगा:
- निष्क्रिय टैब्स के लिए, यह टैब बैकग्राउंड (टैब का बड़ा वर्ग कैनवास) को निम्न तरीके से कॉन्फ़िगर करेगा: वर्तमान रंग (सिस्टम एक्सेंट रंग) और पारदर्शिता लेयर के मिश्रण का उपयोग करके वास्तविक बैकग्राउंड रंग सेट करें, sRGB रंग स्थान का उपयोग करके, और सिस्टम एक्सेंट रंग को केवल 5% अपारदर्शिता पर सेट करें। मूल रूप से, टैब्स काफी हद तक पारदर्शी होंगे और आपके ब्राउज़र के मूल रंग से मेल खाएंगे।
- 30% अपारदर्शिता के साथ बहुत पतला 1px (काला) बॉर्डर बनाएं। !important क्लॉज का अर्थ है कि आपका नियम उसी एलिमेंट पर लागू किसी अन्य नियम पर प्राथमिकता लेगा।
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
background-color: color-mix(in srgb, currentColor 5%, transparent);
border: 1px solid rgba(0, 0, 0, 0.3) !important;
}
नीचे दिया गया कोड, जब userChrome.css में जोड़ा जाता है, तो निम्नलिखित करेगा:
- यह बाईं ओर 2px मार्जिन जोड़कर टैब्स को थोड़ा अंदर की ओर इंडेंट (धकेल) करेगा। दूसरे शब्दों में, यह टैब्स और ब्राउज़र के विंडो एज के बीच थोड़ी अतिरिक्त दूरी बनाएगा।
#navigator-toolbox {
margin-left: 2px !important;
}
फिर, और भी बहुत कुछ है...
नीचे दिया गया कोड, जब userChrome.css में जोड़ा जाता है, तो निम्नलिखित करेगा:
- यह urlbar के बैकग्राउंड को शुद्ध सफेद पर सेट करेगा, एक पतले 30%-अपारदर्शी बॉर्डर के साथ जो सक्रिय टैब के एक्सेंट रंग से मेल खाता है (पहले निर्दिष्ट)। आपके पास यहां पूरी कलात्मक स्वतंत्रता है।
#urlbar-background {
background-color: white !important;
border: 1px solid rgba(10, 132, 255, 0.3) !important;
}
बेशक, इससे कहीं अधिक है! लेकिन ये उदाहरण आपको शुरू करने के लिए पर्याप्त होने चाहिए, मेरा मानना है।
निष्कर्ष
यह काफी जटिल था, मैं मानता हूं। काश Firefox UI को संपादित करने का एक सरल तरीका होता, लेकिन दुर्भाग्य से, यदि आप Firefox के डिफ़ॉल्ट लुक से खुश नहीं हैं, और आप इसे बेसिक अनुकूलन से आगे बदलना चाहते हैं, तो आपको CSS ज्ञान, CSS फाइल्स, और नियमों का एक गुच्छा चाहिए होगा। यह गाइड बताता है कि आप इसे कैसे प्राप्त कर सकते हैं, ब्राउज़र के इंटरफेस के हर विशिष्ट विवरण में जाए बिना।
मैं पूरी तरह से अवगत हूं कि यह एक तुच्छ कार्य नहीं है। CSS उन लोगों के लिए "आसान" लगता है जो जानते हैं कि इसका उपयोग कैसे करना है, लेकिन यह सामान्य लोगों के साथ भी घृणा पैदा करता है जो सरल एर्गोनोमिक समाधान चाहते हैं। मेरा मानना है कि सही तरीका वास्तव में थोड़ा समय निवेश करना और इस भाषा में महारत हासिल करना है, क्योंकि यह आपको UI में आवश्यक समायोजन करने की स्वतंत्रता देता है, बिना वहां कहीं मनमाने फैसलों पर भरोसा किए। मैं चाहता हूं कि Mozilla बेहतर विकल्प चुन रहा था, लेकिन अरे, इस सारी बकवास के बावजूद Firefox में ढेर हो गई, यह अभी भी सबसे अच्छा ब्राउज़र है, यह आपको इंटरफेस बदलने की अनुमति देता है, और यह वह एक ब्राउज़र है जिसका उपयोग आपको अपने डेस्कटॉप और मोबाइल पर करना चाहिए। यह एकमात्र चीज है जो इंटरनेट को अभी भी मुश्किल से उपयोग योग्य बनाती है, और आप Firefox के बिना भविष्य को पसंद नहीं करेंगे। तो CSS लें, झुंझलाहट से छुटकारा पाएं, और Firefox का उपयोग जारी रखें। हम यहां समाप्त करते हैं।
चीयर्स।
