تم خود را سفارشی کنید

شما در حال مشاهده مستندات Apigee Edge هستید.
به مستندات Apigee X مراجعه کنید . اطلاعات

یک قالب شامل یک شیوه‌نامه‌ی کلی است که ظاهر و حس یکسانی را برای تمام صفحات پورتال شما فراهم می‌کند. هدف یک قالب این است که به شما امکان دهد ظاهر و حس را در تمام صفحات پورتال خود به طور همزمان تغییر دهید.

شما می‌توانید قالب خود را سفارشی‌سازی، پیش‌نمایش و منتشر کنید، همانطور که در بخش‌های بعدی توضیح داده شده است.

ویرایشگر قالب را بررسی کنید

قالب پورتال خود را در ویرایشگر قالب سفارشی‌سازی، پیش‌نمایش و منتشر کنید.

برای دسترسی به ویرایشگر قالب:

  • در نوار ابزار ناوبری کناری، گزینه انتشار > پورتال‌ها را انتخاب کنید، پورتال خود را انتخاب کنید و در صفحه فرود روی تم‌ها کلیک کنید.
  • هنگام ویرایش پورتال، روی تم‌ها در منوی کشویی در نوار ابزار ناوبری بالا کلیک کنید.

ویرایشگر تم

همانطور که در شکل قبلی مشخص شده است، ویرایشگر قالب شما را قادر می‌سازد تا:

درباره قالب پایه

اکثر قوانین سبک قالب پایه که ظاهر سایت را تعریف می‌کنند، مبتنی بر طراحی متریال انگولار هستند. طراحی متریال انگولار از طرح‌بندی‌های مبتنی بر شبکه و اجزا و سبک‌بندی‌های سازگار برای ارائه یک تجربه تعاملی یکپارچه استفاده می‌کند.

قوانین سبک با استفاده از Sassy Cascading Style Sheet (SCSS) تعریف می‌شوند. SCSS مجموعه‌ای از Cascading Style Sheets (CSS) است که مزایای زیر را ارائه می‌دهد:

  • متغیرهای سراسری که می‌توانند در سراسر شیوه‌نامه دوباره استفاده شوند.
  • قوانین تو در تو برای صرفه‌جویی در زمان توسعه‌ی شیوه‌نامه.
  • توانایی ایجاد mixinها و توابع

برای مثال:

// 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 ) از نوع angular material stylesheet توسط تم پایه استفاده می‌شود. این فایل شامل متغیرها، توابع و mixinهایی است که می‌توانند با استفاده از متغیرهای سفارشی و بخش‌های SCSS، همانطور که در بخش «سفارشی‌سازی تم با استفاده از ویرایشگر پیشرفته تم» توضیح داده شده است، لغو شوند.

بر اساس انتخاب‌های تم رابط کاربری شما، تعدادی متغیر SCSS تعریف می‌شوند که تایپوگرافی، رنگ و سبک‌های طرح‌بندی را تعریف می‌کنند و توسط stylesheet پایه مصرف می‌شوند. می‌توانید متغیرهای ذکر شده در مرجع متغیر تم را لغو کنید .

پالت رنگ را سفارشی کنید

پالت رنگ را با استفاده از ویرایشگر سبک‌های پایه یا با لغو متغیرهای تم، سفارشی کنید.

درباره دسته بندی پالت رنگ

تعاریف پالت رنگ برای پورتال یکپارچه به دسته‌های زیر گروه‌بندی می‌شوند که با استفاده از سبک‌دهی رنگ متریال دیزاین در قالب پایه تعریف می‌شوند.

دسته بندی سبک‌ها
اولیه نوارهای ابزار ناوبری، سرتیترها، سرتیترهای کارت و دکمه‌ها
ثانویه متن‌های <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. برای تغییر خانواده فونت، مقداری را در منوی کشویی Font انتخاب کنید.
  3. برای تغییر سبک‌های فونت، بخش سبک‌های فونت را باز کنید و سبک‌ها را در صورت نیاز، از جمله اندازه فونت، ارتفاع خط و ضخامت فونت برای عناصر HTML مورد نظر، ویرایش کنید.
  4. برای ذخیره تغییرات، روی ذخیره کلیک کنید.
  5. تغییرات خود را در پنجره پیش‌نمایش مشاهده کنید یا برای پیش‌نمایش تغییرات پورتال در مرورگر، روی پیش‌نمایش کلیک کنید.
    توجه : می‌توانید در پنل پیش‌نمایش، روی ناوبری پورتال خود کلیک کنید تا تغییرات را در تمام صفحات مشاهده کنید.
  6. برای انتشار قالب خود، روی انتشار کلیک کنید. از شما خواسته می‌شود که به‌روزرسانی را تأیید کنید.

سفارشی‌سازی خانواده فونت و سبک‌ها با لغو متغیرهای تم

برای سفارشی‌سازی خانواده فونت و سبک‌ها با لغو متغیرهای تم، به ویرایشگر پیشرفته تم دسترسی پیدا کنید و یک یا چند متغیر خانواده فونت و سبک را با مقادیر تنظیم‌شده در بخش متغیرها وارد کنید.

برای مثال، برای تغییر فونت پیش‌فرض به 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) و موارد دیگر پشتیبانی می‌کند.

برای وارد کردن فونت دلخواه خود:

  1. در صورت تمایل، فایل فونت را همانطور که در بخش «بارگذاری فایل» توضیح داده شده است، در مدیریت فایل‌ها آپلود کنید.

  2. به ویرایشگر پیشرفته قالب دسترسی پیدا کنید و دستور @font-face را به بخش Custom Styles اضافه کنید، که در آن font-family نام فونت را مشخص می‌کند، url محل فایل فونت (در این مورد، assets manager) را مشخص می‌کند، MyCustomFont.tff نام فایل فونت سفارشی شما است و format فرمت فونت را مشخص می‌کند.

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

فونت سفارشی را در شیوه‌نامه خود ارجاع دهید

فونت سفارشی را در یکی از متغیرهای خانواده فونت و سبک در بخش متغیرها ارجاع دهید. برای مثال:

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

شما می‌توانید لوگوهای استفاده شده در پورتال را در مکان‌های زیر سفارشی کنید:

محل قرارگیری لوگو اندازه پیش‌فرض فایل
نوار ابزار ناوبری دسکتاپ ۱۹۶ در ۳۲ پیکسل
نوار ابزار ناوبری موبایل ۱۵۶ در ۳۲ پیکسل
فاوآیکون در نوار آدرس مرورگر (و سایر مکان‌ها) ۳۲ در ۳۲ پیکسل
صفحه ورود ۳۹۲ در ۶۴ پیکسل

لوگو را در نوار ابزار ناوبری برای نمایش در دسکتاپ و موبایل برش دهید. بسته به عرض مرورگر شما، ممکن است نسخه دسکتاپ یا موبایل لوگو را مشاهده کنید.

شما نمی‌توانید لوگوی اصلی را حذف کنید، فقط می‌توانید آن را جایگزین کنید. اگر لوگویی برای نمایش موبایل مشخص نکنید، لوگوی اصلی به طور پیش‌فرض استفاده می‌شود.

برای سفارشی‌سازی لوگوی مورد استفاده در نوار ابزار ناوبری برای نمایشگرهای دسکتاپ و موبایل:

  1. یک یا چند کپی از لوگوی شرکت خود که برای استفاده مناسب باشد، تهیه کنید.
    برای اندازه‌های توصیه‌شده به جدول قبلی مراجعه کنید.
  2. به ویرایشگر قالب دسترسی پیدا کنید .
  3. برای جایگزینی لوگو در نوار ابزار ناوبری بالا در نمایشگرهای دسکتاپ :
    الف) در پنل سمت راست، زیر Basic Styles کلیک کنید. زیر فیلد لوگوی اصلی .
    ب. نسخه دسکتاپ لوگوی خود را در دایرکتوری محلی خود جستجو کنید.
    ج. برای آپلود فایل، روی «باز کردن» کلیک کنید.
  4. برای جایگزینی لوگو در نوار ابزار ناوبری بالا در نمایشگرهای تلفن همراه :
    الف) در قسمت Basic Styles در پنل سمت راست، گزینه‌های Logo را باز کرده و کلیک کنید. زیر فیلد لوگوی موبایل .
    ب. نسخه موبایل لوگوی خود را در فهرست محلی خود جستجو کنید.
    ج. برای آپلود فایل، روی «باز کردن» کلیک کنید.
  5. برای پیش‌نمایش تغییرات خود در پنل سمت چپ، روی ذخیره کلیک کنید.
  6. برای انتشار تغییرات در پورتال خود، روی انتشار کلیک کنید. در صورت درخواست، عملیات را تأیید کنید.

فاویکون را سفارشی کنید

برای سفارشی‌سازی فاوآیکون مورد استفاده در نوار آدرس مرورگر وب (و سایر مکان‌ها):

  1. یک کپی از لوگوی شرکت خود تهیه کنید که برای استفاده به عنوان فاوآیکون مناسب باشد.
    برای اندازه توصیه شده به جدول قبلی مراجعه کنید.
  2. به ویرایشگر قالب دسترسی پیدا کنید .
  3. در قسمت Basic Styles در پنل سمت راست، گزینه‌های Logo را باز کنید و کلیک کنید. زیر فیلد فاوآیکون .
  4. نسخه فاوآیکون لوگوی خود را در فهرست محلی خود جستجو کنید.
  5. برای آپلود فایل، روی Open کلیک کنید.
  6. برای پیش‌نمایش تغییرات خود در پنل سمت چپ، روی ذخیره کلیک کنید.
  7. برای انتشار تغییرات در پورتال خود، روی انتشار کلیک کنید. در صورت درخواست، عملیات را تأیید کنید.

هنگام پیکربندی تجربه ثبت نام و ورود به سیستم برای برنامه توسعه‌دهنده خود، همانطور که در مدیریت اطلاعات شرکت توضیح داده شده است، لوگوی صفحه ورود را سفارشی کنید.

در ادامه چند نکته سریع برای سفارشی‌سازی نوار ابزار ناوبری ارائه شده است:

تصویر پس زمینه را سفارشی کنید

با انجام هر یک از کارهای زیر، تصویر پس زمینه را در صفحه اصلی سفارشی کنید:

  • نسخه خودتان از تصویر 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. در پنل سمت راست، روی Advanced کلیک کنید.
  3. روی متغیرها کلیک کنید.
  4. متغیرهای لغو شده خود را اضافه کنید.
    برای فهرستی از متغیرهایی که می‌توانند لغو شوند، به مرجع متغیر قالب مراجعه کنید.
  5. برای ذخیره تغییرات، روی ذخیره کلیک کنید.
  6. برای بستن ویرایشگر پیشرفته قالب، روی x کلیک کنید.
  7. تغییرات خود را در پنجره پیش‌نمایش مشاهده کنید یا برای پیش‌نمایش تغییرات پورتال در مرورگر، روی پیش‌نمایش کلیک کنید. توجه : می‌توانید در پنجره پیش‌نمایش، روی پیمایش پورتال خود کلیک کنید تا تغییرات را در تمام صفحات مشاهده کنید.
  8. برای انتشار قالب خود، روی انتشار کلیک کنید. از شما خواسته می‌شود که به‌روزرسانی را تأیید کنید.

سفارشی‌سازی عناصر سبک قالب

عناصر سبک قالب را مستقیماً در بخش سبک‌های سفارشی ویرایشگر پیشرفته قالب سفارشی کنید.

برای مثال، برای تغییر رنگ دکمه‌ی «ایجاد» در صفحه‌ی «برنامه‌ی جدید» که هنگام ثبت برنامه‌ها در پورتال ظاهر می‌شود، عنصر سبک تم زیر را با مقداری تنظیم‌شده وارد کنید: 

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

همچنین به سفارشی‌سازی تصویر پس‌زمینه مراجعه کنید.

برای سفارشی‌سازی عناصر سبک قالب:

  1. به ویرایشگر قالب دسترسی پیدا کنید .
  2. در پنل سمت راست، روی Advanced کلیک کنید.
  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 خاص‌تر باشد، وزن آن بیشتر است. به عنوان مثال، به یک ویژگی ID در محاسبه وزن بالاتری نسبت به یک انتخابگر نوع داده می‌شود.

برای مثال، اگر عناصر استایل زیر را در کد CSS خود تعریف کنید، عنصر پاراگراف به رنگ قرمز در خواهد آمد زیرا اعلان عنصر استایل p درون یک عنصر div خاص‌تر از اعلان عنصر استایل p است. 

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

به طور مشابه، اگر اعلان‌های عنصر style زیر را در کد CSS خود تعریف کنید، هر متنی که در تگ‌های <div class="test"></div> قرار گیرد، به رنگ آبی در خواهد آمد، زیرا اعلان style ویژگی id در یک عنصر div خاص‌تر از اعلان عنصر style 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);