स्टाइलिश [फ़ायरफ़ॉक्स और क्रोम] के साथ वेब पर छोटी-छोटी परेशानियों को कैसे ठीक करें

वेब डिजाइनरों के पास लगभग असंभव काम है। उन्हें एक डिजाइन के साथ आने की जरूरत है जो सभी को पसंद आए। जीमेल जैसी सेवा के बारे में बात करते समय, दुनिया भर में अनगिनत लाखों लोगों द्वारा उपयोग किया जाता है, आप वास्तव में 'लगभग' भाग को छोड़ सकते हैं - यह बिल्कुल असंभव है। यहां तक कि अगर एक नया स्वरूप ज्यादातर लोगों द्वारा पसंद किया जाता है, तो हमेशा ऐसे उपयोगकर्ता होंगे जो वास्तव में नए रूप को पसंद नहीं करते हैं।

कभी-कभी इनमें से पर्याप्त उपयोगकर्ता किसी कंपनी को पीछे हटने के लिए मजबूर करते हैं, जैसे Google ने हाल ही में जीमेल आइकन बटन के साथ किया था। लेकिन क्या होगा अगर आप कुछ है सचमुच नफरत है, और कंपनी इसे वापस नहीं बदलती है? क्या आप इसके साथ हमेशा के लिए फंस गए हैं? उपयोगकर्ता शैलियों के लिए धन्यवाद, आप ऐसी समस्याओं को स्वयं ठीक कर सकते हैं।

पेश है स्टाइलिश

स्टाइलिश एक मुफ्त ऐड-ऑन है जो दोनों के लिए उपलब्ध है फ़ायर्फ़ॉक्स तथा क्रोम , और यह आपको कुछ बहुत ही जादुई करने देता है - वेबपेज तत्वों पर अपनी खुद की शैलियों को लागू करें। भले ही आप एक वेब डेवलपर नहीं हैं और आपने अपने जीवन में कभी भी सीएसएस का थोड़ा सा भी नहीं लिखा है, यह जितना लगता है उससे कहीं अधिक आसान है। आप वेबसाइटों को पूरी तरह से बदलने के लिए स्टाइलिश का उपयोग कर सकते हैं (जैसा कि मैं आपको अगले भाग में दिखाऊंगा), लेकिन इससे भी महत्वपूर्ण बात यह है कि आप मिनटों में छोटी-छोटी परेशानियों को ठीक करने के लिए स्टाइलिश का उपयोग कर सकते हैं।

उदाहरण के लिए, मुझे जीमेल में डिफ़ॉल्ट फ़ॉन्ट आकार में समस्या थी। इंटरफ़ेस ठीक था - मैं अपने ब्राउज़र के साथ ज़ूम इन (Ctrl +) नहीं करना चाहता था, क्योंकि इससे सभी इंटरफ़ेस तत्वों का आकार बढ़ जाएगा और वास्तव में बदसूरत हो जाएगा। मैं बस संदेश फ़ॉन्ट को थोड़ा बड़ा करने का एक तरीका चाहता था।

स्टाइलिश के साथ, यह वास्तव में सरल था, और मैं आपको दिखाता हूँ कि कैसे। लेकिन इससे पहले कि हम आपकी खुद की उपयोगकर्ता शैली बनाने पर विचार करें, आइए अन्य लोगों के काम का लाभ उठाने के बारे में बात करें।

UserStyles.org

अगर आपकी नसों में कुछ हो रहा है, तो यह पूरी तरह से संभव है कि आप अकेले नहीं हैं। UserStyles.org एक वेबसाइट है जो उपयोगकर्ताओं को उनके द्वारा बनाई गई शैलियों को साझा करने देती है। ऊपर आप एक शैली देख सकते हैं ( टूलबार आइकन में लेबल जोड़ें ) जीमेल आइकन बटन के बारे में हमारी कहानी के जवाब में MakeUseOf कमेंटर RandyN द्वारा अनुशंसित। यह शैली आपको आइकन रखने देती है, लेकिन टेक्स्ट लेबल में जोड़ने देती है - कुछ ऐसा जो Google आपको नहीं करने देगा।

UserStyles.org बढ़िया है, लेकिन यह सही नहीं है। कुछ डिज़ाइन बहुत अधिक करने का प्रयास करते हैं (वेबसाइट का स्वरूप पूरी तरह से बदल देते हैं), और कुछ वेबसाइटों के पुराने संस्करणों के लिए हैं और अब टूट गए हैं। यदि आप कुछ छोटा करने का प्रयास कर रहे हैं और उसे UserStyles.org पर नहीं ढूंढ पा रहे हैं, तो शायद आपके लिए सबसे अच्छा तरीका यह है कि आप इसे स्वयं करें।

अपनी खुद की सरल उपयोगकर्ता शैली बनाना

अपनी खुद की उपयोगकर्ता शैली बनाने के लिए, आपको पहले यह जानना होगा कि आप पृष्ठ के किस तत्व को बदलने की कोशिश कर रहे हैं, और फिर आप कौन सा परिवर्तन करना चाहते हैं। इसलिए, आरंभ करने के लिए, जो कुछ भी आप बदलना चाहते हैं उस पर राइट-क्लिक करें, और चुनें तत्व का निरीक्षण . आपको कुछ इस तरह देखना चाहिए:

फ़ायरफ़ॉक्स शेष पृष्ठ को काला कर देता है, और आपके द्वारा चुने गए तत्व के चारों ओर एक बहुत स्पष्ट फ्रेम खींचता है। उस तत्व के ऊपर, वह पाठ जो कहता है div#2d6.ii.gt.adP.adO , एक आईडी (वह भाग जो # से शुरू होता है) के साथ CSS कक्षाओं का एक समूह है। यह चयनकर्ता है जो इस तत्व की शैली को प्रभावित करता है। स्क्रीन के नीचे एक नेविगेशन बार है जो आपको ' डोम पेड़ को पार करें ', या सरल शब्दों में, आपके द्वारा चुने गए तत्व की ओर ले जाने वाले तत्वों के पदानुक्रम में ऊपर और नीचे जाएं।

यहां खेल का नाम उस तत्व को चुनना है जिसे आप स्टाइल करना चाहते हैं, और चयन को इतना संकीर्ण नहीं बनाना है कि यह उन सभी चीज़ों को प्रभावित नहीं करेगा जिन्हें आप प्रभावित करना चाहते हैं, और न ही इतना व्यापक है कि यह अन्य चीजों को गड़बड़ कर देगा।

मैंने एक तत्व को अधिक क्लिक किया, div.gs , सिर्फ इसलिए कि मुझे इसका नाम पसंद है (ऐसा लगता है कि यह बहुत जल्द नहीं बदलेगा, लेकिन यह मेरी ओर से एक पूर्ण अनुमान है)। यह पूरे संदेश क्षेत्र को प्रभावित करता है। एक बार जिस क्षेत्र को आप स्टाइल करना चाहते हैं, उसका चयन करने के बाद, क्लिक करें अंदाज नीचे-दाएं कोने पर बटन, खोलने के लिए नियमों रोटी:

मुझे पता है, यह पहली बार में डरावना है। लेकिन यह वह जगह है जहां आप विभिन्न सीएसएस नियम देखते हैं जो आपके द्वारा चुने गए तत्व को प्रभावित करते हैं, और यह वह जगह है जहां आप अपने स्वयं के अस्थायी संशोधन कर सकते हैं और वास्तविक समय में पृष्ठ पर उनके प्रभाव को पुनः लोड किए बिना देख सकते हैं। लेकिन आपको क्या बदलना चाहिए? दबाएं गुण बटन और अनचेक करें केवल उपयोगकर्ता शैलियाँ :

यहां आप . की पूरी सूची देख सकते हैं सब सीएसएस नियम। आप सूची को तब तक नीचे स्क्रॉल कर सकते हैं जब तक आपको कोई ऐसा नियम नहीं मिल जाता है जो आपकी जरूरत के लिए समझ में आता है (हमारे मामले में फ़ॉन्ट-आकार), और यहां तक कि स्पष्टीकरण पृष्ठ खोलने के लिए इसके आगे प्रश्न चिह्न पर क्लिक करें। तो, अब हम जानते हैं कि हम उन सभी div तत्वों के लिए फ़ॉन्ट-आकार की संपत्ति को ट्विक करना चाहते हैं, जिनका वर्ग ' जी एस ' (आशुलिपि के रूप में लिखा गया है div.gs )

केवल एक ही प्रश्न रह जाता है कि हम उसका मूल्य क्या चाहते हैं। उसके लिए, हम नियम फलक पर वापस जाते हैं और खेलना शुरू करते हैं:

40 पिक्सेल थोड़े पागल हो सकते हैं, लेकिन आपको सामान्य विचार मिलता है। इसके साथ खेलें, और बेझिझक किसी भी अन्य गुण को जोड़ें, जब तक कि आपको वह रूप नहीं मिल जाता जिसके लिए आप जा रहे थे। सुनिश्चित करें कि पृष्ठ को बंद न करें, क्योंकि आपके परिवर्तन हैं नहीं कहीं भी सहेजा गया।

अपनी नई शैली सहेजा जा रहा है

एक बार जब आप साइट के इस हिस्से को अपनी इच्छानुसार दिखने के लिए प्राप्त कर लेते हैं, तो इसे सहेजने का समय आ गया है। दबाएं स्टाइलिश ऐड-ऑन बार में आइकन, और चुनें नई शैली लिखें . तब स्टाइलिश यह जानना चाहेगा कि उसे किन पृष्ठों पर नई शैली लागू करनी चाहिए - हमारे मामले में, दूसरा विकल्प चुनें, mail.google.com . इसके बाद, आपको यह डायलॉग दिखाई देगा:

मैंने इसे पहले ही भर दिया है। जाहिर है, मैंने शैली के लिए एक नाम और कुछ टैग चुने। लेकिन असली चीजें कोड के भीतर होती हैं: लाइन 3 पहले से ही थी - स्टाइलिश ने इसे जगह दी ताकि यह जान सके कि शैली किन पृष्ठों पर लागू होती है। लेकिन लाइन 5-7 मेरी है। आइए उनका विश्लेषण करें:

पंक्ति 5: डिव.जीएस { - इस भाग को आपको पहचानना चाहिए। यह वह तत्व है जिसे हमने स्टाइल करने का फैसला किया है। ओपनिंग ब्रेस का मतलब है कि अब हम कुछ CSS नियम लिखने जा रहे हैं। लाइन 6: फ़ॉन्ट-आकार: 20px!महत्वपूर्ण; - यही वह नियम है जिसे हम बदलना चाहते हैं (फ़ॉन्ट-आकार), इसके बाद इसकी नई परिभाषा (20 पिक्सेल), और फिर एक महत्वपूर्ण घोषणा द्वारा, जिसका अर्थ है कि फ़ायरफ़ॉक्स इस नियम का पालन करेगा, भले ही पाठ के करीब एक तत्व सेट करने का प्रयास करता हो फ़ॉन्ट आकार कुछ अलग करने के लिए। लाइन 7:} - शैली परिभाषा को बंद करना।

इसके बाद, पूर्वावलोकन पर क्लिक करें और अपने काम पर अचंभा करें:

और अंत में, एक बार जब आप देख लें कि यह काम कर रहा है, तो क्लिक करें सहेजें।

यह एक पूर्ण गाइड नहीं है

मैं इस बात से अच्छी तरह वाकिफ हूं कि इस संक्षिप्त ट्यूटोरियल को एक पोस्ट की सीमा के भीतर रखने के लिए, मुझे कई छलांग और छलांग लगानी पड़ी। यदि आप रास्ते में भ्रमित थे, तो कृपया मेरी क्षमायाचना स्वीकार करें। सीएसएस पहली बार में मुश्किल है, लेकिन एक बार जब आप इसे लटका लेते हैं तो यह इतना जटिल नहीं होता है - और वेबसाइटों को स्थानीय रूप से अनुकूलित करना सीखने के सर्वोत्तम तरीकों में से एक है।

यदि आप किसी भी चीज़ से भ्रमित थे, तो कृपया मुझसे नीचे पूछें और मैं आपकी मदद करने की पूरी कोशिश करूँगा।

आपको इस सर्वर पर /index.html एक्सेस करने की अनुमति नहीं है।

साझा करना साझा करना कलरव ईमेल अपने वर्चुअलबॉक्स लिनक्स मशीनों को सुपरचार्ज करने के लिए 5 टिप्स

वर्चुअल मशीनों द्वारा पेश किए गए खराब प्रदर्शन से थक गए हैं? अपने वर्चुअलबॉक्स प्रदर्शन को बढ़ावा देने के लिए आपको यहां क्या करना चाहिए।

आगे पढ़िए संबंधित विषय

ब्राउज़र्स
वेब विकास
वेबमास्टर उपकरण
मोज़िला फ़ायरफ़ॉक्स
गूगल क्रोम
वेब डिजाइन

लेखक के बारे में एरेज़ ज़ुकरमैन(288 लेख प्रकाशित) Erez Zukerman की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें