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

تخصيص المظهر

يتم الآن عرض مستندات Apigee Edge.
انتقِل إلى مستندات Apigee X. المعلومات

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

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

استكشاف أداة تعديل المظاهر

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

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

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

أداة تعديل المظاهر

كما هو موضح في الشكل السابق، يمكّنك محرِّر المظاهر من إجراء ما يلي:

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

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

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

يتم تحديد قواعد النمط باستخدام 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; }

يتم تجميع لغة CSS وتحويلها إلى 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);

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

يمكنك استيراد خطك المخصص باستخدام قاعدة @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
);

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

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

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

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

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

لتخصيص الشعار المستخدم في شريط أدوات التنقل لشاشات سطح المكتب والجوال:

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

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

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

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

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

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

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

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

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

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

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

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