‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

سفارشی‌سازی کردن زمینه

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

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

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

کاوش ویرایشگر زمینه

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

برای دسترسی به ویرایشگر زمینه:

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

ویرایشگر زمینه

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

بااستفاده از ویرایشگر زمینه سبک‌های پایه، سبک‌های پایه را به‌سرعت سفارشی‌سازی کنید، ازجمله عناصر زیر:
متغیرهای زمینه را ملغی کنید یا عناصر سبک زمینه را در ویرایشگر پیشرفته زمینه سفارشی‌سازی کنید، ازجمله (اما نه محدود به) عناصر زیر:
پیش‌دید کردن تغییرات زمینه
پیش‌دید کردن درگاه در مرورگر
زمینه را منتشر کنید در درگاه زنده شما

درباره زمینه پایه

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

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

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

برای مثال:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

‫SCSS قبل‌از اینکه محتوا در صفحه وب پرداز شود، کامپایل و به CSS قدیمی ساده تبدیل می‌شود.

برگ سبک مواد زاویه‌ای، فایل SCSS زمینه‌سازی مواد (material-theming.scss)، توسط زمینه پایه استفاده می‌شود. این برگه‌سبک متغیرها، توابع، و ترکیب‌هایی را اعلام می‌کند که می‌توانند بااستفاده از متغیرهای سفارشی و بخش‌های SCSS لغو شوند، همان‌طور که در سفارشی‌سازی زمینه بااستفاده از ویرایشگر پیشرفته زمینه توضیح داده شده است.

براساس انتخاب‌های زمینه رابط کاربری شما، تعدادی متغیر 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);

محتوای فایل موضوع‌بندی مواد SCSS واردشده (material-theming.scss) را مشاهده کنید تا متغیرهای رنگ ازپیش تعریف‌شده (مثل $mat-grey) را شناسایی کنید. مقادیر عددی به‌ترتیب نشان‌دهنده مقادیر سایه برای عناصر پیش‌فرض، روشن‌تر، و تیره‌تر است.

یا می‌توانید متغیر رنگ خودتان را ایجاد کنید. برای مثال:

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

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

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

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

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

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

به ویرایشگر زمینه دسترسی پیدا کنید.
برای تغییر خانواده قلم، مقداری را در منو کرکره‌ای قلم انتخاب کنید.
برای تغییر سبک‌های قلم، بخش سبک‌های قلم را ازهم باز کنید و سبک‌ها را، درصورت نیاز، ازجمله اندازه قلم، ارتفاع خط، و وزن قلم را برای عناصر HTML موردنظر ویرایش کنید.
برای ذخیره کردن تغییرات، روی ذخیره کلیک کنید.
تغییراتتان را در قاب پیش‌نمایش ببینید یا روی پیش‌نمایش کلیک کنید تا تغییرات درگاه را در مرورگر پیش‌نمایش کنید.
توجه: می‌توانید در قاب پیش‌نمایش، در پیمایش درگاه خود کلیک کنید تا تغییرات را در همه صفحه‌ها ببینید.
برای انتشار زمینه، روی انتشار کلیک کنید. از شما خواسته می‌شود به‌روزرسانی را تأیید کنید.

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

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

برای مثال، برای تغییر قلم پیش‌فرض به Arial، متغیر زیر را تعریف کنید:

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

وارد کردن قلم سفارشی

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

وارد کردن قلم Google

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

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

وارد کردن قلم سفارشی

بااستفاده از قانون CSS @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
);

سفارشی‌سازی نشان‌واره‌ها

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

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

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

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

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

یک یا چند نسخه از نشان‌واره شرکتتان را که برای استفاده مناسب باشد تهیه کنید.
برای اندازه‌های توصیه‌شده، به جدول قبلی مراجعه کنید.
به ویرایشگر زمینه دسترسی پیدا کنید.
برای جایگزین کردن نشان‌واره در نوارابزار پیمایش بالا در نمایشگرهای میز کار:
الف. در بخش سبک‌های پایه در قاب سمت چپ، روی در فیلد نشان‌واره اصلی کلیک کنید.
ب. در دایرکتوری محلی‌تان، نسخه رایانه‌ای نشان‌واره‌تان را مرور کنید.
ج. برای بارگذاری فایل، روی باز کردن کلیک کنید.
برای جایگزین کردن نشان‌واره در نوارابزار پیمایش بالا در نمایشگرهای تلفن همراه:
الف. در زیر سبک‌های پایه در قاب سمت چپ، گزینه‌های نشان‌واره را ازهم باز کنید و در زیر فیلد نشان‌واره تلفن همراه روی کلیک کنید.
ب. در فهرست راهنمای محلی‌تان، نسخه تلفن همراه نشان‌واره را مرور کنید.
ج. برای بارگذاری فایل، روی باز کردن کلیک کنید.
روی ذخیره کلیک کنید تا تغییراتتان را در قاب سمت راست پیش‌نمایش کنید.
برای منتشر کردن تغییرات در درگاهتان، روی انتشار کلیک کنید. وقتی درخواست شد، عملیات را تأیید کنید.

سفارشی‌سازی نماد سایت

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

نسخه‌ای از نمانام شرکتتان را که برای استفاده به‌عنوان نماد سایت مناسب باشد دریافت کنید.
برای اندازه توصیه‌شده، به جدول قبلی مراجعه کنید.
به ویرایشگر زمینه دسترسی پیدا کنید.
در بخش سبک‌های پایه در قاب سمت چپ، گزینه‌های نشان‌واره را ازهم باز کنید و در زیر فیلد نمادک روی کلیک کنید.
در فهرست راهنمای محلی‌تان، نسخه نماد وب‌سایت نشان‌واره‌تان را مرور کنید.
برای بارگذاری فایل، روی باز کردن کلیک کنید.
روی ذخیره کلیک کنید تا تغییراتتان را در قاب سمت راست پیش‌نمایش کنید.
برای منتشر کردن تغییرات در درگاهتان، روی انتشار کلیک کنید. وقتی درخواست شد، عملیات را تأیید کنید.

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

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

با تغییر دادن رنگ اصلی، همان‌طور که در سفارشی‌سازی پالت رنگ توضیح داده شده است، رنگ نوارابزار پیمایش را در سرایند و پانویس سفارشی‌سازی کنید.
با تغییر دادن سبک قلم و دکمه‌ها، همان‌طور که در سفارشی‌سازی خانواده قلم و سبک‌ها توضیح داده شده است، اندازه و سبک قلم عناصر منو را در نوارابزار پیمایش در سرایند و پابرگ سفارشی‌سازی کنید.
با دسترسی به ویرایشگر پیشرفته زمینه، ارتفاع نوارابزار پیمایش سرایند را سفارشی‌سازی کنید و متغیر زیر را با مقدار اصلاح‌شده‌تان در بخش متغیرها اضافه کنید: $layout-header-height: 64px;
با دسترسی به ویرایشگر پیشرفته زمینه، ارتفاع نوارابزار پیمایش پانویس را سفارشی‌سازی کنید و متغیر زیر را با مقدار اصلاح‌شده‌تان در بخش متغیرها اضافه کنید: $layout-footer-height: 44px;
سفارشی‌سازی کردن نشان‌واره در نوارابزار پیمایش برای نمایشگرهای رایانه و تلفن همراه.

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

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

نسخه خودتان از تصویر 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);
}

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

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

ملغی کردن متغیرهای زمینه

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

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

برای نمونه‌های بیشتر، به این موارد مراجعه کنید:

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

برای ملغی کردن متغیرهای زمینه:

دسترسی به ویرایشگر زمینه.
در قاب سمت چپ، روی پیشرفته کلیک کنید.
روی متغیرها کلیک کنید.
ابطال‌های متغیر را اضافه کنید.
برای فهرستی از متغیرهایی که می‌توانند ملغی شوند، به مرجع متغیر زمینه مراجعه کنید.
برای ذخیره کردن تغییرات، روی ذخیره کلیک کنید.
برای بستن ویرایشگر پیشرفته زمینه، روی 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">  <!-- 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>

انتشار زمینه

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

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

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

آشنایی با قوانین اختصاصی بودن «سرویس مقایسه قیمت»

استفاده از قانون !important در بیانیه عنصر سبک برای ملغی کردن بیانیه‌های دیگر به‌عنوان رویه بد درنظر گرفته می‌شود و توصیه نمی‌شود. قانون !important بر قوانین آبشاری و اختصاصی CSS تأثیر می‌گذارد و می‌تواند اشکال‌زدایی اظهارات عنصر سبک شما را دشوارتر کند.

ویژگی CSS روشی را که مرورگر برای تعیین اولویت اظهارات عنصر سبک CSS درصورت بروز تعارض استفاده می‌کند توصیف می‌کند. ویژگی CSS با اعمال وزن به یک عنصر سبک CSS خاص براساس نوع گزینشگر آن محاسبه می‌شود. هرچه گزینشگر CSS خاص‌تر باشد، وزن آن بیشتر است. برای مثال، مشخصه شناسه در محاسبات وزن بیشتری نسبت‌به انتخابگر نوع خواهد داشت.

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

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

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

مقادیر عددی به‌ترتیب نشان‌دهنده مقادیر سایه‌زنی برای عناصر پیش‌فرض، روشن‌تر، و تیره‌تر است. برای شناسایی متغیرهای رنگ ازپیش تعریف‌شده، محتوای فایل 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
);

متغیرهای نویسه‌نگاری

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

$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

وارد کردن قلم سفارشی

در برگه سبک خود به قلم سفارشی ارجاع دهید

سفارشی‌سازی نشان‌واره‌ها

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

سفارشی‌سازی نماد سایت

سفارشی‌سازی کردن نشان‌واره در صفحه «ورود به سیستم»

سفارشی‌سازی نوارابزار پیمایش

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

سفارشی‌سازی حروف‌چینی

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

ملغی کردن متغیرهای زمینه

سفارشی‌سازی عناصر سبک زمینه

ایجاد پانل تمام‌عرض در صفحه درگاه

انتشار زمینه

آشنایی با قوانین اختصاصی بودن «سرویس مقایسه قیمت»

مرجع متغیر زمینه

متغیر زمینه پایه

متغیرهای پالت رنگ

متغیرهای سبک و خانواده قلم

متغیرهای نویسه‌نگاری