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

אתם צופים במסמכי התיעוד של Apigee Edge.
כדאי לעיין במסמכי התיעוד של Apigee X. מידע

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

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

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

גישה לעורך העיצוב

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

כפי שמודגש באיור הקודם, בעורך העיצוב אפשר:

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

הוספת סגנונות בהתאמה אישית

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

כדי להתאים אישית את העיצוב:

1. בתפריט הנפתח בסרגל הניווט העליון, בוחרים באפשרות Theme (עיצוב).
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 למנהל הקבצים באמצעות אותו שם וגודל קובץ יחסי (1,440 פיקסלים 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. בתפריט הנפתח שבתפריט הניווט העליון, בוחרים באפשרות Theme (עיצוב).
2. לוחצים על פרסום.

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