تخصيص المظهر (الإصدار الأصلي)

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

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

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

شاهِد الفيديو التالي للتعرّف على كيفية تخصيص مظهر البوابة.

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

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

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

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

إضافة أنماط مخصّصة

خصِّص المظهر من خلال إضافة رمز CSS الخاص بك في جزء "أداة تعديل الأنماط". تتوافق جميع عناصر نمط CSS.

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

1. انقر على المظهر في القائمة المنسدلة ضمن شريط التنقّل العلوي.
2. أضِف رمز CSS المخصّص في جزء "أداة تعديل الأنماط" على الجانب الأيسر من الصفحة.
3. يمكنك معاينة التغييرات في لوحة المعاينة من خلال النقر على إعادة تحميل المعاينة.
   > ملاحظة: يمكنك النقر على شريط التنقّل في البوابة لمعاينة المحتوى على جميع الصفحات.
4. انقر على نشر لنشر التغييرات التي أجريتها على المظهر.
5. انقر على نشر لتأكيد التعديل.

تخصيص شعارك

خصِّص صورة "شعارك" باستخدام شعار شركتك، واستبدِل ملفات الصور التالية في "إدارة الملفات" من خلال تحميل شعارك باستخدام الأسماء نفسها وأحجام الملفات النسبية:

• logo.png (140 بكسل × 40 بكسل)
• mobile-logo.png (140 بكسل × 40 بكسل)

بالإضافة إلى ذلك، عدِّل المحتوى التالي في ورقة أنماط CSS حسب الحاجة:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}


.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

لمزيد من المعلومات، يُرجى الاطّلاع على إدارة مواد العرض.

تخصيص صورة الخلفية على الصفحة الرئيسية

خصِّص صورة الخلفية على الصفحة الرئيسية من خلال تعديل المحتوى التالي في ورقة أنماط CSS.

• عدِّل ملف صورة الخلفية وموضعها.
  يمكنك تحميل نسختك الخاصة من صورة portal-hero.jpg إلى "إدارة الملفات" باستخدام الاسم وحجم الملف النسبي نفسهما (1440 بكسل × 540 بكسل). إذا أردت استخدام اسم ملف مختلف، احرص على تعديل قيمة background-image في ورقة CSS أدناه.

  /* ==== Jumbotron ====
  a billboard for drawing attention, from Bootstrap  */
  
  home-page-jumbotron-bg {
      background-image: url('/files/portal-hero.jpg');
  }

• تعديل تنسيق النص الذي يظهر فوق صورة الخلفية

  .jumbotron {
   text-align: center;
   height: 500px;
   background-size: cover;
   margin: -50px -30px 0 -30px;
   border-radius: 0;
  }
  
  .jumbotron h1 {
   font-size: 40px;
   font-weight: 400;
  }
  
  .jumbotron h2 {
   font-size: 25px;
   font-weight: 400;
  }
  
  .jumbotron a, .jumbotron a:hover {
   font-size: 18px;
  }
  
  .jumbotron p {
   max-width: none;
  }

فهم قواعد التحديد في 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

نشر المظهر

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

1. انقر على المظهر في القائمة المنسدلة ضمن قائمة التنقّل في أعلى الصفحة.
2. انقر على نشر.

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