تم خود را سفارشی کنید (نسخه اصلی)

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

یک قالب شامل یک CSS آبشاری سراسری است که ظاهر و حس یکسانی را برای تمام صفحات پورتال شما فراهم می‌کند. هدف یک قالب این است که به شما امکان دهد ظاهر و حس را در تمام صفحات پورتال خود به طور همزمان تغییر دهید.

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

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

دسترسی به ویرایشگر قالب

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

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

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

اضافه کردن استایل‌های سفارشی

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

برای سفارشی کردن تم خود:

1. در منوی کشویی نوار ناوبری بالا، گزینه Theme ( تم) را انتخاب کنید.
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 خاص‌تر باشد، وزن آن بیشتر است. به عنوان مثال، به یک ویژگی ID در محاسبه وزن بالاتری نسبت به یک انتخابگر نوع داده می‌شود.

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

div p { color: red }  ← More specific  
p { color: blue }

به طور مشابه، اگر اعلان‌های عنصر style زیر را در کد CSS خود تعریف کنید، هر متنی که در تگ‌های <div class="test"></div> قرار گیرد، به رنگ آبی در خواهد آمد، زیرا اعلان style ویژگی id در یک عنصر div خاص‌تر از اعلان عنصر style div است.

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

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

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

قالب خود را منتشر کنید

برای انتشار سفارشی‌سازی‌های قالب و سبکی که اضافه کرده‌اید در پورتال زنده:

1. در منوی کشویی بالای صفحه، گزینه Theme ( قالب) را انتخاب کنید.
2. روی انتشار کلیک کنید.

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