এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

আপনার থিম কাস্টমাইজ করুন

আপনি Apigee Edge-এর ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন .info- তে যান।

একটি থিম একটি গ্লোবাল স্টাইল শীট নিয়ে গঠিত, যা আপনার পোর্টালের সমস্ত পৃষ্ঠার জন্য একটি অভিন্ন রূপ ও অনুভূতি প্রদান করে। একটি থিমের উদ্দেশ্য হলো আপনাকে আপনার পোর্টালের সমস্ত পৃষ্ঠার রূপ ও অনুভূতি একবারে পরিবর্তন করার সুযোগ দেওয়া।

নিম্নলিখিত বিভাগগুলিতে বর্ণিত পদ্ধতি অনুসারে আপনি আপনার থিমটি কাস্টমাইজ, প্রিভিউ এবং পাবলিশ করতে পারেন।

থিম এডিটর অন্বেষণ করুন

থিম এডিটরে আপনার পোর্টালের জন্য থিমটি কাস্টমাইজ করুন, প্রিভিউ দেখুন এবং পাবলিশ করুন।

থিম এডিটর অ্যাক্সেস করতে:

সাইড নেভিগেশন টুলবারে Publish > Portals নির্বাচন করুন, আপনার পোর্টালটি বেছে নিন এবং ল্যান্ডিং পেজে Themes- এ ক্লিক করুন।
পোর্টাল সম্পাদনা করার সময়, উপরের নেভিগেশন টুলবারের ড্রপ-ডাউন মেনু থেকে থিম- এ ক্লিক করুন।

থিম সম্পাদক

পূর্ববর্তী চিত্রে যেমনটি তুলে ধরা হয়েছে, থিম এডিটর আপনাকে নিম্নলিখিত কাজগুলো করতে সক্ষম করে:

বেসিক স্টাইল থিম এডিটর ব্যবহার করে দ্রুত বেসিক স্টাইলগুলো কাস্টমাইজ করুন, যার মধ্যে নিম্নলিখিত উপাদানগুলো অন্তর্ভুক্ত রয়েছে:
অ্যাডভান্সড থিম এডিটর- এ থিম ভেরিয়েবল ওভাররাইড করুন অথবা থিম স্টাইলের উপাদানগুলো কাস্টমাইজ করুন, যার মধ্যে নিম্নলিখিত উপাদানগুলো অন্তর্ভুক্ত (তবে এগুলোর মধ্যেই সীমাবদ্ধ নয়):
আপনার থিমের পরিবর্তনগুলির পূর্বরূপ দেখুন
ব্রাউজারে আপনার পোর্টালটির প্রিভিউ দেখুন
আপনার লাইভ পোর্টালে থিমটি প্রকাশ করুন।

মূল থিম সম্পর্কে

সাইটের চেহারা নির্ধারণকারী অধিকাংশ বেস থিম স্টাইল রুল অ্যাঙ্গুলার ম্যাটেরিয়াল ডিজাইনের উপর ভিত্তি করে তৈরি। অ্যাঙ্গুলার ম্যাটেরিয়াল ডিজাইন একটি সমন্বিত ইন্টারেক্টিভ অভিজ্ঞতা প্রদানের জন্য গ্রিড-ভিত্তিক লেআউট এবং সামঞ্জস্যপূর্ণ কম্পোনেন্ট ও স্টাইলিং ব্যবহার করে।

স্যাসি ক্যাসকেডিং স্টাইল শীট (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 কম্পাইল হয়ে সাধারণ CSS-এ রূপান্তরিত হয়।

বেস থিমটি একটি অ্যাঙ্গুলার ম্যাটেরিয়াল স্টাইলশিট, ম্যাটেরিয়াল থিমিং SCSS ফাইল ( material-theming.scss ) ব্যবহার করে। এই স্টাইলশিটটি ভেরিয়েবল, ফাংশন এবং মিক্সিন ঘোষণা করে, যেগুলোকে কাস্টম ভেরিয়েবল এবং SCSS সেকশন ব্যবহার করে ওভাররাইড করা যায়, যেমনটি "অ্যাডভান্সড থিম এডিটর ব্যবহার করে থিম কাস্টমাইজ করুন" অংশে বর্ণনা করা হয়েছে।

আপনার UI থিমের নির্বাচন অনুযায়ী, বেশ কিছু SCSS ভেরিয়েবল ঘোষণা করা হয় যা টাইপোগ্রাফি, রঙ এবং লেআউটের স্টাইল নির্ধারণ করে এবং বেস স্টাইলশিট দ্বারা ব্যবহৃত হয়। আপনি থিম ভেরিয়েবল রেফারেন্সে তালিকাভুক্ত ভেরিয়েবলগুলো ওভাররাইড করতে পারেন।

রঙের প্যালেট কাস্টমাইজ করুন

বেসিক স্টাইল এডিটর ব্যবহার করে অথবা থিম ভেরিয়েবল ওভাররাইড করে কালার প্যালেটটি কাস্টমাইজ করুন।

কালার প্যালেট ক্যাটাগরি সম্পর্কে

ইন্টিগ্রেটেড পোর্টালের কালার প্যালেট সংজ্ঞাগুলোকে নিম্নলিখিত ক্যাটাগরিগুলোতে ভাগ করা হয়েছে, যেগুলো বেস থিমে ম্যাটেরিয়াল ডিজাইন কালার স্টাইলিং ব্যবহার করে সংজ্ঞায়িত করা হয়েছে।

বিভাগ	শৈলী
প্রাথমিক	নেভিগেশন টুলবার, শিরোনাম, কার্ড হেডার এবং বোতাম
মাধ্যমিক	`<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 ) শনাক্ত করতে ইম্পোর্ট করা ম্যাটেরিয়াল থিমিং 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);

ফন্ট পরিবার এবং শৈলী কাস্টমাইজ করুন

বেসিক স্টাইল এডিটর ব্যবহার করে অথবা থিম ভেরিয়েবল ওভাররাইড করে ফন্ট ফ্যামিলি ও স্টাইল কাস্টমাইজ করুন। এছাড়াও আপনি একটি কাস্টম ফন্ট ইম্পোর্ট করতে পারেন।

বেসিক স্টাইল এডিটর ব্যবহার করে ফন্ট ফ্যামিলি ও স্টাইল কাস্টমাইজ করুন।

নিচের চিত্রে দেখানো বেসিক স্টাইল এডিটর ব্যবহার করে ফন্ট ফ্যামিলি ও স্টাইল দ্রুত কাস্টমাইজ করুন।

বেসিক স্টাইল এডিটর ব্যবহার করে ফন্ট ফ্যামিলি ও স্টাইল কাস্টমাইজ করতে:

থিম এডিটর-এ প্রবেশ করুন ।
ফন্ট ফ্যামিলি পরিবর্তন করতে, ফন্ট ড্রপ-ডাউন থেকে একটি মান নির্বাচন করুন।
ফন্ট স্টাইল পরিবর্তন করতে, 'Font styles' সেকশনটি এক্সপ্যান্ড করুন এবং প্রয়োজন অনুযায়ী কাঙ্ক্ষিত HTML এলিমেন্টগুলোর জন্য ফন্ট সাইজ, লাইন হাইট ও ফন্ট ওয়েট সহ স্টাইলগুলো এডিট করুন।
আপনার পরিবর্তনগুলো সংরক্ষণ করতে সেভ-এ ক্লিক করুন।
প্রিভিউ প্যানে আপনার পরিবর্তনগুলি দেখুন অথবা ব্রাউজারে পোর্টালের পরিবর্তনগুলি প্রিভিউ করতে প্রিভিউ-তে ক্লিক করুন।
দ্রষ্টব্য : সমস্ত পৃষ্ঠার পরিবর্তনগুলি দেখার জন্য আপনি প্রিভিউ প্যানে আপনার পোর্টাল নেভিগেশনে ক্লিক করতে পারেন।
আপনার থিমটি প্রকাশ করতে 'প্রকাশ করুন ' বোতামে ক্লিক করুন। আপডেটটি নিশ্চিত করার জন্য আপনাকে অনুরোধ করা হবে।

থিম ভেরিয়েবল ওভাররাইড করে ফন্ট ফ্যামিলি এবং স্টাইল কাস্টমাইজ করুন।

থিম ভেরিয়েবল ওভাররাইড করে ফন্ট ফ্যামিলি এবং স্টাইল কাস্টমাইজ করতে, অ্যাডভান্সড থিম এডিটরে যান এবং ভেরিয়েবলস সেকশনে এক বা একাধিক ফন্ট ফ্যামিলি ও স্টাইল ভেরিয়েবলকে পরিবর্তিত মানসহ অন্তর্ভুক্ত করুন।

উদাহরণস্বরূপ, ডিফল্ট ফন্ট Arial-এ পরিবর্তন করতে, নিম্নলিখিত ভেরিয়েবলটি সংজ্ঞায়িত করুন:

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

একটি কাস্টম ফন্ট আমদানি করুন

গুগলের এমন কোনো ফন্ট (যা ডিফল্ট ফন্টের সেটে অন্তর্ভুক্ত নয়) অথবা আপনার নিজস্ব কাস্টম ফন্ট ইম্পোর্ট করুন, তারপর নিচে বর্ণিত পদ্ধতি অনুযায়ী আপনার স্টাইল শীটে কাস্টম ফন্টটি রেফারেন্স করুন।

একটি গুগল ফন্ট আমদানি করুন

গুগল ফন্ট ইম্পোর্ট করতে, অ্যাডভান্সড থিম এডিটরে যান এবং নিচে দেখানো অনুযায়ী কাস্টম স্টাইলস সেকশনে ফন্টটি ইম্পোর্ট করুন:

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

একটি কাস্টম ফন্ট আমদানি করুন

@font-face CSS রুল ব্যবহার করে আপনার নিজস্ব কাস্টম ফন্ট ইম্পোর্ট করুন। @font-face রুলটি TrueType (TTF), Web Open Font Format (WOFF) সহ বিভিন্ন ধরণের ফাইল ফরম্যাট সমর্থন করে।

আপনার নিজস্ব কাস্টম ফন্ট ইম্পোর্ট করতে:

ঐচ্ছিকভাবে, 'একটি ফাইল আপলোড করুন' অংশে বর্ণিত পদ্ধতি অনুসারে ফন্ট ফাইলটি অ্যাসেটস ম্যানেজারে আপলোড করুন।
অ্যাডভান্সড থিম এডিটর-এ যান এবং কাস্টম স্টাইলস সেকশনে @font-face রুলটি যোগ করুন, যেখানে font-family ফন্টের নাম, url ফন্ট ফাইলের অবস্থান (এই ক্ষেত্রে, অ্যাসেটস ম্যানেজার), MyCustomFont.tff আপনার কাস্টম ফন্ট ফাইলের নাম এবং format ফন্টের ফরম্যাট নির্দিষ্ট করে।
```
@font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}
```

আপনার স্টাইল শীটে কাস্টম ফন্টটি উল্লেখ করুন।

Variables সেকশনের ফন্ট ফ্যামিলি এবং স্টাইল ভেরিয়েবলগুলোর মধ্যে যেকোনো একটিতে কাস্টম ফন্টটি রেফারেন্স করুন। উদাহরণস্বরূপ:

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

লোগোগুলি কাস্টমাইজ করুন

আপনি পোর্টালে ব্যবহৃত লোগোগুলি নিম্নলিখিত স্থানগুলিতে কাস্টমাইজ করতে পারেন:

লোগোর অবস্থান	ডিফল্ট ফাইলের আকার
ডেস্কটপ নেভিগেশন টুলবার	১৯৬ x ৩২ পিক্সেল
মোবাইল নেভিগেশন টুলবার	১৫৬ x ৩২ পিক্সেল
ব্রাউজারের অ্যাড্রেস বারে (এবং অন্যান্য স্থানে) ফেভিকন	৩২ x ৩২ পিক্সেল
সাইন ইন পৃষ্ঠা	৩৯২ x ৬৪ পিক্সেল

ডেস্কটপ এবং মোবাইল ডিসপ্লের জন্য নেভিগেশন টুলবারে লোগোটি কাস্টমাইজ করুন। আপনার ব্রাউজারের প্রস্থের উপর নির্ভর করে, আপনি লোগোটির ডেস্কটপ বা মোবাইল সংস্করণ দেখতে পারেন।

আপনি প্রাথমিক লোগোটি মুছে ফেলতে পারবেন না, কেবল প্রতিস্থাপন করতে পারবেন। আপনি যদি মোবাইল ডিসপ্লের জন্য কোনো লোগো নির্দিষ্ট না করেন, তাহলে ডিফল্টরূপে প্রাথমিক লোগোটি ব্যবহৃত হবে।

ডেস্কটপ এবং মোবাইল ডিসপ্লের জন্য নেভিগেশন টুলবারে ব্যবহৃত লোগোটি কাস্টমাইজ করতে:

আপনার কোম্পানির লোগোর এক বা একাধিক ব্যবহারযোগ্য অনুলিপি সংগ্রহ করুন।
প্রস্তাবিত মাপগুলোর জন্য পূর্ববর্তী সারণিটি দেখুন।
থিম এডিটর-এ প্রবেশ করুন ।
ডেস্কটপ ডিসপ্লেতে টপ নেভিগেশন টুলবারে লোগোটি প্রতিস্থাপন করতে:
ক. ডান প্যানে বেসিক স্টাইলস- এর অধীনে ক্লিক করুন প্রাথমিক লোগো ক্ষেত্রের অধীনে।
খ. আপনার স্থানীয় ডিরেক্টরিতে আপনার লোগোর ডেস্কটপ সংস্করণটি খুঁজুন।
গ. ফাইলটি আপলোড করতে ওপেন-এ ক্লিক করুন।
মোবাইল ডিসপ্লেতে টপ নেভিগেশন টুলবারে লোগোটি প্রতিস্থাপন করতে:
ক. ডান প্যানে Basic Styles- এর অধীনে Logo options প্রসারিত করুন এবং ক্লিক করুন মোবাইল লোগো ক্ষেত্রের নিচে।
খ. আপনার স্থানীয় ডিরেক্টরিতে আপনার লোগোর মোবাইল সংস্করণটি খুঁজুন।
গ. ফাইলটি আপলোড করতে ওপেন-এ ক্লিক করুন।
বাম দিকের প্যানেলে আপনার পরিবর্তনগুলো প্রিভিউ করতে সেভ-এ ক্লিক করুন।
আপনার পোর্টালে পরিবর্তনগুলো প্রকাশ করতে 'প্রকাশ করুন ' বোতামে ক্লিক করুন। অনুরোধ করা হলে প্রক্রিয়াটি নিশ্চিত করুন।

ফেভিকন কাস্টমাইজ করুন

ওয়েব ব্রাউজারের অ্যাড্রেস বারে (এবং অন্যান্য স্থানে) ব্যবহৃত ফেভিকনটি কাস্টমাইজ করতে:

আপনার কোম্পানির লোগোর এমন একটি কপি সংগ্রহ করুন যা ফ্যাভিকন হিসেবে ব্যবহারের জন্য উপযুক্ত হবে।
সুপারিশকৃত আকারের জন্য পূর্ববর্তী সারণিটি দেখুন।
থিম এডিটর-এ প্রবেশ করুন ।
ডান প্যানে বেসিক স্টাইলস- এর অধীনে লোগো অপশনস প্রসারিত করুন এবং ক্লিক করুন ফেভিকন ফিল্ডের অধীনে।
আপনার স্থানীয় ডিরেক্টরিতে আপনার লোগোর ফেভিকন সংস্করণটি খুঁজুন।
ফাইলটি আপলোড করতে ওপেন-এ ক্লিক করুন।
বাম দিকের প্যানেলে আপনার পরিবর্তনগুলো প্রিভিউ করতে সেভ-এ ক্লিক করুন।
আপনার পোর্টালে পরিবর্তনগুলো প্রকাশ করতে 'প্রকাশ করুন ' বোতামে ক্লিক করুন। অনুরোধ করা হলে প্রক্রিয়াটি নিশ্চিত করুন।

আপনার ডেভেলপার প্রোগ্রামের জন্য রেজিস্ট্রেশন এবং সাইন-ইন অভিজ্ঞতা কনফিগার করার সময়, 'কোম্পানির তথ্য পরিচালনা' অংশে বর্ণিত পদ্ধতি অনুযায়ী সাইন-ইন পৃষ্ঠার লোগোটি কাস্টমাইজ করুন।

ন্যাভিগেশন টুলবার কাস্টমাইজ করার জন্য নিচে কিছু দ্রুত টিপস দেওয়া হলো:

কালার প্যালেট কাস্টমাইজ করুন- এ বর্ণিত পদ্ধতি অনুযায়ী প্রাইমারি কালার পরিবর্তন করে হেডার এবং ফুটারের নেভিগেশন টুলবারের রঙ কাস্টমাইজ করুন।
"ফন্ট ফ্যামিলি এবং স্টাইল কাস্টমাইজ করুন" অংশে বর্ণিত পদ্ধতি অনুযায়ী ফন্ট এবং বাটনের স্টাইল পরিবর্তন করে হেডার ও ফুটারের নেভিগেশন টুলবারের মেনু আইটেমগুলোর ফন্ট সাইজ ও স্টাইল কাস্টমাইজ করুন।
অ্যাডভান্সড থিম এডিটর-এ গিয়ে হেডার নেভিগেশন টুলবারের উচ্চতা কাস্টমাইজ করুন এবং Variables সেকশনে আপনার অ্যাডজাস্ট করা মান সহ নিম্নলিখিত ভেরিয়েবলটি অন্তর্ভুক্ত করুন: $layout-header-height: 64px;
অ্যাডভান্সড থিম এডিটর-এ গিয়ে ফুটার নেভিগেশন টুলবারের উচ্চতা কাস্টমাইজ করুন এবং Variables সেকশনে আপনার অ্যাডজাস্ট করা মান সহ নিম্নলিখিত ভেরিয়েবলটি অন্তর্ভুক্ত করুন: $layout-footer-height: 44px;
ডেস্কটপ ও মোবাইল ডিসপ্লের জন্য নেভিগেশন টুলবারে লোগোটি কাস্টমাইজ করুন ।

পটভূমির ছবি কাস্টমাইজ করুন

নিচের যেকোনো একটি কাজ সম্পাদন করে হোম পেজের ব্যাকগ্রাউন্ড ইমেজটি কাস্টমাইজ করুন:

home-background.jpg ছবিটির আপনার নিজস্ব সংস্করণটি একই নাম এবং আপেক্ষিক ফাইল সাইজ (৩০০০ পিক্সেল x ১৯৯৬ পিক্সেল) ব্যবহার করে অ্যাসেটস ম্যানেজারে আপলোড করুন। আরও তথ্যের জন্য, আপনার অ্যাসেট পরিচালনা দেখুন।
অ্যাডভান্সড থিম এডিটর-এ প্রবেশ করে কাস্টম স্টাইলস সেকশনে সামঞ্জস্যপূর্ণ মানসহ নিম্নলিখিত 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
);

তারপর, আপনি একটি নির্দিষ্ট CSS সিলেক্টরে টাইপোগ্রাফি প্রয়োগ করতে পারেন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

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

বিকল্পভাবে, আপনি কাস্টম টাইপোগ্রাফিতে সংজ্ঞায়িত একটি নির্দিষ্ট টাইপোগ্রাফি লেভেলকে একটি CSS সিলেক্টরে প্রয়োগ করতে পারেন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

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

থিমটি প্রকাশ করুন

আপনার যোগ করা থিম এবং স্টাইল কাস্টমাইজেশনগুলো লাইভ পোর্টালে প্রকাশ করতে:

থিম এডিটর-এ প্রবেশ করুন ।
প্রকাশ করুন-এ ক্লিক করুন।

লাইভ পোর্টালে আপনার প্রকাশিত কন্টেন্ট দেখতে, উপরের নেভিগেশন টুলবারে থাকা ‘ভিউ পোর্টাল’- এ ক্লিক করুন।

CSS স্পেসিফিসিটি নিয়মগুলো বুঝুন

স্টাইল এলিমেন্ট ডিক্লারেশনে অন্য ডিক্লারেশনকে ওভাররাইড করার জন্য !important রুল ব্যবহার করা একটি খারাপ অভ্যাস হিসেবে বিবেচিত এবং এর সুপারিশ করা হয় না। !important রুল CSS-এর ক্যাসকেডিং এবং স্পেসিফিসিটি রুলকে প্রভাবিত করে এবং আপনার স্টাইল এলিমেন্ট ডিক্লারেশন ডিবাগ করা আরও কঠিন করে তুলতে পারে।

যখন কোনো দ্বন্দ্ব দেখা দেয়, তখন CSS স্টাইল এলিমেন্ট ডিক্লারেশনগুলোর অগ্রাধিকার নির্ধারণের জন্য ব্রাউজার যে পদ্ধতি ব্যবহার করে, CSS স্পেসিফিসিটি তা বর্ণনা করে। একটি নির্দিষ্ট CSS স্টাইল এলিমেন্ট ডিক্লারেশনের সিলেক্টর টাইপের উপর ভিত্তি করে সেটিতে একটি ওয়েট বা গুরুত্ব আরোপ করার মাধ্যমে CSS স্পেসিফিসিটি গণনা করা হয়। CSS সিলেক্টরটি যত বেশি সুনির্দিষ্ট হয়, তার ওয়েট তত বেশি হয়। উদাহরণস্বরূপ, গণনার ক্ষেত্রে একটি টাইপ সিলেক্টরের চেয়ে একটি ID অ্যাট্রিবিউটকে বেশি ওয়েট দেওয়া হবে।

উদাহরণস্বরূপ, যদি আপনি আপনার CSS কোডে নিম্নলিখিত স্টাইল এলিমেন্টগুলো সংজ্ঞায়িত করেন, তাহলে প্যারাগ্রাফ এলিমেন্টটি লাল রঙে চিহ্নিত হবে, কারণ একটি div এলিমেন্টের ভেতরের p স্টাইল এলিমেন্টের ঘোষণাটি p স্টাইল এলিমেন্টের ঘোষণার চেয়ে বেশি সুনির্দিষ্ট।

div p { color: red }  ← More specific  
p { color: blue }

একইভাবে, যদি আপনি আপনার CSS কোডে নিম্নলিখিত স্টাইল এলিমেন্ট ডিক্লারেশনগুলো সংজ্ঞায়িত করেন, তাহলে <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);

আপনার থিম কাস্টমাইজ করুন

থিম এডিটর অন্বেষণ করুন

মূল থিম সম্পর্কে

রঙের প্যালেট কাস্টমাইজ করুন

কালার প্যালেট ক্যাটাগরি সম্পর্কে

বেসিক স্টাইল এডিটর ব্যবহার করে কালার প্যালেটটি কাস্টমাইজ করুন।

থিম ভেরিয়েবল ওভাররাইড করে কালার প্যালেট কাস্টমাইজ করুন।

ফন্ট পরিবার এবং শৈলী কাস্টমাইজ করুন

বেসিক স্টাইল এডিটর ব্যবহার করে ফন্ট ফ্যামিলি ও স্টাইল কাস্টমাইজ করুন।

থিম ভেরিয়েবল ওভাররাইড করে ফন্ট ফ্যামিলি এবং স্টাইল কাস্টমাইজ করুন।

একটি কাস্টম ফন্ট আমদানি করুন

একটি গুগল ফন্ট আমদানি করুন

একটি কাস্টম ফন্ট আমদানি করুন

আপনার স্টাইল শীটে কাস্টম ফন্টটি উল্লেখ করুন।

লোগোগুলি কাস্টমাইজ করুন

ডেস্কটপ এবং মোবাইল ডিসপ্লের জন্য নেভিগেশন টুলবারে লোগোটি কাস্টমাইজ করুন।

ফেভিকন কাস্টমাইজ করুন

সাইন ইন পেজে লোগোটি কাস্টমাইজ করুন

নেভিগেশন টুলবার কাস্টমাইজ করুন

পটভূমির ছবি কাস্টমাইজ করুন

টাইপোগ্রাফি কাস্টমাইজ করুন

অ্যাডভান্সড থিম এডিটর ব্যবহার করে থিমটি কাস্টমাইজ করুন।

থিম ভেরিয়েবল ওভাররাইড করুন

থিম শৈলীর উপাদানগুলি কাস্টমাইজ করুন

পোর্টাল পৃষ্ঠায় একটি পূর্ণ-প্রস্থের প্যানেল তৈরি করুন

থিমটি প্রকাশ করুন

CSS স্পেসিফিসিটি নিয়মগুলো বুঝুন

থিম ভেরিয়েবল রেফারেন্স

মূল থিম ভেরিয়েবল

রঙের প্যালেট ভেরিয়েবল

ফন্ট পরিবার এবং শৈলী ভেরিয়েবল

টাইপোগ্রাফি ভেরিয়েবল