ट्यूटोरियल: अपनी साइट पर कस्टम CSS जोड़ें
स्टाइलिंग कार्यस्थान आपको अपनी साइट की कुछ थीम विशेषताओं संपादित करने की अनुमति देता है, जैसे फ़ॉन्ट और रंग; हालाँकि, आप अपनी स्वयं की कस्टम CSS थीम लागू कर सकते हैं.
आप एक कस्टम CSS फ़ाइल को परिभाषित करके और उसे अपनी साइट पर अपलोड करके अपनी थीम बना सकते हैं.
इस ट्यूटोरियल में, आप निम्न कार्य करना सीखेंगे:
- कस्टम CSS फ़ाइल अपलोड करें
- वेब के लिए Visual Studio Code में CSS संपादित करें
पूर्वावश्यकताएँ
- Power Pages सदस्यता या ट्रायल. यहाँ Power Pages ट्रायल पाएँ.
- एक Power Pages साइट बनाई गई. एक Power Pages साइट बनाएँ.
- आपके पसंदीदा CSS संपादक का उपयोग करके बनाई गई एक कस्टम थीम फ़ाइल.
नोट
आपके द्वारा बनाई गई कोई भी कस्टम थीम Bootstrap v3 के साथ संगत होनी चाहिए.
अपनी साइट पर कस्टम CSS जोड़ें
निम्नलिखित वीडियो आपको दिखाता है कि अपनी साइट पर कस्टम CSS कोड कैसे लागू करें.
इस उदाहरण में, हम कुछ कस्टम CSS फ़ाइलें जोड़ेंगे जो हमें अपनी वेबसाइट की बटनों पर छाया प्रभाव जोड़ने की अनुमति देंगी. आप अपनी स्वयं की कस्टम CSS फ़ाइल का उपयोग कर सकते हैं या दिए गए नमूने का उपयोग कर सकते हैं.
एक नमूना बनाने के लिए, अपने पसंदीदा CSS संपादक में, button_shadow.css कस्टम थीम फ़ाइल बनाएँ और सहेजें.
.button1 { box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333; }Power Pages पर जाएँ.
उस साइट का चयन करें जिसमें आप कस्टम थीम जोड़ना चाहते हैं और संपादित करें चुनें.
स्टाइलिंग कार्यस्थान खोलें.
एक थीम चुनें और ... (दीर्घवृत्त) चुनें, और फिर CSS प्रबंधित करें चुनें.
कस्टम CSS सेक्शन में, अपलोड चुनें और अपनी कस्टम CSS फ़ाइल चुनें. आप एक समय में केवल एक CSS फ़ाइल अपलोड कर सकते हैं, लेकिन एकाधिक फ़ाइलें अपलोड की जा सकती हैं. यदि एकाधिक CSS फ़ाइलें एक ही विशेषता को अद्यतन करती हैं, तो सूची के नीचे CSS फ़ाइल में विशेषताएँ लागू होंगी. आप अपनी कस्टम CSS फ़ाइलों का क्रम समायोजित कर सकते हैं.
आपको तुरंत पेज कैनवास पर अपडेट के परिणाम देखने चाहिए.
आप अपनी कस्टम CSS फ़ाइलों का क्रम अक्षम या स्थानांतरित कर सकते हैं. अंतिम सूचीबद्ध फ़ाइल को अन्य पर प्राथमिकता दी जाएगी.
आप दीर्घवृत्त (...) का चयन करके और फिर कोड संपादित करें का चयन करके किसी CSS फ़ाइल को सीधे संपादित कर सकते हैं. यह चरण वेब के लिए विज़ुअल कोड संपादक खोलेगा. अपने परिवर्तनों को सहेजने के लिए, CTRL-S का चयन करें.
CSS को अपडेट करने और बदलाव देखने के लिए डिज़ाइन स्टूडियो में सिंक चुनें.
अपनी साइट पर कस्टम थीम देखने के लिए पूर्वावलोकन चुनें.
नोट
कस्टम थीम को पूरी तरह से हटाने के लिए पोर्टल प्रबंधन ऐप में वेब फ़ाइल रिकॉर्ड हटाएँ.