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

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

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

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

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

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

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

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

• स्टाइल एडिटर पेन का इस्तेमाल करके, थीम को पसंद के मुताबिक बनाने के लिए कस्टम स्टाइल जोड़ें
• झलक फिर से लोड करें पर क्लिक करके, झलक वाले सेक्शन में अपनी थीम की झलक देखें
• लोगो को पसंद के मुताबिक बनाना
• बैकग्राउंड इमेज को पसंद के मुताबिक बनाना
• लाइव पोर्टल पर अपनी थीम पब्लिश करें

पसंद के मुताबिक स्टाइल जोड़ना

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

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

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 एलिमेंट में id एट्रिब्यूट के स्टाइल एलान, div स्टाइल एलिमेंट के एलान से ज़्यादा खास होते हैं.

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

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

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

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

लाइव पोर्टल पर, थीम और स्टाइल से जुड़े वे बदलाव पब्लिश करें जिन्हें आपने जोड़ा है:

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

लाइव पोर्टल में पब्लिश किया गया कॉन्टेंट देखने के लिए, सबसे ऊपर मौजूद नेविगेशन बार में लाइव पोर्टल पर क्लिक करें.