अपनी थीम को पसंद के मुताबिक बनाएं (ओरिजनल वर्शन)

Apigee Edge दस्तावेज़ देखा जा रहा है.
Apigee X दस्तावेज़ पर जाएं.
जानकारी

थीम में ग्लोबल कैस्केडिंग स्टाइल शीट (सीएसएस) होती है. यह आपके पोर्टल में मौजूद सभी पेजों को एक जैसा लुक और स्टाइल देती है. थीम का मकसद, आपको अपने सभी पोर्टल के पेजों का लुक और स्टाइल एक ही बार में बदलना होता है.

सैंपल पोर्टल के साथ दी गई ज़्यादातर डिफ़ॉल्ट स्टाइल, बूटस्ट्रैप पर आधारित होती हैं. यहां बताए गए सेक्शन में बताए गए तरीके से, थीम को पसंद के मुताबिक बनाया जा सकता है, उसकी झलक देखी जा सकती है, और उसे पब्लिश किया जा सकता है.

पोर्टल थीम को पसंद के मुताबिक बनाने का तरीका जानने के लिए, नीचे दिया गया वीडियो देखें.

थीम एडिटर ऐक्सेस करना

थीम एडिटर में, अपने पोर्टल के लिए थीम पसंद के मुताबिक बनाएं, उसकी झलक देखें, और उसे पब्लिश करें. थीम एडिटर खोलने के लिए, सबसे ऊपर मौजूद नेविगेशन बार पर मौजूद ड्रॉप-डाउन मेन्यू में, थीम चुनें.

थीम एडिटर

जैसा कि पिछले लेख में बताया गया है, थीम एडिटर की मदद से ये काम किए जा सकते हैं:

कस्टम स्टाइल जोड़ें

स्टाइल एडिटर पैनल में, अपना सीएसएस कोड जोड़कर, थीम को पसंद के मुताबिक बनाएं. सीएसएस की स्टाइल के सभी एलिमेंट इस्तेमाल किए जा सकते हैं.

अपनी थीम को पसंद के मुताबिक बनाने के लिए:

  1. सबसे ऊपर मौजूद नेविगेशन बार में, ड्रॉप-डाउन मेन्यू में थीम चुनें.
  2. पेज की दाईं ओर मौजूद स्टाइल एडिटर पैनल में, अपनी पसंद के मुताबिक सीएसएस कोड जोड़ें.
  3. झलक को फिर से लोड करें पर क्लिक करके, झलक पैनल में अपने बदलावों की झलक देखें.
    > ध्यान दें: सभी पेजों पर मौजूद कॉन्टेंट की झलक देखने के लिए, पोर्टल नेविगेशन पर क्लिक करें.
  4. थीम में किए गए बदलावों को पब्लिश करने के लिए, पब्लिश करें पर क्लिक करें.
  5. अपडेट की पुष्टि करने के लिए, पब्लिश करें पर क्लिक करें.

"आपका लोगो" इमेज को अपनी कंपनी के लोगो से पसंद के मुताबिक बनाएं, उसी नाम और मिलते-जुलते फ़ाइल साइज़ का इस्तेमाल करके अपना लोगो अपलोड करके फ़ाइल मैनेजर में नीचे दी गई इमेज फ़ाइलों को बदलें:

  • logo.png (140 पिक्सल x 40 पिक्सल)
  • mobile-logo.png (140 पिक्सल x 40 पिक्सल)

इसके अलावा, सीएसएस स्टाइल शीट में ज़रूरत के मुताबिक नीचे दिए गए कॉन्टेंट में बदलाव करें:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}

.navbar-brand img { max-height: 50px; margin: 0; padding: 0; }

ज़्यादा जानकारी के लिए, अपनी ऐसेट मैनेज करना लेख पढ़ें.

होम पेज पर बैकग्राउंड की इमेज को पसंद के मुताबिक बनाना

सीएसएस स्टाइल शीट में, नीचे दिए गए कॉन्टेंट में बदलाव करके होम पेज पर बैकग्राउंड की इमेज को अपनी पसंद के मुताबिक बनाएं.

  • बैकग्राउंड की इमेज की फ़ाइल और उसकी प्लेसमेंट में बदलाव करें.
    फ़ाइल मैनेजर में portal-hero.jpg इमेज का अपना वर्शन अपलोड किया जा सकता है. इसके लिए, उसी नाम और मिलते-जुलते फ़ाइल साइज़ (1440 पिक्सल x 540 पिक्सल) का इस्तेमाल करें. अगर आपको किसी दूसरे फ़ाइल नाम का इस्तेमाल करना है, तो पक्का करें कि यहां दी गई सीएसएस में background-image की वैल्यू को बदला गया हो.

    /* ==== Jumbotron ====
    a billboard for drawing attention, from Bootstrap  */
    
    home-page-jumbotron-bg {
        background-image: url('/files/portal-hero.jpg');
    }
  • बैकग्राउंड की इमेज को ओवरले करने वाले टेक्स्ट का फ़ॉर्मैट बदलें.

    .jumbotron {
     text-align: center;
     height: 500px;
     background-size: cover;
     margin: -50px -30px 0 -30px;
     border-radius: 0;
    }
    
    .jumbotron h1 {
     font-size: 40px;
     font-weight: 400;
    }
    
    .jumbotron h2 {
     font-size: 25px;
     font-weight: 400;
    }
    
    .jumbotron a, .jumbotron a:hover {
     font-size: 18px;
    }
    
    .jumbotron p {
     max-width: none;
    }

सीएसएस के खास नियमों को समझना

सीएसएस की विशेषता, उस तरीके के बारे में बताती है जिसका इस्तेमाल ब्राउज़र करता है. इससे विवाद होने पर, सीएसएस स्टाइल एलिमेंट के एलान की प्राथमिकता तय की जाती है. सीएसएस की खासियत का हिसाब लगाने के लिए, चुने गए सिलेक्टर टाइप के आधार पर खास सीएसएस स्टाइल एलिमेंट में वज़न लागू किया जाता है. सीएसएस सिलेक्टर जितना सटीक होगा, वज़न उतना ही ज़्यादा होगा. उदाहरण के लिए, किसी आईडी एट्रिब्यूट को टाइप चुनने वाले टूल के मुकाबले, कैलकुलेशन में ज़्यादा अहमियत दी जाएगी.

उदाहरण के लिए, अपने सीएसएस कोड में इन स्टाइल एलिमेंट को परिभाषित करने पर, पैराग्राफ़ एलिमेंट का रंग लाल होगा. इसकी वजह यह है कि किसी div एलिमेंट में p स्टाइल एलिमेंट की घोषणा, p स्टाइल एलिमेंट की घोषणा से ज़्यादा सटीक होती है.

div p { color: red }  ← More specific  
p { color: blue }

इसी तरह, अगर आप अपने सीएसएस कोड में इन स्टाइल एलिमेंट से जुड़ी जानकारी देते हैं, तो <div class="test"></div> टैग के अंदर का कोई भी टेक्स्ट नीले रंग का होगा. ऐसा इसलिए, क्योंकि किसी div एलिमेंट में आईडी एट्रिब्यूट स्टाइल के बारे में दी गई जानकारी, div स्टाइल एलिमेंट की घोषणा से ज़्यादा सटीक होती है.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

एक जैसी खासियत वाले स्टाइल एलिमेंट की जानकारी के लिए, तय किए गए आखिरी स्टाइल एलिमेंट एलान को प्राथमिकता दी जाएगी. उदाहरण के लिए, यहां दिए गए स्टाइल एलिमेंट के एलान के क्रम में, पैराग्राफ़ एलिमेंट नीले रंग का होगा.

p { color: red }  
p { color: blue }  ← Last specified

अपनी थीम पब्लिश करना

लाइव पोर्टल पर पब्लिश करने के लिए, जोड़ी गई थीम और स्टाइल कस्टमाइज़ेशन:

  1. सबसे ऊपर मौजूद नेविगेशन मेन्यू में, ड्रॉप-डाउन मेन्यू में थीम चुनें.
  2. पब्लिश करें पर क्लिक करें.

लाइव पोर्टल में अपने पब्लिश किए गए वीडियो देखने के लिए, सबसे ऊपर नेविगेशन बार में लाइव पोर्टल पर क्लिक करें.