דף זה תורגם על ידי Cloud Translation API.

התאמה אישית של העיצוב

אתם צופים במסמכי העזרה של Apigee Edge.
כניסה למסמכי העזרה של Apigee X. info

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

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

עריכת העיצוב

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

כדי לגשת לעורך העיצוב:

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

עורך העיצובים

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

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

מידע על העיצוב הבסיסי

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

כללי הסגנון מוגדרים באמצעות Sassy Cascading Style Sheet‏ (SCSS). SCSS הוא קבוצה גדולה יותר של גיליונות סגנון מדורגים (CSS), עם היתרונות הבאים:

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

לדוגמה:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

קובצי SCSS עוברים הידור והמרה ל-CSS רגיל לפני שהתוכן מוצג בדף האינטרנט.

העיצוב הבסיסי משתמש בסגנון גיליון של חומר אנכי, קובץ SCSS של עיצוב חומר (material-theming.scss). גיליון הסגנונות הזה מכיל הצהרות על משתנים, פונקציות ו-mixins שאפשר לשנות באמצעות משתנים מותאמים אישית קטעים של SCSS, כפי שמתואר במאמר התאמה אישית של העיצוב באמצעות עורך העיצוב המתקדם.

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

התאמה אישית של לוח הצבעים

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

מידע על הקטגוריות של לוחות הצבעים

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

קטגוריה	עיצובים
ראשי	סרגי כלים לניווט, כותרות, כותרות של כרטיסים ולחצנים
Secondary	טקסט של `<pre>` ו-`<code>`
מבטא	ניווט, קישורים ולחצנים עם סימני הטעמה
אזהרה	אזהרות ושגיאות

התאמה אישית של לוח הצבעים באמצעות עורך הסגנון הבסיסי

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

כדי להתאים אישית את לוח הצבעים באמצעות עורך הסגנונות הבסיסי:

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

התאמה אישית של לוח הצבעים על ידי שינוי של משתני העיצוב

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

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

בודקים את התוכן של קובץ SCSS של נושא חומר (material-theming.scss) שיובאו כדי לזהות את משתני הצבעים שהוגדרו מראש (כמו $mat-grey). הערכים המספריים מציינים את ערכי ההצללה של הרכיבים שמוגדרים כברירת מחדל, בהירים יותר כהים יותר, בהתאמה.

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

$my-color-variable: (    
    50 : #f9f0e7,    
    100 : #f0d8c2,    
    200 : #e6bf9a,    
    300 : #dba572,    
    400 : #d49153,    
    500 : #cc7e35,    
    600 : #c77630,    
    700 : #c06b28,    
    800 : #b96122,    
    900 : #ad4e16,    
    A100 : #ffebe0,     
    A200 : #ffc9ad,    
    A400 : #ffa77a,    
    A700 : #ff9661,     
    // Color to render text presented on a background of the same level       
    contrast: (    
        50 : #000000,     
        100 : #000000,     
        200 : #000000,     
        300 : #000000,    
        400 : #000000,     
        500 : #000000,    
        600 : #000000,    
        700 : #ffffff,     
        800 : #ffffff,    
        900 : #ffffff,     
        A100 : #000000,     
        A200 : #000000,     
        A400 : #000000,     
        A700 : #000000,     
    )    
);

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

$primary: mat-palette($my-color-variable, 900, 200, 400);

התאמה אישית של משפחת הגופנים והסגנונות

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

התאמה אישית של משפחת הגופנים והסגנונות באמצעות עורך הסגנונות הבסיסי

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

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

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

התאמה אישית של משפחת הגופנים והסגנונות על ידי שינוי של משתני העיצוב

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

לדוגמה, כדי לשנות את גופן ברירת המחדל ל-Arial, מגדירים את המשתנה הבא:

$typography-main-font-family: 'Arial';

ייבוא גופן מותאם אישית

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

ייבוא גופן של Google

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

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

ייבוא גופן מותאם אישית

לייבא גופן בהתאמה אישית באמצעות כלל ה-CSS ‎@font-face. הכלל @font-face תומך במספר סוגים שונים של פורמטים של קבצים, כולל TrueType‏ (TTF), Web Open Font Format‏ (WOFF) ועוד.

כדי לייבא גופן מותאם אישית משלכם:

אפשר גם להעלות את קובץ הגופן למנהל הנכסים, כפי שמתואר בקטע העלאת קובץ.
נכנסים לעורך הנושא המתקדם ומוסיפים את הכלל @font-face לקטע Custom Styles (סגנונות מותאמים אישית). הערכים של השדות הם: font-family – שם הגופן, url – המיקום של קובץ הגופן (במקרה הזה, מנהל הנכסים), MyCustomFont.tff – שם קובץ הגופן המותאם אישית ו-format – פורמט הגופן.
```
@font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}
```

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

מפנים לגופן המותאם אישית באחד מהמשתנים של משפחת הגופן והסגנון בקטע משתנים. לדוגמה:

$typography-main: mat-typography-config(    
    $font-family: '"Indie Flower", "Oxygen", sans-serif',    
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers    
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers    
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers    
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers    
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags    
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags    
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags   
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags   
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text   
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text    
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text    
    $button: mat-typography-level(14px, 14px, 500), // Buttons    
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

התאמה אישית של סמלי הלוגו

אפשר להתאים אישית את הסמלים שמופיעים בפורטל במיקומים הבאים:

מיקום הלוגו	גודל הקובץ שמוגדר כברירת מחדל
סרגל הכלים לניווט במחשב	196 x 32 פיקסלים
סרגל הכלים לניווט בנייד	156 x 32 פיקסלים
סמל האתר בסרגל הכתובות של הדפדפן (ומיקומים אחרים)	32 x 32 פיקסלים
דף הכניסה	392 x 64 פיקסלים

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

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

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

מקבלים עותק אחד או יותר של לוגו החברה שמתאים לשימוש.
בטבלה הקודמת מפורטים הגדלים המומלצים.
נכנסים לעורך העיצוב.
כדי להחליף את הלוגו בסרגל הכלים של תפריט הניווט העליון במסכים של מחשב:
א. בקטע Basic Styles (סגנונות בסיסיים) בחלונית השמאלית, לוחצים על מתחת לשדה Primary logo (לוגו ראשי).
ב. מחפשים את גרסת הלוגו למחשב בספרייה המקומית.
ג. לוחצים על פתיחה כדי להעלות את הקובץ.
כדי להחליף את הלוגו בסרגל הכלים של הניווט העליון במסכים של ניידים:
א. בקטע Basic Styles (סגנונות בסיסיים) שבחלונית השמאלית, מרחיבים את האפשרות Logo options (אפשרויות לוגו) ולוחצים על בשדה Mobile logo (לוגו לנייד).
ב. מחפשים את גרסת הנייד של הלוגו בספרייה המקומית.
ג. לוחצים על פתיחה כדי להעלות את הקובץ.
לוחצים על שמירה כדי להציג את השינויים בתצוגה מקדימה בחלונית הימנית.
לוחצים על פרסום כדי לפרסם את השינויים בפורטל. מאשרים את הפעולה כשמוצגת בקשה לעשות זאת.

התאמה אישית של סמל האתר

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

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

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

ריכזנו כאן כמה טיפים מהירים להתאמה אישית של סרגל הכלים לניווט:

כדי להתאים אישית את הצבע של סרגל הכלים של הניווט בכותרת העליונה ובכותרת התחתונה, משנים את הצבע הראשי, כפי שמתואר בקטע התאמה אישית של לוח הצבעים.
כדי להתאים אישית את גודל הגופן והסגנון של פריטי התפריט בסרגל הניווט בכותרת העליונה ובכותרת התחתונה, משנים את הסגנון של הגופן ושל הלחצנים, כפי שמתואר בקטע התאמה אישית של משפחת הגופנים והסגנונות.
כדי להתאים אישית את הגובה של סרגל הכלים לניווט בכותרת, נכנסים לעורך העיצוב המתקדם ומוסיפים את המשתנה הבא עם הערך המותאם בקטע Variables: $layout-header-height: 64px;
כדי להתאים אישית את הגובה של סרגל הכלים לניווט בכותרת התחתונה, נכנסים לעורך העיצוב המתקדם ומוסיפים את המשתנה הבא עם הערך המותאם בקטע Variables: $layout-footer-height: 44px;
איך מתאימים אישית את הלוגו בסרגל הניווט במחשבים ובניידים

התאמה אישית של תמונת הרקע

כדי להתאים אישית את תמונת הרקע בדף הבית, מבצעים אחת מהפעולות הבאות:

מעלים גרסה משלכם של התמונה home-background.jpg למנהל הנכסים עם אותו שם ואותו גודל קובץ יחסי (3,000 פיקסלים x 1,996 פיקסלים). מידע נוסף זמין במאמר ניהול הנכסים.
כדי לשנות את שם קובץ תמונת הרקע ואת המילוי שלו, נכנסים לעורך העיצוב המתקדם וכוללים את קובץ ה-SCSS הבא עם ערכים מותאמים בקטע Custom Styles:
```
#index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}
```
כדי להוסיף תמונת רקע לכל הדפים בפורטל, נכנסים לעורך העיצוב המתקדם ומוסיפים את הקוד הבא ב-SCSS עם הערך המותאם בקטע Custom Styles:
```
 body {
    background-image: url('/files/background-image.jpg');
 }
```

התאמה אישית של הגופן

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

$typography-main
$typography-header
$typography-footer
$typography-context-bar

לדוגמה:

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

לאחר מכן, אפשר להחיל את הגופן על סלקטור CSS ספציפי, כפי שמתואר בדוגמה הבאה:

@include mat-base-typography($custom-typography-config, '.css-selector');

לחלופין, אפשר להחיל רמת טיפוגרפיה ספציפית שהוגדרה בטיפוגרפיה בהתאמה אישית על סלקטור CSS, כפי שמתואר בדוגמה הבאה:

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

התאמה אישית של העיצוב באמצעות הכלי המתקדם לעריכת עיצובים

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

שינוי של משתני העיצוב

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

לדוגמה, כדי להתאים אישית את הגובה של סרחי הכלים לניווט בכותרת ובכותרת התחתונה, צריך לכלול את המשתנים הבאים, בהתאמה, עם ערכים מותאמים בקטע Variables (משתנים) בכלי העריכה המתקדם של העיצוב:

דוגמאות נוספות זמינות במאמרים הבאים:

התאמה אישית של לוח הצבעים על ידי שינוי משתני העיצוב
התאמה אישית של משפחת הגופנים והסגנונות על ידי שינוי של משתני העיצוב

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

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

התאמה אישית של רכיבי הסגנון של העיצוב

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

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

.main .main-content button.app-save {
  color: blue;
}

אפשר גם לעיין במאמר התאמה אישית של תמונת הרקע.

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

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

יצירת חלונית ברוחב מלא בדף פורטל

כדי ליצור חלונית ברוחב מלא בדף פורטל:

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

.full-width__container {
  position: relative;
  left: 50%;
  right: 50%;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url("/files/your-image.jpg");
  background-size: cover;
  background-position: 50% 50%;
  padding: 0;
}

.full-width__centered {
  @include centered-content();
}

.full-width__content {
  // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to
  // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
  // and corresponding <div> container if no additional padding control other than the
  // min page padding is needed.
}

עורכים את תוכן דף הפורטל כך שיכלול את הרכיב <div> הבא, כפי שמתואר במאמר פיתוח תוכן פורטל באמצעות עורך הדפים:

<div class="full-width__container">
  <div class="full-width__centered">
    <div class="full-width__content">  <!-- Include this div if you need additional padding -->
      <h2>Full Width Container</h2>
      <p>
        This content will align with the page header and other content outside
        of this full width container
      </p>
    </div>
  </div>
</div>

פרסום העיצוב

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

נכנסים לעורך העיצוב.
לוחצים על פרסום.

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

הסבר על כללי הספציפיות של CSS

שימוש בכלל !important בהצהרה על רכיב סגנון כדי לשנות הצהרות אחרות נחשב לשימוש לא תקין ולא מומלץ. הכלל !important משפיע על כללי היררכיית ההחלטות ועל כללי הספציפיות של 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

הפניה למשתנה העיצוב

בקטעים הבאים מפורט סיכום של המשתנים שאפשר לשנות בקטע 'משתנים' בכלי המתקדם לעריכת נושאים, כפי שמתואר בקטע שינוי של משתני נושא.

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

משתנה העיצוב הבסיסי

להתאים אישית את צבעי החזית של העיצוב הבסיסי שמשמש בכל האתר. הערכים החוקיים הם light ו-dark.

$base-theme: light;

משתני לוח צבעים

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

$primary: mat-palette($mat-grey, 800, 100, 900); 
$secondary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-red);

הערכים המספריים מציינים את ערכי ההצללה של ברירת המחדל, של האלמנט הבהיר יותר ושל האלמנט הכהה יותר, בהתאמה. בודקים את התוכן של הקובץ material theming SCSS (material-theming.scss) כדי לזהות את משתני הצבעים שהוגדרו מראש.

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

$primary: mat-palette($mat-green, 800, 100, 900);

כדי להתאים אישית רק את ערכי ההצללה של קבוצת הצבעים שמוגדרת כברירת מחדל בעיצוב הבסיסי, צריך לכלול את הקוד הבא עם ערכי הצללה מותאמים:

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

משתני סגנון ומשפחת גופנים

להתאים אישית את משפחת הגופנים ואת הסגנונות.

// If using a custom font, import it by URL. 
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

כדי לקבל שליטה מפורטת יותר, אפשר לציין גופן מותאם אישית משלכם, כפי שמתואר בדוגמה הבאה:

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

משתני טיפוגרפיה

התאמה אישית של הגופנים של Angular Material. בכל רמה של רכיבי הגופן מוגדרים גודל הגופן, גובה השורה ומשקלו.

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);

התאמה אישית של העיצוב

עריכת העיצוב

מידע על העיצוב הבסיסי

התאמה אישית של לוח הצבעים

מידע על הקטגוריות של לוחות הצבעים

התאמה אישית של לוח הצבעים באמצעות עורך הסגנון הבסיסי

התאמה אישית של לוח הצבעים על ידי שינוי של משתני העיצוב

התאמה אישית של משפחת הגופנים והסגנונות

התאמה אישית של משפחת הגופנים והסגנונות באמצעות עורך הסגנונות הבסיסי

התאמה אישית של משפחת הגופנים והסגנונות על ידי שינוי של משתני העיצוב

ייבוא גופן מותאם אישית

ייבוא גופן של Google

ייבוא גופן מותאם אישית

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

התאמה אישית של סמלי הלוגו

התאמה אישית של הלוגו בסרגל הניווט במחשבים ובמכשירים ניידים

התאמה אישית של סמל האתר

התאמה אישית של הלוגו בדף הכניסה

התאמה אישית של סרגל הכלים לניווט

התאמה אישית של תמונת הרקע

התאמה אישית של הגופן

התאמה אישית של העיצוב באמצעות הכלי המתקדם לעריכת עיצובים

שינוי של משתני העיצוב

התאמה אישית של רכיבי הסגנון של העיצוב

יצירת חלונית ברוחב מלא בדף פורטל

פרסום העיצוב

הסבר על כללי הספציפיות של CSS

הפניה למשתנה העיצוב

משתנה העיצוב הבסיסי

משתני לוח צבעים

משתני סגנון ומשפחת גופנים

משתני טיפוגרפיה