‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

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

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

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

מידע על Theme Editor

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

כדי לגשת לכלי לעריכת ערכות נושא:

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

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

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

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

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

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

כללי הסגנון מוגדרים באמצעות Sassy Cascading Style Sheet (SCSS). ‫SCSS הוא קבוצת-על של Cascading Style Sheets (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 רגיל לפני שהתוכן מוצג בדף האינטרנט.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$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, ניגשים לעורך המתקדם של ערכת הנושא ומייבאים את הגופן בקטע Custom Styles, כמו שמוצג בהמשך:

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

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

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

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

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

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

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

$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 פיקסלים

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

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

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

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

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

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

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

התאמה אישית של הטיפוגרפיה

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

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

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

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

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

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

פרסום העיצוב

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

ניגשים לכלי לעריכת ערכות נושא.
לוחצים על פרסום.

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

הסבר על כללי הספציפיות של 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

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

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

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

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

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

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

מידע על Theme Editor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

התאמה אישית של הטיפוגרפיה

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

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

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

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

פרסום העיצוב

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

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

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

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

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

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