התאמה אישית של העיצוב (הגרסה המקורית)

כרגע מוצג התיעוד של Apigee Edge.
כניסה למסמכי התיעוד של Apigee X. מידע

עיצוב מורכב מגיליון סגנונות גלובלי מדורג (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 פיקסלים x 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> ייצבע בכחול, מפני שהצהרת הסגנון של המאפיין id בתוך רכיב div היא ספציפית יותר מהצהרת רכיב הסגנון div.

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

להצהרות על רכיבי סגנון עם אותה ספציפית, הצהרת רכיב הסגנון האחרונה שהוגדרה תקבל עדיפות. לדוגמה, בהתאם לסדר ההצהרות הבאות של רכיב סגנון, רכיב הפסקה יהיה בצבע כחול.

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

פרסום העיצוב

כדי לפרסם בפורטל הפעיל את ההתאמות האישיות של העיצוב והסגנון שהוספת:

1. בוחרים באפשרות עיצוב בתפריט הנפתח שבחלק העליון של תפריט הניווט.
2. לוחצים על פרסום.

כדי לצפות בתוכן שפרסמתם בפורטל בשידור חי, לוחצים על פורטל בשידור חי בסרגל הניווט העליון.