इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

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

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

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

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

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

थीम एडिटर

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

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

मुख्य थीम के बारे में जानकारी

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

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

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

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

// 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) का इस्तेमाल बेस थीम में किया जाता है. इस स्टाइलशीट में ऐसे वैरिएबल, फ़ंक्शन, और मिक्सिन के बारे में जानकारी दी जाती है जिन्हें कस्टम वैरिएबल और एससीएसएस सेक्शन का इस्तेमाल करके बदला जा सकता है. इसके बारे में, बेहतर थीम एडिटर का इस्तेमाल करके थीम को पसंद के मुताबिक बनाना में बताया गया है.

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

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

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

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

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

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

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

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

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

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

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

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

$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) की पहचान करने के लिए, इंपोर्ट की गई सामग्री की थीम वाली एससीएसएस फ़ाइल (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);

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

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

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

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

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

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

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

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

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

$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) वगैरह शामिल हैं.

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

इसके अलावा, फ़ाइल अपलोड करें वाले लेख में बताए गए तरीके का इस्तेमाल करके, ऐसेट मैनेजर में फ़ॉन्ट फ़ाइल अपलोड करें.
बेहतर थीम एडिटर ऐक्सेस करें और कस्टम स्टाइल सेक्शन में @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 पिक्सल

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

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

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

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

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

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

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

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

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

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

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

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

उसी नाम और फ़ाइल साइज़ (3000 पिक्सल x 1996 पिक्सल) का इस्तेमाल करके, ऐसेट मैनेजर में home-background.jpg इमेज का अपना वर्शन अपलोड करें. ज़्यादा जानकारी के लिए, अपनी ऐसेट मैनेज करना लेख पढ़ें.
बेहतर थीम एडिटर को ऐक्सेस करके और कस्टम स्टाइल सेक्शन में अडजस्ट की गई वैल्यू के साथ नीचे दिए गए एससीएसएस को शामिल करके, बैकग्राउंड की इमेज के फ़ाइल नाम और उसकी पैडिंग में बदलाव करें:
```
#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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पोर्टल पेज में पूरी चौड़ाई वाला पैनल बनाना

पोर्टल पेज में पूरी चौड़ाई वाला पैनल बनाने के लिए:

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

.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.
}

पोर्टल पेज के कॉन्टेंट में बदलाव करें, ताकि यह <div> एलिमेंट शामिल किया जा सके. ऐसा करने के लिए, पेज एडिटर का इस्तेमाल करके पोर्टल का कॉन्टेंट डेवलप करें लेख में बताया गया तरीका अपनाएं:
```
<div class="full-width__container">
  <div class="full-width__centered">
    <div class="full-width__content">  
      <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>
```

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

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

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

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

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

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

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

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

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

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

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

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

पूरी साइट में इस्तेमाल की गई मुख्य थीम के फ़ोरग्राउंड के रंगों को पसंद के मुताबिक बनाएं. मान्य वैल्यू 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);

न्यूमेरिक वैल्यू, डिफ़ॉल्ट, हल्के, और गहरे रंग वाले एलिमेंट के लिए शेडिंग वैल्यू दिखाती हैं. पहले से तय कलर वैरिएबल की पहचान करने के लिए, सामग्री की थीम वाली एससीएसएस फ़ाइल (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);

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

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

मुख्य थीम के बारे में जानकारी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पोर्टल पेज में पूरी चौड़ाई वाला पैनल बनाना

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

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

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

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

रंग पटल वैरिएबल

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

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