تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

تخصيص المظهر

أنت الآن بصدد الاطّلاع على مستندات Apigee Edge.
انتقِل إلى مستندات Apigee X. info

يتألف المظهر من ورقة أنماط عامة توفّر مظهرًا موحّدًا لجميع الصفحات في البوابة. الهدف من المظهر هو السماح لك بتغيير الشكل العام لجميع صفحات البوابة في وقت واحد.

يمكنك تخصيص المظهر ومعاينته ونشره، كما هو موضّح في الأقسام التالية.

استكشاف "محرّر المظاهر"

يمكنك تخصيص تصميم البوابة ومعاينته ونشره في أداة تعديل التصميم.

للوصول إلى محرِّر المظهر، اتّبِع الخطوات التالية:

انقر على نشر > البوابات في شريط أدوات التنقّل الجانبي، واختَر البوابة، ثم انقر على المظاهر في الصفحة المقصودة.
عند تعديل بوابة، انقر على المظاهر في القائمة المنسدلة في شريط أدوات التنقّل العلوي.

محرّر المظاهر

كما هو موضّح في الشكل السابق، تتيح لك أداة تعديل المظهر إجراء ما يلي:

يمكنك تخصيص الأنماط الأساسية بسرعة باستخدام أداة تعديل المظهر للأنماط الأساسية، بما في ذلك العناصر التالية:
تجاوز متغيرات المظهر أو تخصيص عناصر نمط المظهر في محرِّر المظهر المتقدّم، بما في ذلك (على سبيل المثال لا الحصر) العناصر التالية:
معاينة التغييرات التي أجريتها على المظهر
معاينة البوابة في متصفّح
نشر المظهر على البوابة المباشرة

لمحة عن المظهر الأساسي

تستند غالبية قواعد تصميم المظهر الأساسي التي تحدّد مظهر الموقع الإلكتروني إلى تصميم Angular Material. يستخدم تصميم Angular Material تخطيطات مستندة إلى شبكة ومكوّنات وأساليب متّسقة لتوفير تجربة تفاعلية موحَّدة.

يتم تحديد قواعد النمط باستخدام صفحات الأنماط المتتالية (SCSS). ‫SCSS هي مجموعة فرعية من صفحات الأنماط المتتالية (CSS)، وتوفّر المزايا التالية:

متغيّرات عامة يمكن إعادة استخدامها في جميع أنحاء ورقة الأنماط
قواعد متداخلة لتوفير وقت تطوير أوراق الأنماط
إمكانية إنشاء mixins ودوال

على سبيل المثال:

// 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 (material-theming.scss) وهو عبارة عن ورقة أنماط Angular Material. تحدّد ورقة الأنماط هذه المتغيرات والدوال وعناصر Mixin التي يمكن إلغاؤها باستخدام المتغيرات المخصّصة وأقسام SCSS، كما هو موضّح في تخصيص المظهر باستخدام أداة تعديل المظهر المتقدّمة.

استنادًا إلى اختيارات مظهر واجهة المستخدم، يتم تعريف عدد من متغيرات SCSS التي تحدّد أنماط خطوط الطباعة والألوان والتصميم، ويتم استخدامها من خلال ورقة الأنماط الأساسية. يمكنك تجاهل المتغيرات المُدرَجة في مرجع متغيرات المظهر.

تخصيص لوحة الألوان

خصِّص لوحة الألوان باستخدام محرّر الأنماط الأساسية أو من خلال تجاوز متغيرات التصميم.

لمحة عن فئات لوحات الألوان

يتم تجميع تعريفات لوحة الألوان للبوابة المدمجة في الفئات التالية، والتي يتم تحديدها باستخدام تصميم ألوان Material Design في المظهر الأساسي.

Category (الفئة)	الأنماط
أساسي	أشرطة أدوات التنقّل والعناوين وعناوين البطاقات والأزرار
الثانوية	نص `<pre>` و`<code>`
Accent	التنقّل والروابط والأزرار المميزة
تحذير	التحذيرات والأخطاء

تخصيص لوحة الألوان باستخدام أداة تعديل الأنماط الأساسية

يمكنك تخصيص لوحات الألوان الأساسية وألوان التمييز بسرعة باستخدام محرّر الأنماط الأساسية.

لتخصيص لوحة الألوان باستخدام أداة تعديل الأنماط الأساسية، اتّبِع الخطوات التالية:

الوصول إلى محرِّر المظهر
لتخصيص اللون الأساسي، اختَر لونًا من القائمة المنسدلة اللون الأساسي أو انقر على مخصّص وأدخِل قيمة لون سداسي عشري مخصّص في مربّع النص.
لتخصيص لون التمييز، اختَر لونًا من القائمة المنسدلة لون التمييز أو انقر على مخصّص وأدخِل قيمة لون سداسي عشري مخصّص في مربّع النص.
انقر على حفظ لحفظ التغييرات.
يمكنك الاطّلاع على التغييرات في جزء المعاينة أو النقر على معاينة لمعاينة تغييرات البوابة في المتصفّح.
ملاحظة: يمكنك النقر على عناصر التنقّل في البوابة في لوحة المعاينة للاطّلاع على التغييرات في جميع الصفحات.
انقر على نشر لنشر التصميم. سيُطلب منك تأكيد التعديل.

تخصيص لوحة الألوان من خلال إلغاء متغيرات المظهر

لتخصيص لوحة الألوان من خلال تجاهل متغيرات المظهر، يمكنك الوصول إلى أداة تعديل المظهر المتقدّمة وتضمين واحد أو أكثر من المتغيرات التالية مع القيم المعدَّلة في قسم المتغيرات لتغيير ألوان الرسائل الأساسية أو الثانوية أو المميزة أو التحذيرية، على التوالي. اطّلِع على لمحة عن فئات لوحات الألوان.

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

استيراد خط مخصّص

استورِد خطك المخصّص باستخدام قاعدة ‎@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')
}
```

الإشارة إلى الخط المخصّص في ورقة الأنماط

أشِر إلى الخط المخصّص في أحد متغيّرات مجموعة الخطوط ونمطها في قسم المتغيّرات. على سبيل المثال:

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

تخصيص الشعارات

يمكنك تخصيص الشعارات المستخدَمة في البوابة الإلكترونية في المواقع التالية:

موقع الشعار	حجم الملف التلقائي
شريط أدوات التنقّل على الكمبيوتر	‫32 × 196 بكسل
شريط أدوات التنقّل على الأجهزة الجوّالة	‫156 × 32 بكسل
الرمز المفضّل في شريط عناوين المتصفّح (والمواقع الأخرى)	‫32 × 32 بكسل
صفحة تسجيل الدخول	‫392 × 64 بكسل

تخصيص الشعار في شريط أدوات التنقّل للعرض على أجهزة الكمبيوتر والأجهزة الجوّالة استنادًا إلى عرض المتصفّح، قد يظهر لك إصدار الشعار المتوافق مع الكمبيوتر المكتبي أو مع الأجهزة الجوّالة.

لا يمكنك حذف الشعار الأساسي، بل يمكنك استبداله فقط. إذا لم تحدّد شعارًا للعرض على الأجهزة الجوّالة، سيتم استخدام الشعار الأساسي تلقائيًا.

لتخصيص الشعار المستخدَم في شريط أدوات التنقّل على أجهزة الكمبيوتر والأجهزة الجوّالة، اتّبِع الخطوات التالية:

احصل على نسخة واحدة أو أكثر من شعار شركتك تكون مناسبة للاستخدام.
راجِع الجدول السابق لمعرفة الأحجام المقترَحة.
الوصول إلى محرِّر المظهر
لاستبدال الشعار في شريط أدوات التنقّل العلوي على شاشات الكمبيوتر:
أ. ضمن الأنماط الأساسية في اللوحة اليمنى، انقر على ضمن حقل الشعار الأساسي.
ب. ابحث عن نسخة الموقع الإلكتروني المخصّصة لأجهزة الكمبيوتر لشعارك في الدليل المحلي.
جـ. انقر على فتح لتحميل الملف.
لاستبدال الشعار في شريط أدوات التنقّل العلوي على شاشات الأجهزة الجوّالة، اتّبِع الخطوات التالية:
أ. ضمن الأنماط الأساسية في اللوحة اليمنى، وسِّع خيارات الشعار وانقر على ضمن حقل شعار الأجهزة الجوّالة.
ب. ابحث عن نسخة شعارك المتوافقة مع الأجهزة الجوّالة في الدليل المحلي.
جـ. انقر على فتح لتحميل الملف.
انقر على حفظ لمعاينة التغييرات في اللوحة اليمنى.
انقر على نشر لنشر التغييرات على البوابة. أكِّد العملية عندما يُطلب منك ذلك.

تخصيص الرمز المفضّل

لتخصيص الرمز المفضّل المستخدَم في شريط العناوين في متصفّح الويب (وفي مواقع أخرى):

احصل على نسخة من شعار شركتك تكون مناسبة للاستخدام كرمز مفضّل.
راجِع الجدول السابق لمعرفة الحجم المقترَح.
الوصول إلى محرِّر المظهر
ضمن الأنماط الأساسية في اللوحة اليمنى، وسِّع خيارات الشعار وانقر على ضمن حقل رمز الموقع.
ابحث عن إصدار الرمز المفضّل من شعارك في الدليل المحلي.
انقر على فتح لتحميل الملف.
انقر على حفظ لمعاينة التغييرات في اللوحة اليمنى.
انقر على نشر لنشر التغييرات على البوابة. أكِّد العملية عندما يُطلب منك ذلك.

تخصيص الشعار في صفحة "تسجيل الدخول" عند إعداد تجربة التسجيل وتسجيل الدخول في برنامج المطوّرين، كما هو موضّح في مقالة إدارة معلومات الشركة

في ما يلي بعض النصائح السريعة لتخصيص شريط أدوات التنقّل:

خصِّص لون شريط أدوات التنقّل في الرأس والتذييل من خلال تغيير اللون الأساسي، كما هو موضّح في تخصيص لوحة الألوان.
خصِّص حجم الخط ونمطه لعناصر القائمة في شريط أدوات التنقّل في الرأس والتذييل من خلال تغيير نمط الخط والأزرار، كما هو موضّح في تخصيص مجموعة الخطوط والأنماط.
خصِّص ارتفاع شريط أدوات التنقّل في العنوان من خلال الوصول إلى أداة تعديل المظهر المتقدّمة وأدرِج المتغيّر التالي مع القيمة المعدَّلة في قسم المتغيّرات: $layout-header-height: 64px;
يمكنك تخصيص ارتفاع شريط أدوات التنقّل في التذييل من خلال الوصول إلى أداة تعديل المظهر المتقدّمة وتضمين المتغيّر التالي مع القيمة المعدّلة في قسم المتغيّرات: $layout-footer-height: 44px;
تخصيص الشعار في شريط أدوات التنقّل على أجهزة الكمبيوتر والأجهزة الجوّالة

تخصيص صورة الخلفية

يمكنك تخصيص صورة الخلفية على الصفحة الرئيسية من خلال تنفيذ أيّ من المهام التالية:

حمِّل نسختك الخاصة من صورة home-background.jpg إلى "مدير مواد العرض" باستخدام الاسم وحجم الملف النسبي نفسه (3000 بكسل × 1996 بكسل). لمزيد من المعلومات، يُرجى الاطّلاع على إدارة مواد العرض.
عدِّل اسم ملف صورة الخلفية ومساحة الحشو من خلال الوصول إلى محرِّر المظهر المتقدّم وتضمين 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>

نشر المظهر

لنشر التخصيصات التي أضفتها إلى المظهر والنمط في البوابة المباشرة، اتّبِع الخطوات التالية:

الوصول إلى محرِّر المظهر
انقر على نشر.

للاطّلاع على المحتوى المنشور في البوابة المباشرة، انقر على عرض البوابة في شريط أدوات التنقّل العلوي.

فهم قواعد التحديد في CSS

يُعدّ استخدام قاعدة !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> باللون الأزرق لأنّ إعلان نمط سمة المعرّف داخل عنصر 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 (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
);

متغيّرات أسلوب الخط

تخصيص أسلوب الخط في Angular 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

استيراد خط مخصّص

الإشارة إلى الخط المخصّص في ورقة الأنماط

تخصيص الشعارات

تخصيص الشعار في شريط أدوات التنقّل على أجهزة الكمبيوتر والأجهزة الجوّالة

تخصيص الرمز المفضّل

تخصيص الشعار في صفحة "تسجيل الدخول"

تخصيص شريط أدوات التنقّل

تخصيص صورة الخلفية

تخصيص أسلوب الخط

تخصيص المظهر باستخدام أداة تعديل المظهر المتقدّمة

إلغاء متغيرات المظهر

تخصيص عناصر نمط المظهر

إنشاء لوحة بعرض الصفحة الكامل في صفحة بوابة

نشر المظهر

فهم قواعد التحديد في CSS

مرجع متغيّر المظهر

متغيّر المظهر الأساسي

متغيرات لوحة الألوان

متغيرات مجموعة الخطوط ونمطها

متغيّرات أسلوب الخط