سفارشی‌سازی زمینه (نسخه اصلی)

درحال مشاهده اسناد Apigee Edge هستید.
به اسناد Apigee X بروید. اطلاعات

مضمون شامل یک برگ سبک آبشاری سراسری (CSS) است که ظاهر و احساس یکسانی را برای همه صفحه‌های درگاه شما فراهم می‌کند. هدف از زمینه این است که به شما امکان دهد ظاهر و احساس همه صفحه‌های درگاهتان را به‌طور هم‌زمان تغییر دهید.

اکثر سبک‌های پیش‌فرض ارائه‌شده با پورتال نمونه براساس Bootstrap است. همان‌طور که در بخش‌های زیر توضیح داده شده است، می‌توانید زمینه خود را سفارشی‌سازی، پیش‌نمایش، و منتشر کنید.

برای آشنایی با نحوه سفارشی‌سازی کردن زمینه درگاه، ویدیو زیر را تماشا کنید.

دسترسی به ویرایشگر زمینه

زمینه درگاهتان را در ویرایشگر زمینه سفارشی‌سازی، پیش‌نمایش، و منتشر کنید. برای باز کردن ویرایشگر زمینه، زمینه را در منو کرکره‌ای در نوار پیمایش بالا انتخاب کنید.

همان‌طور که در شکل قبلی برجسته شده است، ویرایشگر زمینه به شما امکان می‌دهد:

• بااستفاده از قاب ویرایشگر سبک، سبک‌های سفارشی اضافه کنید تا زمینه‌تان را سفارشی‌سازی کنید
• با کلیک کردن روی بار کردن مجدد پیش‌نمایش، زمینه‌تان را در ناحیه پیش‌نمایش پیش‌دید کنید
• سفارشی‌سازی کردن نشان‌واره
• سفارشی‌سازی کردن تصویر پس‌زمینه
• زمینه خود را در درگاه زنده منتشر کنید

افزودن سبک‌های سفارشی

با افزودن کد CSS خودتان در قاب ویرایشگر سبک، زمینه را سفارشی‌سازی کنید. همه عناصر سبک CSS پشتیبانی می‌شوند.

برای سفارشی‌سازی کردن زمینه:

1. در منو کرکره‌ای در نوار پیمایش بالا، زمینه را انتخاب کنید.
2. کد CSS سفارشی خود را در پانل ویرایشگر سبک در سمت راست صفحه اضافه کنید.
3. با کلیک کردن روی بارگیری مجدد پیش‌نمایش، تغییراتتان را در قاب پیش‌نمایش پیش‌نمایش کنید.
   > توجه: می‌توانید ازطریق پیمایش درگاهتان کلیک کنید تا محتوای همه صفحه‌ها را پیش‌نمایش کنید.
4. برای انتشار تغییرات زمینه، روی انتشار کلیک کنید.
5. برای تأیید به‌روزرسانی، روی انتشار کلیک کنید.

سفارشی‌سازی کردن نشان‌واره

تصویر «نشان‌واره شما» را با نشان‌واره شرکتتان سفارشی‌سازی کنید، فایل‌های تصویر زیر را در مدیر فایل با بارگذاری نشان‌واره‌تان بااستفاده از همان نام‌ها و اندازه‌های فایل نسبی جایگزین کنید:

• ‫logo.png (۱۴۰ پیکسل در ۴۰ پیکسل)
• ‫mobile-logo.png (۱۴۰ پیکسل در ۴۰ پیکسل)

علاوه‌براین، محتوای زیر را در برگ سبک CSS، درصورت نیاز، اصلاح کنید:

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


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

برای اطلاعات بیشتر، به مدیریت دارایی‌ها مراجعه کنید.

سفارشی‌سازی کردن تصویر پس‌زمینه در صفحه اصلی

با اصلاح محتوای زیر در برگ سبک CSS، تصویر پس‌زمینه را در صفحه اصلی سفارشی‌سازی کنید.

• فایل تصویر پس‌زمینه و جای آن را اصلاح کنید.
  می‌توانید نسخه خودتان از تصویر portal-hero.jpg را بااستفاده از همان نام و اندازه فایل نسبی (۱۴۴۰ پیکسل × ۵۴۰ پیکسل) در مدیر فایل بارگذاری کنید. اگر می‌خواهید از نام فایل دیگری استفاده کنید، حتماً مقدار 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> قرار گیرد به رنگ آبی درمی‌آید زیرا بیانیه سبک مشخصه id در عنصر div خاص‌تر از بیانیه عنصر سبک div است.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

برای اظهارنامه‌های عنصر سبک با ویژگی یکسان، آخرین اظهارنامه عنصر سبک تعریف‌شده اولویت خواهد داشت. برای مثال، با درنظر گرفتن ترتیب اظهارنامه‌های عنصر سبک زیر، عنصر پاراگراف به رنگ آبی درمی‌آید.

p { color: red }  
p { color: blue }  ← Last specified

منتشر کردن زمینه

برای انتشار سفارشی‌سازی‌های زمینه و سبک که اضافه کرده‌اید در درگاه زنده:

1. در منو کرکره‌ای در منو پیمایش بالا، زمینه را انتخاب کنید.
2. روی منتشر کردن کلیک کنید.

برای مشاهده محتوای منتشرشده خود در درگاه زنده، روی درگاه زنده در نوار پیمایش بالا کلیک کنید.