تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

تخصيص المظهر

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

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

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

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

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

للوصول إلى محرِّر المظهر:

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

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

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

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

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

تستند معظم قواعد تصميم المظهر الأساسي التي تحدّد مظهر الموقع الإلكتروني إلى تصميم المواد الزاوي. يستخدم تصميم 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 التي تحدّد أنماط الطباعة واللون والتنسيق، ويتمّ استخدامها من خلال جدول الأنماط الأساسي. يمكنك تجاوز المتغيّرات المدرَجة في مرجع متغيّرات المظهر.

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

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

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

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

Category (الفئة)	الأنماط
أساسي	أشرطة أدوات التنقّل والعناوين ورؤوس البطاقات والأزرار
Secondary	نص `<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) وتنسيق 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
);

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

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

مكان الشعار	حجم الملف التلقائي
شريط أدوات التنقّل في الإصدار المخصّص للكمبيوتر المكتبي	‫196 × 32 بكسل
شريط أدوات التنقّل على الأجهزة الجوّالة	‫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 specificity الطريقة التي يستخدمها المتصفّح لتحديد الأولوية لتعريفات عناصر نمط 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
);

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

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

$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

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

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

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

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

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