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

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

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

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

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

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

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

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

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

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

يمكنك تخصيص المظهر من خلال إضافة رمز 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. انقر على نشر.

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