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

מוצג המסמך של 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 עובר הידור (compile) ומומר ל-CSS ישן לפני עיבוד התוכן בדף האינטרנט.

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

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

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

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

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

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

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

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

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

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

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

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

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

$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);

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

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

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

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

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

  1. נכנסים לכלי לעריכת עיצוב.
  2. כדי לשנות את משפחת הגופנים, בוחרים ערך בתפריט הנפתח גופן.
  3. כדי לשנות את סגנונות הגופנים, מרחיבים את הקטע סגנונות גופן ועורכים את הסגנונות לפי הצורך, כולל גודל הגופן, גובה השורה ומשקל הגופן של רכיבי ה-HTML הרצויים.
  4. לוחצים על שמירה כדי לשמור את השינויים.
  5. בודקים את השינויים בחלונית התצוגה המקדימה או לוחצים על Preview (תצוגה מקדימה) כדי לראות תצוגה מקדימה של השינויים בפורטל בדפדפן.
    הערה: כדי לראות את השינויים בכל הדפים, אפשר ללחוץ על הניווט בפורטל בחלונית התצוגה המקדימה.
  6. לוחצים על פרסום כדי לפרסם את העיצוב. תוצג בקשה לאשר את העדכון.

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

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

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

$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) ועוד.

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

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

  2. נכנסים אל עורך העיצוב המתקדם ומוסיפים את הכלל @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 פיקסלים
Favicon בסרגל הכתובות של הדפדפן (ובמיקומים אחרים)32 x 32 פיקסלים
דף הכניסה64 x 392 פיקסלים

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

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

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

  1. יש להשיג עותק אחד או יותר של לוגו החברה שלך שמתאים לשימוש.
    בטבלה הקודמת מפורטות גדלים מומלצים.
  2. נכנסים לכלי לעריכת עיצוב.
  3. כדי להחליף את הלוגו בסרגל הניווט העליון במחשב, מוצג במסך הבא:
    א. בקטע סגנונות בסיסיים בחלונית השמאלית, לוחצים על בשדה לוגו ראשי.
    ב. מחפשים את הגרסה של הלוגו למחשב בספרייה המקומית.
    ג. לוחצים על פתיחה כדי להעלות את הקובץ.
  4. כדי להחליף את הלוגו בסרגל הכלים העליון לניווט בנייד מוצג:
    א. בקטע סגנונות בסיסיים בחלונית השמאלית, מרחיבים את אפשרויות לוגו ולוחצים על בשדה לוגו לנייד.
    ב. מחפשים את הגרסה לנייד של הלוגו שלכם בספרייה המקומית.
    ג. לוחצים על פתיחה כדי להעלות את הקובץ.
  5. לוחצים על שמירה כדי לראות תצוגה מקדימה של השינויים בחלונית הימנית.
  6. לוחצים על Publish (פרסום) כדי לפרסם את השינויים בפורטל. מאשרים את הפעולה כשמוצגת בקשה לעשות זאת.

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

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

  1. מקבלים עותק של הלוגו של החברה שיהיה מתאים לשימוש כסמל האתר.
    אפשר לעיין בטבלה הקודמת כדי לראות את הגודל המומלץ.
  2. נכנסים לכלי לעריכת עיצוב.
  3. בקטע סגנונות בסיסיים בחלונית השמאלית, מרחיבים את אפשרויות לוגו ולוחצים על בשדה Favicon.
  4. מחפשים את גרסת סמל האתר של הלוגו שלכם בספרייה המקומית.
  5. לוחצים על פתיחה כדי להעלות את הקובץ.
  6. לוחצים על שמירה כדי לראות תצוגה מקדימה של השינויים בחלונית הימנית.
  7. לוחצים על Publish (פרסום) כדי לפרסם את השינויים בפורטל. מאשרים את הפעולה כשמוצגת בקשה לעשות זאת.

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

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

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

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

  • מעלים למנהל הנכסים גרסה משלכם לתמונה מסוג 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);
}

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

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

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

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

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

דוגמאות נוספות זמינות בכתובת:

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

  1. נכנסים לכלי לעריכת עיצוב.
  2. בחלונית השמאלית, לוחצים על מתקדם.
  3. לוחצים על משתנים.
  4. מוסיפים את השינויים מברירת המחדל של המשתנים.
    במאמר הפניית משתני עיצוב תוכלו למצוא רשימה של משתנים שאפשר לשנות.
  5. לוחצים על שמירה כדי לשמור את השינויים.
  6. לוחצים על הסמל x כדי לסגור את עורך העיצוב המתקדם.
  7. בודקים את השינויים בחלונית התצוגה המקדימה או לוחצים על Preview (תצוגה מקדימה) כדי לראות תצוגה מקדימה של השינויים בפורטל בדפדפן. הערה: כדי לראות את השינויים בכל הדפים, אפשר ללחוץ על הניווט בפורטל בחלונית התצוגה המקדימה.
  8. לוחצים על פרסום כדי לפרסם את העיצוב. תוצג בקשה לאשר את העדכון.

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

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

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

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

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

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

  1. נכנסים לכלי לעריכת עיצוב.
  2. בחלונית השמאלית, לוחצים על מתקדם.
  3. לוחצים על סגנונות מותאמים אישית.
  4. מוסיפים רכיבים של סגנונות עיצוב.
  5. לוחצים על שמירה כדי לשמור את השינויים.
  6. סוגרים את הסמל x כדי לסגור את הכלי המתקדם לעריכת עיצוב.
  7. בודקים את השינויים בחלונית התצוגה המקדימה או לוחצים על Preview (תצוגה מקדימה) כדי לראות תצוגה מקדימה של השינויים בפורטל בדפדפן.
    הערה: כדי לראות את השינויים בכל הדפים, אפשר ללחוץ על הניווט בפורטל בחלונית התצוגה המקדימה.
  8. לוחצים על פרסום כדי לפרסם את העיצוב. תוצג בקשה לאשר את העדכון.

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

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

  1. מוסיפים את הרכיבים הבאים של סגנון העיצוב בכלי המתקדם של עורך העיצוב, כפי שמתואר במאמר התאמה אישית של רכיבים של סגנון עיצוב: 
    .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.
}
  2. צריך לערוך את התוכן של דף הפורטל כך שיכלול את הרכיב <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>

פרסום העיצוב

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

  1. נכנסים לכלי לעריכת עיצוב.
  2. לוחצים על פרסום.

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

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

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

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

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

באופן דומה, אם תגדירו את ההצהרות הבאות של רכיבי הסגנון בקוד ה-CSS שלכם, כל טקסט שמוקף בתגי <div class="test"></div> יהיה בצבע כחול, כי ההצהרה על סגנון מאפיין המזהה בתוך רכיב 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 (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);