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

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

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

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

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

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

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

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

थीम एडिटर

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

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

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

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

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

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

// 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; }

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

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

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

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

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

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

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

कैटगरी स्टाइल
प्राइमरी नेविगेशन टूलबार, हेडिंग, कार्ड हेडर, और बटन
Secondary <pre> और <code> टेक्स्ट
लहजा नेविगेशन, लिंक, और ऐक्सेंट वाले बटन
चेतावनी दें चेतावनियां और गड़बड़ियां

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

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

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

  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 (TTF), वेब ओपन फ़ॉन्ट फ़ॉर्मैट (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
);

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

लोगो की जगह फ़ाइल का डिफ़ॉल्ट साइज़
डेस्कटॉप पर नेविगेशन टूलबार 196 x 32 पिक्सल
मोबाइल नेविगेशन टूलबार156 x 32 पिक्सल
ब्राउज़र के पता बार में फ़ेविकॉन (और अन्य जगहों पर)32 x 32 पिक्सल
साइन इन पेज392 x 64 पिक्सल

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     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);