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

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

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

डेवलपर पोर्टल यूज़र इंटरफ़ेस (यूआई) से थीम को पसंद के मुताबिक बनाया जा सकता है. इसके अलावा, डिफ़ॉल्ट थीम फ़ाइल को बदलने के लिए, कस्टम थीम फ़ाइल में कोड लिखकर भी थीम बदली जा सकती है.

डेवलपर पोर्टल के अपने वर्शन के आधार पर, आपके पास चुनने के लिए कई थीम होंगी:

थीम ब्यौरा

Apigee रिस्पॉन्सिव थीम

पोर्टल के बाद की रिलीज़ के लिए डिफ़ॉल्ट थीम, बूटस्ट्रैप 3 पर आधारित है. यह थीम, 768 पिक्सल से 1400 पिक्सल की चौड़ाई वाले डिवाइसों पर काम करती है. इस थीम में बूटस्ट्रैप 3 की सभी सुविधाएं उपलब्ध हैं.

ध्यान दें: Apigee रिस्पॉन्सिव थीम इस्तेमाल करने के लिए, पक्का करें कि बूटस्ट्रैप 7.x-3.0 थीम चालू हो.

Apigee DevConnect थीम

डिफ़ॉल्ट पोर्टल थीम, जो Apigee रिस्पॉन्सिव थीम से पहले होती है.

मौजूदा पोर्टल को नई Apigee रिस्पॉन्सिव थीम पर अपग्रेड किया जा सकता है, लेकिन पहले यह पक्का करना होगा कि सभी ब्लॉक, टेंप्लेट, और अन्य कॉन्टेंट बूटस्ट्रैप 3 के साथ काम करता है और यह कि बूटस्ट्रैप 7.x-3.0 थीम चालू है.

Apigee Base थीम

यह Apigee DevConnect थीम की पैरंट थीम है और इसे अलग से इस्तेमाल नहीं किया जाना चाहिए.

डिफ़ॉल्ट थीम सेट करना

अगर आपका पोर्टल अब भी पुरानी Apigee DevConnect थीम का इस्तेमाल कर रहा है, तो आपको फ़ॉर्म में चेतावनी दिख सकती है:

"Apigee DevConnect theme" is out of date 

पोर्टल के लिए डिफ़ॉल्ट थीम सेट करने के लिए, इस तरीके का इस्तेमाल किया जा सकता है. आपको थीम को प्रोडक्शन में लागू करने से पहले, नॉन-प्रोडक्शन सिस्टम पर हमेशा नई थीम की जांच करनी चाहिए.

डिफ़ॉल्ट थीम सेट करने के लिए:

  1. अपने पोर्टल पर एडमिन या कॉन्टेंट बनाने के खास अधिकार वाले उपयोगकर्ता के तौर पर लॉग इन करें.
  2. Drupal के एडमिन मेन्यू में थीम चुनें. चालू की गई थीम की सूची दिखेगी.
  3. आपको जिस थीम को डिफ़ॉल्ट थीम के तौर पर इस्तेमाल करना है उसके लिए, डिफ़ॉल्ट सेट करें को चुनें.
    Apigee रिस्पॉन्सिव थीम इस्तेमाल करने के लिए, यह पक्का करें कि उस पेज पर बूटस्ट्रैप 7.x-3.0 थीम भी चालू हो.
  4. कॉन्फ़िगरेशन को सेव करें.

Apigee की रिस्पॉन्सिव थीम को पसंद के मुताबिक बनाना

इस सेक्शन में बताया गया है कि Apigee रिस्पॉन्सिव थीम को कैसे कॉन्फ़िगर किया जाए. इसमें ये भी शामिल हैं:

  • मॉडल फ़ॉर्म को पसंद के मुताबिक बनाना
  • सामान्य सेटिंग कस्टमाइज़ करना

मोडल फ़ॉर्म की सुविधा को पसंद के मुताबिक बनाने के लिए:

यह पोर्टल, Drupal फ़ॉर्म को मॉडल के तौर पर दिखाने के लिए Drupal बूटस्ट्रैप मोडल फ़ॉर्म सैंडबॉक्स मॉड्यूल का इस्तेमाल करता है. डिफ़ॉल्ट रूप से, लॉगिन और रजिस्टर फ़ॉर्म को मोडल के तौर पर इस्तेमाल किया जाता है. उन फ़ॉर्म को अलग-अलग पेजों के तौर पर दिखाने के लिए, इस सुविधा को बंद किया जा सकता है.

  1. एडमिन के खास अधिकारों वाले उपयोगकर्ता के तौर पर, डेवलपर पोर्टल में लॉग इन करें.
  2. Drupal के एडमिन मेन्यू में, कॉन्फ़िगरेशन > यूज़र इंटरफ़ेस > बूटस्ट्रैप मोडल फ़ॉर्म चुनें.
  3. फ़ॉर्म के लिए मॉडल सहायता चालू या बंद करें.
  4. कॉन्फ़िगरेशन सेव करें चुनें.

Apigee रिस्पॉन्सिव थीम की सामान्य सेटिंग को पसंद के मुताबिक बनाने के लिए:

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

    इलाका सेक्शन ब्यौरा

    बूटस्ट्रैप सेटिंग

    कॉम्पोनेंट

    ब्रेडक्रंब, मुख्य मेन्यू की पोज़िशन (सेटिंग में नेविगेशनबार), और इलाके के कुओं को दिखाने को कंट्रोल करें:

    • ब्रेडक्रंब: ब्रेडक्रंब छिपाएं/दिखाएं, ब्रेडक्रंब के अंदर होम लिंक चालू/बंद करें.
    • नेविगेशन बार: लेआउट को ज़्यादा डाइनैमिक बनाने के लिए, नेविगेशनबार (मुख्य मेन्यू) की जगह को तय/स्टैटिक/सामान्य स्थिति में बदलें.
    • रीजनल वेल: इलाके में गहरे रंग का बैकग्राउंड जोड़ने के लिए, साइट पर किसी भी रीजन में वेल क्लास जोड़ें.

    JavaScript

    ऐंकर, पॉपओवर, और टूलटिप के दिखने की सेटिंग कंट्रोल करें:

    • एंकर: ऐंकर की पोज़िशन ठीक करें और आसानी से स्क्रोल करने की सुविधा चालू करें.
    • पॉपओवर: पॉपओवर, किसी भी एलिमेंट में कॉन्टेंट को छोटे-छोटे ओवरले में जोड़ते हैं. पॉपओवर को चालू/बंद करें और पॉपओवर के इस्तेमाल का तरीका कॉन्फ़िगर करें.
    • टूलटिप: टूलटिप के इस्तेमाल का तरीका कॉन्फ़िगर करें. हर टूलटिप को हर फ़ॉर्म एलिमेंट के दाएं, बाएं, ऊपर या नीचे दिखाया जा सकता है. साथ ही, डिसप्ले के दूसरे विकल्प सेट किए जा सकते हैं.

    बेहतर

    यह नीति कंट्रोल करती है कि पोर्टल, बूटस्ट्रैप थीम फ़ाइलों को अपडेट करने के लिए, BootstrapCDN का इस्तेमाल कैसे करता है. बूटस्ट्रैप सीडीएन पर पोर्टल के भरोसे को खत्म किया जा सकता है. हालांकि, इसके बाद आपको बूटस्ट्रैप फ़्रेमवर्क को खुद लागू करना होगा.

    DevConnect सेटिंग

    मुख्य मेन्यू में दिखने वाला वेलकम मैसेज, डिफ़ॉल्ट रंग, और लोगो का साइज़ सेट करें.

    ग्लोबल सेटिंग बदलना

    टॉगल डिसप्ले

    पोर्टल के अलग-अलग क्षेत्रों का प्रदर्शन सक्षम और अक्षम करें.

    लोगो इमेज की सेटिंग

    मुख्य मेन्यू में दिखाई जा रही इमेज के बारे में जानकारी देता है.

    शॉर्टकट आइकॉन की सेटिंग

    इस नीति से ब्राउज़र के पता बार में या पोर्टल के बुकमार्क के लिए दिखने वाली इमेज के बारे में पता चलता है.

Apigee DevConnect थीम को पसंद के मुताबिक बनाना

पोर्टल के पुराने वर्शन के लिए, Apigee DevConnect थीम, डिफ़ॉल्ट पोर्टल थीम है. इसे नई Apigee रिस्पॉन्सिव थीम में अपग्रेड किया जा सकता है. हालांकि, अपग्रेड करने से पहले आपको यह पक्का करना होगा कि सभी ब्लॉक, टेंप्लेट, और अन्य कॉन्टेंट, बूटस्ट्रैप 3 के साथ काम करता हो.

Apigee DevConnect थीम की सामान्य सेटिंग को पसंद के मुताबिक बनाने के लिए:

  1. अपने पोर्टल पर एडमिन या कॉन्टेंट बनाने के खास अधिकार वाले उपयोगकर्ता के तौर पर लॉग इन करें.
  2. Drupal के एडमिन मेन्यू में, थीम > Apigee DevConnect थीम > सेटिंग चुनें. इससे थीम के लिए शुरुआती सेटिंग दिखती हैं. रंग की सेटिंग को हेक्साडेसिमल वैल्यू के तौर पर तय किया जाता है.

  3. सेटिंग को अपनी पसंद के मुताबिक बदलें.
    उदाहरण के लिए, वेलकम मैसेज जोड़ें या बदलें या हेडर के बैकग्राउंड का रंग बदलें. शुरुआत में हेडर के बैकग्राउंड का रंग, नारंगी रंग (#FF4300) पर सेट होता है. इसे किसी दूसरे रंग में बदला जा सकता है, जैसे कि नीला (#0000FF).
  4. सेटिंग बदलने के बाद, सेव करें पर क्लिक करें.

सब-थीम बनाकर, थीम को पसंद के मुताबिक बनाना

पोर्टल के साथ शिप की जाने वाली डिफ़ॉल्ट थीम के बारे में बताने वाली सभी फ़ाइलें और एसेट, पोर्टल इंस्टॉलेशन डायरेक्ट्री में profiles/apigee/themes डायरेक्ट्री में मौजूद होती हैं. अगर आपने पोर्टल को डिफ़ॉल्ट जगह पर इंस्टॉल किया है, तो यह डायरेक्ट्री /var/www/html/profiles/apigee/themes पर होगी.

अगर आपको साइट के लुक और स्टाइल में बदलाव करने के लिए, किसी थीम में बदलाव करना है, तो सीधे profiles/apigee/themes में जाकर, थीम फ़ाइलों में कोई बदलाव न करें. अगर आप ऐसा करते हैं, तो अगली बार पोर्टल को अपग्रेड करने पर आपके बदलाव ओवरराइट हो जाएंगे.

इसके बजाय, उस थीम की एक सब-थीम बनाएं जिसमें आपको बदलाव करना है. इसके लिए, डिफ़ॉल्ट थीम फ़ाइलों को /sites/all/themes डायरेक्ट्री में कॉपी करें. सब-थीम के बारे में निर्देश के लिए, https://www.drupal.org/node/225125 पर Drupal का दस्तावेज़ देखें.

ऊपर दिए गए Drupal दस्तावेज़ में सब-थीम बनाने के बारे में पूरी जानकारी दी गई है. हालांकि, Apigee रिस्पॉन्सिव थीम की सब-थीम बनाने का तरीका यहां दिया गया है:
  1. profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit फ़ोल्डर profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit फ़ोल्डर में कॉपी करें.
  2. apigee_responsive_starterkit फ़ोल्डर का नाम बदलकर YOUR_थीम_NAME करें.
  3. apigee_responsive_starterkit.info फ़ाइल का नाम बदलकर YOUR_SETTINGS_NAME.info करें.
  4. css/apigee_responsive_starterkit.css का नाम बदलकर css/YOUR_ डाला_NAME.css करें.
  5. js/apigee_responsive_starterkit.js नाम को YOUR_ प्रयोग_NAME.js में बदलें.
  6. YOUR_थीम_NAME.info फ़ाइल में बदलाव करें और यहां दी गई लाइनें बदलें:

    stylesheets[all][] = css/apigee_responsive_starterkit.css
    स्क्रिप्ट[] = js/apigee_responsive_starterkit.js


    इसके साथ:

    stylesheets[all][] = cs.js.js.js.js स्क्रिप्ट
  7. YOUR_थीम_NAME.info फ़ाइल में थीम के नाम को Apigee रिस्पॉन्सिव स्टार्टर किट से अपनी थीम के नाम में बदलें.
  8. अगर आपको अपनी थीम के लिए नया स्क्रीनशॉट जोड़ना है, तो मौजूदा screenshot.png फ़ाइल को बदलें.
  9. अगर आपको अपनी थीम में नया लोगो जोड़ना है, तो बाहर निकलने वाली logo.png फ़ाइल को बदलें.
  10. अगर आपको अपनी थीम में नया फ़ेविकॉन जोड़ना है, तो मौजूदा favicon.ico फ़ाइल को बदलें.