अपनी थीम कस्टमाइज़ करें

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

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

यहां दिए गए सेक्शन में बताए गए तरीके से, थीम को पसंद के मुताबिक बनाया जा सकता है. साथ ही, उसकी झलक देखी जा सकती है और उसे पब्लिश किया जा सकता है.

थीम एडिटर के बारे में जानकारी

थीम एडिटर में जाकर, अपने पोर्टल की थीम को पसंद के मुताबिक बनाएं, उसकी झलक देखें, और उसे पब्लिश करें.

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

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

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

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

बेस थीम के बारे में जानकारी

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

स्टाइल के नियमों को Sassy Cascading Style Sheet (SCSS) का इस्तेमाल करके तय किया जाता है. SCSS, कैस्केडिंग स्टाइल शीट (सीएसएस) का सुपरसेट है. इसके ये फ़ायदे हैं:

• ग्लोबल वैरिएबल, जिनका इस्तेमाल पूरी स्टाइल शीट में फिर से किया जा सकता है.
• स्टाइल शीट बनाने में लगने वाला समय बचाने के लिए, नेस्ट किए गए नियम.
• मिक्सइन और फ़ंक्शन बनाने की सुविधा

उदाहरण के लिए:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

एससीएसएस को कंपाइल किया जाता है और वेब पेज पर कॉन्टेंट रेंडर होने से पहले, इसे सामान्य सीएसएस में बदल दिया जाता है.

बेस थीम, ऐंगुलर मटीरियल स्टाइलशीट मटीरियल थीमिंग एससीएएसएस फ़ाइल (material-theming.scss) का इस्तेमाल करती है. इस स्टाइलशीट में वैरिएबल, फ़ंक्शन, और मिक्सइन के बारे में बताया गया है. इन्हें कस्टम वैरिएबल और SCSS सेक्शन का इस्तेमाल करके बदला जा सकता है. इसके बारे में ऐडवांस थीम एडिटर का इस्तेमाल करके थीम को पसंद के मुताबिक बनाना लेख में बताया गया है.

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

कलर पैलेट को पसंद के मुताबिक बनाना

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

कलर पैलेट की कैटगरी के बारे में जानकारी

इंटिग्रेटेड पोर्टल के लिए कलर पैलेट की परिभाषाओं को इन कैटगरी में बांटा गया है. इन्हें बेस थीम में मटीरियल डिज़ाइन कलर स्टाइलिंग का इस्तेमाल करके तय किया जाता है.

बेसिक स्टाइल एडिटर का इस्तेमाल करके, कलर पैलेट को पसंद के मुताबिक बनाना

बेसिक स्टाइल एडिटर का इस्तेमाल करके, प्राइमरी और ऐक्सेंट कलर पैलेट को तुरंत अपनी पसंद के मुताबिक बनाएं.

बेसिक स्टाइल एडिटर का इस्तेमाल करके, कलर पैलेट को पसंद के मुताबिक बनाने के लिए:

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

थीम के वैरिएबल को बदलकर, रंग पटल को पसंद के मुताबिक बनाना

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

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

पहले से तय किए गए कलर वैरिएबल (जैसे कि $mat-grey) की पहचान करने के लिए, इंपोर्ट की गई मटेरियल थीमिंग SCSS फ़ाइल (material-theming.scss) का कॉन्टेंट देखें. संख्या वाली वैल्यू, डिफ़ॉल्ट, हल्के, और गहरे एलिमेंट के लिए शेडिंग वैल्यू दिखाती हैं.

इसके अलावा, आपके पास अपना कलर वैरिएबल बनाने का विकल्प भी है. उदाहरण के लिए:

$my-color-variable: (    
    50 : #f9f0e7,    
    100 : #f0d8c2,    
    200 : #e6bf9a,    
    300 : #dba572,    
    400 : #d49153,    
    500 : #cc7e35,    
    600 : #c77630,    
    700 : #c06b28,    
    800 : #b96122,    
    900 : #ad4e16,    
    A100 : #ffebe0,     
    A200 : #ffc9ad,    
    A400 : #ffa77a,    
    A700 : #ff9661,     
    // Color to render text presented on a background of the same level       
    contrast: (    
        50 : #000000,     
        100 : #000000,     
        200 : #000000,     
        300 : #000000,    
        400 : #000000,     
        500 : #000000,    
        600 : #000000,    
        700 : #ffffff,     
        800 : #ffffff,    
        900 : #ffffff,     
        A100 : #000000,     
        A200 : #000000,     
        A400 : #000000,     
        A700 : #000000,     
    )    
);    

इसके बाद, इसका इस्तेमाल करके रंग पटल बदलें. जैसा कि इस उदाहरण में दिखाया गया है:

$primary: mat-palette($my-color-variable, 900, 200, 400);

फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाना

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

बेसिक स्टाइल एडिटर का इस्तेमाल करके, फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाना

नीचे दी गई इमेज में दिखाए गए तरीके से, बुनियादी स्टाइल एडिटर का इस्तेमाल करके फ़ॉन्ट फ़ैमिली और स्टाइल को तुरंत अपनी पसंद के मुताबिक बनाएं.

बेसिक स्टाइल एडिटर का इस्तेमाल करके, फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाने के लिए:

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

थीम के वैरिएबल को बदलकर, फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाना

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

उदाहरण के लिए, डिफ़ॉल्ट फ़ॉन्ट को Arial में बदलने के लिए, इस वैरिएबल को तय करें:

$typography-main-font-family: 'Arial';

पसंद के मुताबिक फ़ॉन्ट इंपोर्ट करना

Google फ़ॉन्ट (डिफ़ॉल्ट फ़ॉन्ट के सेट में शामिल नहीं) या अपना कस्टम फ़ॉन्ट इंपोर्ट करें. इसके बाद, अपनी स्टाइल शीट में कस्टम फ़ॉन्ट को रेफ़रंस दें. इसके बारे में यहां बताया गया है.

Google फ़ॉन्ट इंपोर्ट करना

Google फ़ॉन्ट इंपोर्ट करने के लिए, ऐडवांस थीम एडिटर को ऐक्सेस करें. इसके बाद, नीचे दिए गए तरीके से कस्टम स्टाइल सेक्शन में फ़ॉन्ट इंपोर्ट करें:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

पसंद के मुताबिक फ़ॉन्ट इंपोर्ट करना

@font-face सीएसएस नियम का इस्तेमाल करके, अपनी पसंद के मुताबिक फ़ॉन्ट इंपोर्ट करें. @font-face नियम, कई तरह के फ़ाइल फ़ॉर्मैट के साथ काम करता है. इनमें TrueType (टीटीएफ़), Web Open Font Format (WOFF) वगैरह शामिल हैं.

अपनी पसंद के मुताबिक फ़ॉन्ट इंपोर्ट करने के लिए:

1. अगर आपको फ़ॉन्ट फ़ाइल अपलोड करनी है, तो फ़ाइल अपलोड करना लेख में दिए गए तरीके से, ऐसेट मैनेजर में फ़ाइल अपलोड करें.

2. ऐडवांस थीम एडिटर को ऐक्सेस करें और @font-face नियम को कस्टम स्टाइल सेक्शन में जोड़ें. यहां font-family फ़ॉन्ट का नाम, url फ़ॉन्ट फ़ाइल की जगह (इस मामले में, ऐसेट मैनेजर), MyCustomFont.tff आपकी कस्टम फ़ॉन्ट फ़ाइल का नाम, और format फ़ॉन्ट का फ़ॉर्मैट बताता है.

   @font-face {
      font-family: 'MyCustomFont';
      src: url('files/MyCustomFont.tff') format('truetype')
   }
   

अपनी स्टाइल शीट में कस्टम फ़ॉन्ट का रेफ़रंस देना

वैरिएबल सेक्शन में मौजूद, फ़ॉन्ट फ़ैमिली और स्टाइल वैरिएबल में से किसी एक में कस्टम फ़ॉन्ट का रेफ़रंस दें. उदाहरण के लिए:

$typography-main: mat-typography-config(    
    $font-family: '"Indie Flower", "Oxygen", sans-serif',    
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers    
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers    
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers    
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers    
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags    
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags    
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags   
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags   
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text   
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text    
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text    
    $button: mat-typography-level(14px, 14px, 500), // Buttons    
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);    

लोगो को पसंद के मुताबिक बनाना

पोर्टल में इस्तेमाल किए गए लोगो को इन जगहों पर अपनी पसंद के मुताबिक बनाया जा सकता है:

डेस्कटॉप और मोबाइल डिसप्ले के लिए, नेविगेशन टूलबार में मौजूद लोगो को पसंद के मुताबिक बनाएं

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

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

डेस्कटॉप और मोबाइल डिसप्ले के लिए, नेविगेशन टूलबार में इस्तेमाल किए गए लोगो को पसंद के मुताबिक बनाने के लिए:

1. अपनी कंपनी के लोगो की एक या उससे ज़्यादा ऐसी कॉपी पाएं जिनका इस्तेमाल किया जा सके.
   सुझाए गए साइज़ के लिए, पिछली टेबल देखें.
2. थीम एडिटर को ऐक्सेस करें.
3. डेस्कटॉप पर दिखने वाले सबसे ऊपर मौजूद नेविगेशन टूलबार में लोगो बदलने के लिए:
   a. दाईं ओर मौजूद पैनल में, बुनियादी स्टाइल में जाकर प्राइमरी लोगो फ़ील्ड में मौजूद पर क्लिक करें.
   b. अपनी लोकल डायरेक्ट्री में, अपने लोगो का डेस्कटॉप वर्शन ब्राउज़ करें.
   c. फ़ाइल अपलोड करने के लिए, खोलें पर क्लिक करें.
4. मोबाइल डिसप्ले पर सबसे ऊपर मौजूद नेविगेशन टूलबार में लोगो बदलने के लिए:
   a. दाईं ओर मौजूद पैनल में, बुनियादी स्टाइल में जाकर, लोगो के विकल्प को बड़ा करें. इसके बाद, मोबाइल लोगो फ़ील्ड में जाकर, पर क्लिक करें.
   b. अपनी स्थानीय डायरेक्ट्री में, अपने लोगो का मोबाइल वर्शन ढूंढें.
   c. फ़ाइल अपलोड करने के लिए, खोलें पर क्लिक करें.
5. बदलावों की झलक देखने के लिए, बाईं ओर मौजूद पैनल में सेव करें पर क्लिक करें.
6. अपने पोर्टल पर बदलावों को पब्लिश करने के लिए, पब्लिश करें पर क्लिक करें. जब कहा जाए, तब कार्रवाई की पुष्टि करें.

फ़ेविकॉन को पसंद के मुताबिक बनाना

वेब ब्राउज़र के पता बार में इस्तेमाल किए गए फ़ेविकॉन को पसंद के मुताबिक बनाने के लिए, यह तरीका अपनाएं. इसके अलावा, इसे अन्य जगहों पर भी इस्तेमाल किया जा सकता है:

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

'साइन इन करें' पेज पर मौजूद लोगो को पसंद के मुताबिक बनाना

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

नेविगेशन टूलबार को पसंद के मुताबिक बनाना

यहां नेविगेशन टूलबार को पसंद के मुताबिक बनाने के लिए कुछ सलाह दी गई है:

• मुख्य रंग बदलकर, हेडर और फ़ुटर में मौजूद नेविगेशन टूलबार के रंग को अपनी पसंद के मुताबिक बनाएं. इसके बारे में कलर पैलेट को पसंद के मुताबिक बनाना लेख में बताया गया है.
• हेडर और फ़ुटर में मौजूद नेविगेशन टूलबार में, मेन्यू आइटम के फ़ॉन्ट के साइज़ और स्टाइल को पसंद के मुताबिक बनाएं. इसके लिए, फ़ॉन्ट और बटन की स्टाइल बदलें. इसके बारे में फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाना लेख में बताया गया है.
• ऐडवांस थीम एडिटर को ऐक्सेस करके, हेडर नेविगेशन टूलबार की ऊंचाई को पसंद के मुताबिक बनाएं. साथ ही, वैरिएबल सेक्शन में, अपनी ज़रूरत के हिसाब से तय की गई वैल्यू के साथ यह वैरिएबल शामिल करें: $layout-header-height: 64px;
• ऐडवांस थीम एडिटर को ऐक्सेस करके, फ़ुटर नेविगेशन टूलबार की ऊंचाई को पसंद के मुताबिक बनाएं. साथ ही, वैरिएबल सेक्शन में, अपनी बदली गई वैल्यू के साथ यह वैरिएबल शामिल करें: $layout-footer-height: 44px;
• डेस्कटॉप और मोबाइल पर दिखने वाले नेविगेशन टूलबार में मौजूद लोगो को पसंद के मुताबिक बनाएं.

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

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

• ऐसेट मैनेजर में, home-background.jpg इमेज का अपना वर्शन अपलोड करें. इसके लिए, उसी नाम और फ़ाइल के साइज़ (3000 पिक्सल x 1996 पिक्सल) का इस्तेमाल करें. ज़्यादा जानकारी के लिए, अपनी ऐसेट मैनेज करना लेख पढ़ें.

• ऐडवांस थीम एडिटर को ऐक्सेस करके, बैकग्राउंड इमेज के फ़ाइल नाम और उसकी पैडिंग में बदलाव करें. इसके लिए, कस्टम स्टाइल सेक्शन में, अडजस्ट की गई वैल्यू के साथ यह SCSS शामिल करें:

  #index {
    &.main {
      .main-content {
        padding: 0;
        background-image: url('/files/home-background.jpg');
        background-size: cover;
      }
    }
  }
  

• ऐडवांस थीम एडिटर को ऐक्सेस करके, पोर्टल के सभी पेजों में बैकग्राउंड इमेज जोड़ें. साथ ही, कस्टम स्टाइल सेक्शन में, नीचे दिए गए SCSS को अडजस्ट की गई वैल्यू के साथ शामिल करें:

   body {
      background-image: url('/files/background-image.jpg');
   }
  
  

टाइपोग्राफ़ी को पसंद के मुताबिक बनाना

ऐडवांस थीम एडिटर को ऐक्सेस करके टाइपोग्राफ़ी को पसंद के मुताबिक बनाएं. इसके लिए, वैरिएबल सेक्शन में जाकर, टाइपोग्राफ़ी के एक या उससे ज़्यादा वैरिएबल की वैल्यू में बदलाव करें:

• $typography-main
• $typography-header
• $typography-footer
• $typography-context-bar

उदाहरण के लिए:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

इसके बाद, टाइपोग्राफ़ी को किसी सीएसएस सिलेक्टर पर लागू किया जा सकता है. इसका उदाहरण यहां दिया गया है:

@include mat-base-typography($custom-typography-config, '.css-selector');

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

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

ऐडवांस थीम एडिटर का इस्तेमाल करके थीम को पसंद के मुताबिक बनाना

थीम को पसंद के मुताबिक बनाने के लिए, थीम वैरिएबल को बदलें या सीधे तौर पर ऐडवांस थीम एडिटर में जाकर, थीम के स्टाइल एलिमेंट को पसंद के मुताबिक बनाएं.

थीम के वैरिएबल को ओवरराइड करना

ऐडवांस थीम एडिटर के वैरिएबल सेक्शन में जाकर, थीम वैरिएबल को बदलें. थीम वैरिएबल की सूची देखने के लिए, थीम वैरिएबल रेफ़रंस देखें.

उदाहरण के लिए, हेडर और फ़ुटर नेविगेशन टूलबार की ऊंचाई को पसंद के मुताबिक बनाने के लिए, अडवांस थीम एडिटर के वैरिएबल सेक्शन में, नीचे दिए गए वैरिएबल को उनकी बदली हुई वैल्यू के साथ शामिल करें:

अन्य उदाहरणों के लिए, यहां जाएं:

• थीम वैरिएबल को बदलकर, कलर पैलेट को पसंद के मुताबिक बनाना
• थीम के वैरिएबल को बदलकर, फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाना

थीम वैरिएबल को बदलने के लिए:

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

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

ऐडवांस थीम एडिटर के कस्टम स्टाइल सेक्शन में जाकर, थीम स्टाइल के एलिमेंट को सीधे तौर पर अपनी पसंद के मुताबिक बनाएं.

उदाहरण के लिए, पोर्टल में ऐप्लिकेशन रजिस्टर करते समय दिखने वाले 'नया ऐप्लिकेशन' पेज पर मौजूद 'बनाएं' बटन का रंग बदलने के लिए, इस थीम स्टाइल एलिमेंट को बदली गई वैल्यू के साथ शामिल करें:

.main .main-content button.app-save {
  color: blue;
}

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

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

1. थीम एडिटर को ऐक्सेस करें.
2. दाईं ओर मौजूद पैनल में, बेहतर पर क्लिक करें.
3. कस्टम स्टाइल पर क्लिक करें.
4. अपनी थीम स्टाइल के एलिमेंट जोड़ें.
5. अपने बदलावों को सेव करने के लिए, सेव करें पर क्लिक करें.
6. ऐडवांस थीम एडिटर को बंद करने के लिए, बंद करें x पर क्लिक करें.
7. बदलावों को झलक वाले पैनल में देखें या ब्राउज़र में पोर्टल में किए गए बदलावों की झलक देखने के लिए, झलक देखें पर क्लिक करें.
   ध्यान दें: सभी पेजों पर बदलाव देखने के लिए, झलक वाले पैनल में अपने पोर्टल नेविगेशन पर क्लिक करें.
8. अपनी थीम पब्लिश करने के लिए, पब्लिश करें पर क्लिक करें. अपडेट की पुष्टि करने के लिए, आपसे कहा जाएगा.

पोर्टल पेज में फ़ुल-विड्थ वाला पैनल बनाना

पोर्टल पेज में फ़ुल-विड्थ वाला पैनल बनाने के लिए:

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

   .full-width__container {
     position: relative;
     left: 50%;
     right: 50%;
     max-width: 100vw;
     margin-left: -50vw;
     margin-right: -50vw;
     background-image: url("/files/your-image.jpg");
     background-size: cover;
     background-position: 50% 50%;
     padding: 0;
   }
   
   .full-width__centered {
     @include centered-content();
   }
   
   .full-width__content {
     // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to
     // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
     // and corresponding <div> container if no additional padding control other than the
     // min page padding is needed.
   }

2. पोर्टल पेज के कॉन्टेंट में बदलाव करके, यहां दिया गया <div> एलिमेंट शामिल करें. इसके बारे में पेज एडिटर का इस्तेमाल करके पोर्टल का कॉन्टेंट डेवलप करना लेख में बताया गया है:

   <div class="full-width__container">
     <div class="full-width__centered">
       <div class="full-width__content">  <!-- Include this div if you need additional padding -->
         <h2>Full Width Container</h2>
         <p>
           This content will align with the page header and other content outside
           of this full width container
         </p>
       </div>
     </div>
   </div>

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

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

1. थीम एडिटर को ऐक्सेस करें.
2. पब्लिश करें पर क्लिक करें.

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

सीएसएस के स्पेसिफ़िसिटी नियमों के बारे में जानकारी

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

उदाहरण के लिए, अगर आपने अपने सीएसएस कोड में यहां दिए गए स्टाइल एलिमेंट तय किए हैं, तो पैराग्राफ़ एलिमेंट का रंग लाल होगा. ऐसा इसलिए, क्योंकि 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

थीम वैरिएबल का रेफ़रंस

यहां दिए गए सेक्शन में, उन वैरिएबल के बारे में खास जानकारी दी गई है जिन्हें ऐडवांस थीम एडिटर के वैरिएबल सेक्शन में बदला जा सकता है. इसके बारे में थीम वैरिएबल बदलना लेख में बताया गया है.

• बेस थीम वैरिएबल
• कलर पैलेट वैरिएबल
• फ़ॉन्ट फ़ैमिली और स्टाइल वैरिएबल
• टाइपोग्राफ़ी वैरिएबल

बेस थीम वैरिएबल

पूरी साइट पर इस्तेमाल की गई बेस थीम के फ़ोरग्राउंड कलर को पसंद के मुताबिक बनाएं. मान्य वैल्यू light और dark हैं.

$base-theme: light;

कलर पैलेट वैरिएबल

कलर पैलेट को पसंद के मुताबिक बनाएं. इसके लिए, इन वैरिएबल में बदलाव करें. इनसे प्राइमरी, सेकंडरी, ऐक्सेंट, और चेतावनी वाले मैसेज के रंग बदले जा सकते हैं. कलर पैलेट की कैटगरी के बारे में जानकारी लेख पढ़ें.

$primary: mat-palette($mat-grey, 800, 100, 900); 
$secondary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-red); 

संख्यात्मक वैल्यू से, डिफ़ॉल्ट, हल्के, और गहरे एलिमेंट के लिए शेडिंग वैल्यू का पता चलता है. पहले से तय किए गए रंग के वैरिएबल की पहचान करने के लिए, मटेरियल थीमिंग SCSS फ़ाइल (material-theming.scss) का कॉन्टेंट देखें.

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

$primary: mat-palette($mat-green, 800, 100, 900);

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

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

फ़ॉन्ट फ़ैमिली और स्टाइल के वैरिएबल

फ़ॉन्ट फ़ैमिली और स्टाइल को पसंद के मुताबिक बनाएं.

// If using a custom font, import it by URL. 
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

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

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

टाइपोग्राफ़ी वैरिएबल

ऐंगुलर मटीरियल टाइपोग्राफ़ी को पसंद के मुताबिक बनाएं. टाइपोग्राफ़ी के हर लेवल में फ़ॉन्ट का साइज़, लाइन की ऊंचाई, और फ़ॉन्ट का वेट तय किया जाता है.

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);