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

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

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

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

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

הסבר על עורך העיצוב

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

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

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

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

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

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

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

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

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

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

לדוגמה:

// 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). גיליון הסגנונות הזה מצהיר על משתנים, פונקציות ומיקסים שניתן לשנות באמצעות קטעים מותאמים אישית וקטעי SCSS, כפי שמתואר במאמר התאמה אישית של העיצוב באמצעות עורך העיצוב המתקדם.

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

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

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

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

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

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

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

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

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

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

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

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

$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 של רכיבי ה-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 הרצויים.
לוחצים על Save כדי לשמור את השינויים.
מציגים את השינויים בחלונית התצוגה המקדימה או לוחצים על Preview (תצוגה מקדימה) כדי לראות תצוגה מקדימה של השינויים בפורטל בדפדפן.
הערה: אתם יכולים ללחוץ על הניווט בפורטל בחלונית התצוגה המקדימה כדי להציג את השינויים בכל הדפים.
לוחצים על פרסום כדי לפרסם את העיצוב. תתבקשו לאשר את העדכון.

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

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

לדוגמה, כדי לשנות את גופן ברירת המחדל ל- 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 (WOFF) ועוד.

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

אפשר להעלות את קובץ הגופן למנהל הנכסים, כפי שמתואר במאמר העלאת קובץ.
נכנסים לעורך העיצוב המתקדם ומוסיפים את הכלל @font-face לקטע סגנונות מותאמים אישית, שבו 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 (סגנונות בסיסיים) בחלונית השמאלית, מרחיבים את Logo options (אפשרויות לוגו) ולוחצים על (הלוגו של Mobile) בשדה Mobile logo (לוגו לנייד).
ב. מחפשים את הגרסה לנייד של הלוגו שלכם בספרייה המקומית.
ג. לוחצים על פתיחה כדי להעלות את הקובץ.
לוחצים על Save (שמירה) כדי לראות תצוגה מקדימה של השינויים בחלונית הימנית.
לוחצים על פרסום כדי לפרסם את השינויים בפורטל. מאשרים את הפעולה כשמוצגת בקשה לעשות זאת.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

דוגמאות נוספות:

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

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

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

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

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

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

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

למידע נוסף, ראו התאמה אישית של תמונת הרקע.

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

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

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

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

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

.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>

פרסום העיצוב

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

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

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

הסבר על הכללים הספציפיים של 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);

הערכים המספריים מציינים את ערכי ההצללה עבור רכיבי ברירת המחדל, הבהירים והכהים יותר, בהתאמה. מעיינים בתוכן של קובץ ה-SCSS של רכיבי ה-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
);

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

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

$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

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

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

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

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

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