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

আপনি Apigee Edge ডকুমেন্টেশন দেখছেন।
Apigee X ডকুমেন্টেশন দেখুন। তথ্য

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

নিচের বিভাগে যেভাবে বর্ণনা করা হয়েছে, সেইভাবে আপনি থিম কাস্টমাইজ, প্রিভিউ ও প্রকাশ করতে পারবেন।

থিম এডিটর এক্সপ্লোর করা

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

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

  • সাইড নেভিগেশন টুলবারে প্রকাশ করুন > পোর্টাল বিকল্প বেছে নিন, আপনার পোর্টাল বেছে নিন এবং ল্যান্ডিং পৃষ্ঠায় থিম বিকল্পে ক্লিক করুন।
  • কোনও পোর্টাল এডিট করার সময়, সবচেয়ে উপরে নেভিগেশন টুলবারে ড্রপ-ডাউন মেনু থেকে থিম বিকল্পে ক্লিক করুন।

থিম এডিটর

আগের ছবিতে হাইলাইট করা অংশ থেকে বোঝা যায় যে থিম এডিটর আপনাকে এগুলি করতে দেয়:

বেস থিম সম্পর্কে

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

Sassy Cascading Style Sheet (SCSS) ব্যবহার করে স্টাইল সংক্রান্ত নিয়ম নির্ধারণ করা হয়। SCSS হল Cascading Style Sheets (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> টেক্সট
অ্যাক্সেন্ট নেভিগেশন, লিঙ্ক ও অ্যাকসেন্ট বোতাম
সতর্ক করুন সতর্কতা ও সমস্যা

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

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

প্রাথমিক স্টাইল এডিটর ব্যবহার করে কালার প্যালেট কাস্টমাইজ করতে:

  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. ফন্ট স্টাইল পরিবর্তন করতে, ফন্ট স্টাইল বিভাগটি বড় করুন এবং প্রয়োজনীয় HTML এলিমেন্টের জন্য ফন্ট সাইজ, লাইন হাইট ও ফন্ট ওয়েট সহ স্টাইল এডিট করুন।
  4. আপনার করা পরিবর্তন সেভ করতে, সেভ করুন বিকল্পে ক্লিক করুন।
  5. প্রিভিউ প্যানেলে আপনার করা পরিবর্তন দেখুন অথবা ব্রাউজারে পোর্টালের পরিবর্তন প্রিভিউ করতে প্রিভিউ বিকল্পে ক্লিক করুন।
    মনে রাখবেন: সব পৃষ্ঠায় পরিবর্তন দেখতে, প্রিভিউ প্যানেলে আপনার পোর্টাল নেভিগেশন ক্লিক করে দেখতে পারেন।
  6. আপনার থিম প্রকাশ করতে প্রকাশ করুন বিকল্পে ক্লিক করুন। আপডেট কনফার্ম করার জন্য আপনাকে প্রম্পট করা হবে।

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

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

যেমন, ডিফল্ট ফন্ট পরিবর্তন করে Arial করতে, নিম্নলিখিত ভেরিয়েবলকে সংজ্ঞায়িত করুন:

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

কাস্টম ফন্ট ইমপোর্ট করা

Google ফন্ট (ডিফল্ট ফন্টের সেটে অন্তর্ভুক্ত নয়) বা আপনার নিজস্ব কাস্টম ফন্ট ইমপোর্ট করুন, তারপর নিচে যেভাবে বর্ণনা করা হয়েছে সেইভাবে আপনার স্টাইল শিটে কাস্টম ফন্ট রেফারেন্স করুন।

Google ফন্ট ইমপোর্ট করা

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

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

কাস্টম ফন্ট ইমপোর্ট করা

@font-face CSS নিয়ম ব্যবহার করে আপনার নিজস্ব কাস্টম ফন্ট ইমপোর্ট করুন। @font-face নিয়মে TrueType (TTF), 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
);

আপনি নিম্নলিখিত লোকেশনে পোর্টালের লোগো কাস্টমাইজ করতে পারবেন:

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

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

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

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

  1. আপনার কোম্পানির লোগোর এক বা একাধিক কপি সংগ্রহ করুন যা ব্যবহার করার উপযুক্ত হবে।
    সাজেস্ট করা সাইজের জন্য আগের টেবিল দেখুন।
  2. থিম এডিটর অ্যাক্সেস করুন।
  3. ডেস্কটপ ডিসপ্লেতে সবচেয়ে উপরের নেভিগেশন টুলবারে লোগো পরিবর্তন করতে:
    ক. ডানদিকের প্যানেলে প্রাথমিক স্টাইল বিকল্পের মধ্যে প্রাথমিক লোগো ফিল্ডের নিচে আইকনে ক্লিক করুন।
    খ. আপনার লোকাল ডিরেক্টরিতে আপনার লোগোর ডেস্কটপ ভার্সন ব্রাউজ করুন।
    গ. ফাইল আপলোড করতে খুলুন বিকল্পে ক্লিক করুন।
  4. মোবাইল ডিসপ্লেতে সবচেয়ে উপরে নেভিগেশন টুলবারে লোগো পরিবর্তন করতে:
    ক. ডানদিকের প্যানেলে প্রাথমিক স্টাইল বিকল্পের মধ্যে লোগো বিকল্প বড় করে দেখুন এবং মোবাইল লোগো ফিল্ডের মধ্যে আইকনে ক্লিক করুন।
    খ. আপনার লোকাল ডিরেক্টরিতে আপনার লোগোর মোবাইল ভার্সন ব্রাউজ করুন।
    গ. ফাইল আপলোড করতে খুলুন বিকল্পে ক্লিক করুন।
  5. বামদিকের প্যানেলে আপনার করা পরিবর্তন প্রিভিউ করতে সেভ করুন বিকল্পে ক্লিক করুন।
  6. আপনার পোর্টালে করা পরিবর্তন প্রকাশ করতে প্রকাশ করুন বিকল্পে ক্লিক করুন। প্রম্পট করা হলে অপারেশন কনফার্ম করুন।

Favicon কাস্টমাইজ করা

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

  1. আপনার কোম্পানির লোগোর একটি কপি সংগ্রহ করুন যা ফেভিকন হিসেবে ব্যবহার করার উপযুক্ত হবে।
    সাজেস্ট করা সাইজের জন্য আগের টেবিল দেখুন।
  2. থিম এডিটর অ্যাক্সেস করুন।
  3. ডানদিকের প্যানেলে প্রাথমিক স্টাইল বিকল্পের মধ্যে লোগো বিকল্প বিকল্পটি বড় করুন এবং Favicon ফিল্ডের মধ্যে আইকনে ক্লিক করুন।
  4. আপনার স্থানীয় ডিরেক্টরিতে আপনার লোগোর ফেভিকন ভার্সন ব্রাউজ করুন।
  5. ফাইল আপলোড করতে খুলুন বিকল্পে ক্লিক করুন।
  6. বামদিকের প্যানেলে আপনার করা পরিবর্তন প্রিভিউ করতে সেভ করুন বিকল্পে ক্লিক করুন।
  7. আপনার পোর্টালে করা পরিবর্তন প্রকাশ করতে প্রকাশ করুন বিকল্পে ক্লিক করুন। প্রম্পট করা হলে অপারেশন কনফার্ম করুন।

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

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

ব্যাকগ্রাউন্ডের ছবি কাস্টমাইজ করা

নিম্নলিখিত যেকোনও কাজ করে হোমপেজের ব্যাকগ্রাউন্ড ছবি কাস্টমাইজ করুন:

  • একই নাম ও আপেক্ষিক ফাইল সাইজ (৩০০০ পিক্সেল x ১৯৯৬ পিক্সেল) ব্যবহার করে অ্যাসেট ম্যানেজারে home-background.jpg ছবির আপনার নিজস্ব ভার্সন আপলোড করুন। আরও তথ্যের জন্য, আপনার অ্যাসেট ম্যানেজ করুন দেখুন।

  • উন্নত থিম এডিটর অ্যাক্সেস করে ব্যাকগ্রাউন্ড ছবির ফাইলের নাম ও এর প্যাডিং পরিবর্তন করুন এবং কাস্টম স্টাইল বিভাগে অ্যাডজাস্ট করা ভ্যালু সহ নিম্নলিখিত 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);
}

উন্নত থিম এডিটর ব্যবহার করে থিম কাস্টমাইজ করা

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

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

উন্নত থিম এডিটরের ভেরিয়েবল বিভাগে থিম ভেরিয়েবল ওভাররাইড করুন। থিম ভেরিয়েবলের তালিকার জন্য, থিম ভেরিয়েবল রেফারেন্স দেখুন।

যেমন, হেডার ও ফুটার নেভিগেশন টুলবারের উচ্চতা কাস্টমাইজ করতে, উন্নত থিম এডিটরের ভেরিয়েবল বিভাগে অ্যাডজাস্ট করা ভ্যালু সহ নিম্নলিখিত ভেরিয়েবলগুলি অন্তর্ভুক্ত করুন:

অতিরিক্ত উদাহরণের জন্য, এখানে দেখুন:

থিম ভেরিয়েবল ওভাররাইড করতে:

  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. প্রকাশ করুন বিকল্পে ক্লিক করুন।

লাইভ পোর্টালে আপনার প্রকাশিত কন্টেন্ট দেখতে, সবচেয়ে উপরে নেভিগেশন টুলবারে পোর্টালে দেখুন বিকল্পে ক্লিক করুন।

CSS স্পেসিফিকেশন সংক্রান্ত নিয়ম বোঝা

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

যেমন, আপনার 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);