CSS ओवरराइड का उपयोग क्यों करते हैं?
यदि आप पूर्व-निर्मित जूमला टेम्पलेट का उपयोग कर रहे हैं तो हमेशा अपने सीएसएस शैलियों को मौजूदा टेम्पलेट स्टाइल से अलग रखना एक अच्छा विचार है।
- इसे बनाए रखना आसान है
- यदि आप टेम्पलेट को अपग्रेड करते हैं तो आपके परिवर्तन नहीं होंगे
- आप किसी अन्य टेम्पलेट या किसी अन्य साइट पर संशोधनों को आसानी से कॉपी / स्थानांतरित कर सकते हैं।
CSS कैसे काम करता है?
CSS का अर्थ है "कैस्केडिंग स्टाइल शीट्स", "कैस्केडिंग" इस संदर्भ में अर्थ है कि क्योंकि एक से अधिक स्टाइलशीट नियम HTML के एक विशेष टुकड़े पर लागू हो सकते हैं, उपयोग किए जाने वाले नियम को सामान्य नियमों से अधिक विशिष्ट नियम के लिए नीचे कैस्केडिंग द्वारा चुना जाता है ( सबसे विशिष्ट नियम चुना जाता है), या किसी तत्व के लिए नियमों के आदेश के आधार पर (अंतिम नियम चुना जाता है)।
जब तक आपकी अनुकूलित CSS फ़ाइल डिफ़ॉल्ट टेम्पलेट CSS फाइलों के बाद लोड की जाती है , आप अपनी खुद की शैलियों को आवश्यकतानुसार विशिष्ट तत्वों को ओवरराइड करने के लिए जोड़ सकते हैं (नीचे कुछ अपवाद हैं, उस पर और अधिक)।
सामान्य उपयोग
जूमला <head>टैग में एक कस्टम स्टाइल शीट लोड करने के लिए, निम्न कोड index.phpको आपके टेम्प्लेट की फ़ाइल में जोड़ा जा सकता है ( YOURDOMAIN.COM/templates/yourtemplate/index.php), अंतिम </head>टैग से पहले यह सुनिश्चित करने के लिए कि आपकी फ़ाइल अंतिम लोड है।
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(CSS फ़ाइल का कोई भी नाम हो सकता है, और इसमें / css / सबफ़ोल्डर होना आवश्यक नहीं है, लेकिन यह इस तरह से क्लीनर है।)
सामान्य <link>टैग जोड़ना संभव है , लेकिन यह उपर्युक्त विकल्प की तुलना में कम लचीला है:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!जरूरी
कुछ एक्सटेंशन आपकी CSS शैलियों को आपके बाद लोड कर सकते हैं (या सीधे index.php फ़ाइल में शैलियों को भी जोड़ सकते हैं), इस प्रकार आपके ओवरराइड को ओवरराइड कर सकते हैं। यह आमतौर पर !importantअपनी शैलियों में जोड़कर हल किया जा सकता है , जैसे।h1{color:red!important;}
विभिन्न चौखटे में उपयोग
अब मज़ेदार हिस्सा: कई टेम्प्लेट फ्रेमवर्क में यह संभावना है कि उपयोगकर्ता अपने टेम्प्लेट में बदलाव करना चाहते हैं, इस प्रकार अपने सीएसएस ओवरराइड को शामिल करने का एक आसान तरीका जोड़ सकते हैं। यहां कुछ तरीकों का इस्तेमाल किया गया है:
रॉकेटथीम गैन्ट्री 4
RocketTheme टेम्प्लेट गैन्ट्री फ्रेमवर्क द्वारा संचालित होते हैं, और एक अनुकूलित सीएसएस फ़ाइल स्वचालित रूप से लोड हो जाएगी यदि पाया गया है। CSS फ़ाइल को /templates/yourtemplate/css/फ़ोल्डर में रखा जाना चाहिए , और नाम होना चाहिए YOURTEMPLATEFOLDER-custom.css।
उदाहरण: यदि आप उनके मुफ्त Afterburner 2टेम्पलेट का उपयोग कर रहे हैं , तो डिफ़ॉल्ट टेम्पलेट निर्देशिका है /templates/rt_afterburner2/। rt_afterburner-custom.css/ Css / सबफ़ोल्डर में (अंडरस्कोर और हाइफ़न के साथ कैरफ़ुल) नामक एक फ़ाइल जोड़ें , और इसे गैन्ट्री फ्रेमवर्क द्वारा स्वचालित रूप से लोड किया जाएगा।
आकृति 5
custom.cssअपने टेम्पलेट के / css / उपनिर्देशिका में एक खाली फ़ाइल के साथ 5 टेम्पलेट जहाज आकार दें । बस अपनी शैलियों को इस फ़ाइल में जोड़ें और वे आपके लेआउट में शामिल हो जाएंगे।
गेविक प्रो
Gavick प्रो टेम्पलेट overrides.css/ css / subdirectory में एक खाली फ़ाइल के साथ जहाज । लेकिन ध्यान दें कि यह फ़ाइल डिफ़ॉल्ट रूप से लोड नहीं है, आपको Override CSSटेम्पलेट सेटिंग्स में उन्नत सेटिंग्स टैब में सक्रिय करना होगा।
जूमला शाइन
अपने टेम्पलेट जैसे / css / सबफ़ोल्डर में एक कस्टम CSS फ़ाइल बनाएँ custom.cssऔर फ़ाइल का नाम यहाँ निर्दिष्ट करें Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s)।
T3 फ्रेमवर्क
T3 फ्रेमवर्क पर आधारित custom.cssटेम्प्लेट आपके टेम्प्लेट के / css / सबफ़ोल्डर में एक फ़ाइल शामिल कर सकते हैं / नहीं कर सकते हैं (बस इसे बनाएं अगर यह वहां नहीं है), लेकिन जब मौजूद होता है, तो फ़ाइल किसी अन्य CSS फ़ाइल के बाद लोड की जाएगी।
ताना ढांचा
ताना फ्रेमवर्क पर आधारित टेम्प्लेट custom.css/ css / सबफ़ोल्डर में पाई गई फ़ाइल को स्वचालित रूप से लोड करता है । अतिरिक्त CSS फाइलों को जोड़कर लोड किया जा सकता है
$this->warp->stylesheets->add('css:yourcssfile.css');
फ़ाइल के लिए /layouts/template.config.php।