Design anpassen

Sie sehen die Dokumentation zu Apigee Edge.
Zur Apigee X-Dokumentation weitere Informationen

Ein Design besteht aus einem globalen Stylesheet, das für alle Seiten im Portal einheitlich ist. Ziel eines Designs ist es, das Erscheinungsbild aller Portalseiten gleichzeitig anzupassen.

Sie können Ihr Design gemäß den folgenden Abschnitten anpassen, als Vorschau ansehen und veröffentlichen.

Designeditor entdecken

Im Designeditor können Sie das Design für Ihr Portal anpassen, in der Vorschau anzeigen und veröffentlichen.

So greifen Sie auf den Designeditor zu:

  • Klicken Sie in der seitlichen Navigationsleiste auf Veröffentlichen > Portale, wählen Sie Ihr Portal aus und klicken Sie auf der Landingpage auf Designs.
  • Klicken Sie beim Bearbeiten eines Portals in der oberen Navigationsleiste oben im Drop-down-Menü auf Designs.

Designeditor

Wie in der vorherigen Abbildung hervorgehoben, können Sie mit dem Designeditor Folgendes tun:

Über das Basisdesign

Die meisten Regeln für das Erscheinungsbild der Website basieren auf dem Angular Material Design. Das Angular Material Design bietet rasterbasierte Layouts und einheitliche Komponenten sowie einen einheitlichen Stil.

Die Stilregeln werden mithilfe des Sassy Cascade Style Sheet (SCSS) definiert. SCSS ist eine Obermenge von Cascading Style Sheets (CSS) mit folgenden Vorteilen:

  • Globale Variablen, die im gesamten Stylesheet wiederverwendet werden können.
  • Verschachtelte Regeln zum Speichern der Entwicklungszeit des Stylesheets.
  • Möglichkeit, Mixe und Funktionen zu erstellen

Beispiel:

// 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 wird kompiliert und in einfaches CSS umgewandelt, bevor der Inhalt auf der Webseite gerendert wird.

Ein eckiges Material-Stylesheet, eine SCSS-Datei mit Materialdesign (material-theming.scss), wird vom Basisdesign verwendet. In diesem Stylesheet werden Variablen, Funktionen und Mixins deklariert, die mit benutzerdefinierten Variablen und SCSS-Bereichen überschrieben werden können. Weitere Informationen hierzu finden Sie unter Design mit dem erweiterten Designeditor anpassen.

Basierend auf der Auswahl der Designelemente Ihrer Benutzeroberfläche wird eine Reihe von SCSS-Variablen deklariert, die Typografie, Farbe und Layoutstile definieren und vom Basis-Stylesheet verwendet werden. Sie können die in der Referenz zu Theme-Variablen aufgeführten Variablen überschreiben.

Farbpalette anpassen

Passen Sie die Farbvorlage mit dem Editor für einfache Stile oder durch Überschreiben von Designvariablen an.

Informationen zu den Farbpalettenkategorien

Die Definitionen der Farbpalette für das integrierte Portal werden in die folgenden Kategorien unterteilt, die im Basisdesign in der Material Design-Farbgebung definiert sind.

Kategorie Designs
Primär Navigationsleisten, Überschriften, Kartenüberschriften und Schaltflächen
Sekundär Text auf <pre> und <code>
Akzent Navigation, Links und akzentuierte Schaltflächen
Warnen Warnungen und Fehler

Farbpalette mit dem Basis-Stileditor anpassen

Mit dem Editor für einfache Stile lassen sich die primären und Akzentfarben schnell anpassen.

So passen Sie die Farbpalette mit dem Editor für einfache Stile an:

  1. Rufen Sie den Designeditor auf.
  2. Um die Primärfarbe anzupassen, wählen Sie im Drop-down-Menü Primärfarbe eine Farbe aus oder klicken Sie auf Benutzerdefiniert und geben Sie einen benutzerdefinierten Hexadezimal-Farbwert in das Textfeld ein.
  3. Wenn Sie die Akzentfarbe anpassen möchten, wählen Sie im Drop-down-Menü Akzentfarbe eine Farbe aus oder klicken Sie auf Benutzerdefiniert und geben Sie eine benutzerdefinierte Hexadezimalfarbe in das Textfeld ein.
  4. Klicken Sie auf Speichern, um die Änderungen zu speichern.
  5. Sehen Sie sich Ihre Änderungen im Vorschaufenster an oder klicken Sie auf Vorschau, um eine Vorschau der Portaländerungen in einem Browser anzusehen.
    Hinweis: Klicken Sie im Vorschaubereich auf die Portalnavigation, um die Änderungen auf allen Seiten zu sehen.
  6. Klicken Sie auf Veröffentlichen, um Ihr Design zu veröffentlichen. Sie werden aufgefordert, das Update zu bestätigen.

Passen Sie die Farbpalette an, indem Sie Designvariablen überschreiben.

Wenn Sie die Farbpalette durch Überschreiben der Designvariablen anpassen möchten, öffnen Sie den erweiterten Designeditor und fügen Sie im Abschnitt Variablen eine oder mehrere der folgenden Variablen mit angepassten Werten ein, um die primäre Farbe, die sekundäre Farbe, die Akzentfarbe oder die Warnmeldungsfarbe zu ändern. Weitere Details finden Sie unter Informationen zu den Farbpalettenkategorien.

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

Zeigen Sie den Inhalt der importierten Material Design-SCSS-Datei (material-theming.scss) an, um die vordefinierten Farbvariablen wie $mat-grey zu identifizieren. Die numerischen Werte geben die Schattierungswerte für die standardmäßigen, helleren und dunkleren Elemente an.

Sie können aber auch eine eigene Farbvariable erstellen. Beispiel:

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

Verwenden Sie sie dann, um die Farbpalette zu ändern, wie im folgenden Beispiel gezeigt:

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

Schriftfamilie und -stile anpassen

Sie können die Schriftfamilie und -stile mit dem einfachen Stileditor oder durch Überschreiben von Designvariablen ändern. Sie können auch eine benutzerdefinierte Schriftart importieren.

Schriftfamilie und -stile mit dem Editor für einfache Stile anpassen

Mit dem Editor für einfache Stile können Sie die Schriftfamilie und die Stile schnell anpassen, wie in der folgenden Abbildung dargestellt.

So passen Sie die Schriftfamilie und die Stile mit dem Editor für einfache Stile an:

  1. Rufen Sie den Designeditor auf.
  2. Wählen Sie zum Ändern der Schriftfamilie einen Wert im Drop-down-Menü Schriftart aus.
  3. Wenn Sie die Schriftstile ändern möchten, maximieren Sie den Bereich Schriftstile und bearbeiten Sie die Stile nach Bedarf, einschließlich Schriftgröße, Zeilenhöhe und Schriftstärke für die gewünschten HTML-Elemente.
  4. Klicken Sie auf Save (Speichern), um Ihre Änderungen zu übernehmen.
  5. Sehen Sie sich Ihre Änderungen im Vorschaufenster an oder klicken Sie auf Vorschau, um eine Vorschau der Portaländerungen in einem Browser anzusehen.
    Hinweis: Klicken Sie im Vorschaubereich auf die Portalnavigation, um die Änderungen auf allen Seiten zu sehen.
  6. Klicken Sie auf Veröffentlichen, um Ihr Design zu veröffentlichen. Sie werden aufgefordert, das Update zu bestätigen.

Schriftfamilie und -stile durch Überschreiben von Designvariablen anpassen

Wenn Sie die Schriftfamilie und -stile durch Überschreiben der Designvariablen anpassen möchten, öffnen Sie den erweiterten Designeditor und schließen Sie eine oder mehrere der Variabeln für Schriftfamilie und -stile mit angepassten Werten im Bereich Variablen ein.

Definieren Sie beispielsweise die folgende Variable, um die Standardschriftart in Arial zu ändern:

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

Benutzerdefinierte Schriftart importieren

Importieren Sie eine Google-Schriftart (nicht in der Standardschriftart) oder Ihre eigene benutzerdefinierte Schriftart. Verweisen Sie dann wie unten beschrieben auf die benutzerdefinierte Schriftart.

Google-Schriftart importieren

Um eine Google-Schriftart zu importieren, rufen Sie den erweiterten Designeditor auf und importieren Sie die Schriftart wie unten im Abschnitt Benutzerdefinierte Stile beschrieben:

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

Benutzerdefinierte Schriftart importieren

Mit der CSS-Regel @font-face können Sie eine eigene benutzerdefinierte Schriftart importieren. Die @font-face-Regel unterstützt eine Reihe verschiedener Dateiformate, einschließlich TrueType (TTF), Web Open Font Format (WOFF) und mehr.

So importieren Sie eine eigene benutzerdefinierte Schriftart:

  1. Optional können Sie die Schriftartdatei in den Asset-Manager hochladen, wie unter Datei hochladen beschrieben.

  2. Rufen Sie den erweiterten Designeditor auf und fügen Sie die Regel @font-face dem Abschnitt Benutzerdefinierte Stile hinzu, wobei font-family den Schriftartennamen und url den Speicherort der Schriftartendatei angibt (in diesem Fall der Asset-Manager). MyCustomFont.tff ist der Name Ihrer benutzerdefinierten Schriftartendatei und format das Schriftartenformat.

    @font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}

Auf die benutzerdefinierte Schriftart im Stylesheet verweisen

Verweisen Sie im Abschnitt Variablen auf die benutzerdefinierte Schriftart in einer der Variabeln für Schriftfamilie und -stile. Beispiel:

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

Sie können die im Portal verwendeten Logos an den folgenden Stellen anpassen:

Position des Logos Standarddateigröße
Navigationsleiste auf dem Computer 196 x 32 Pixel
Symbolleiste für Mobilgeräte156 x 32 Pixel
Favicon in der Adressleiste des Browsers (und andere Orte)32 x 32 Pixel
Anmeldeseite392 x 64 Pixel

Schneiden Sie das Logo in der Navigationsleiste auf Computern und Mobilgeräten aus. Je nach Breite Ihres Browsers wird möglicherweise die Desktopversion oder die mobile Version des Logos angezeigt.

Das primäre Logo kann nicht gelöscht, sondern nur ersetzt werden. Wenn Sie kein Logo für die mobile Anzeige festlegen, wird standardmäßig das Hauptlogo verwendet.

So passen Sie das in der Navigationsleiste auf Desktop- und Mobilgerät angezeigte Logo an:

  1. Sie erhalten eine oder mehrere Kopien Ihres Unternehmenslogos, die sich für die Verwendung eignen.
    Die empfohlenen Größen finden Sie in der vorherigen Tabelle.
  2. Rufen Sie den Designeditor auf.
  3. So ersetzen Sie das Logo in der oberen Navigationsleiste auf Desktop:
    a. Klicken Sie unter Einfache Stile im rechten Bereich unter dem Feld Primäres Logo auf .
    b. Suchen Sie in Ihrem lokalen Verzeichnis nach der Desktopversion Ihres Logos.
    c. Klicken Sie auf Öffnen, um die Datei hochzuladen.
  4. So ersetzen Sie das Logo in der oberen Navigationsleiste auf Mobilgeräte-Bildschirmen:
    a. Maximieren Sie im Bereich rechts unter Einfache Stile Logo-Optionen und klicken Sie unter dem Feld Mobiles Logo auf .
    b. Suchen Sie in Ihrem lokalen Verzeichnis nach der mobilen Version Ihres Logos.
    c. Klicken Sie auf Öffnen, um die Datei hochzuladen.
  5. Klicken Sie auf Speichern, um eine Vorschau Ihrer Änderungen im linken Bereich anzusehen.
  6. Klicken Sie auf Veröffentlichen, um die Änderungen in Ihrem Portal zu veröffentlichen. Bestätigen Sie den Vorgang, wenn Sie dazu aufgefordert werden.

Favicon anpassen

So passen Sie das in der Adressleiste Ihres Browsers und an anderen Stellen verwendete Favicon an:

  1. Sie erhalten ein Unternehmenslogo, das als Favicon geeignet ist.
    Die empfohlene Größe finden Sie in der vorherigen Tabelle.
  2. Rufen Sie den Designeditor auf.
  3. Maximieren Sie im rechten Bereich unter Basic Styles den Bereich Logooptionen und klicken Sie unter dem Feld Favicon auf .
  4. Suchen Sie in Ihrem lokalen Verzeichnis nach der Favicon-Version Ihres Logos.
  5. Klicken Sie auf Öffnen, um die Datei hochzuladen.
  6. Klicken Sie auf Speichern, um eine Vorschau Ihrer Änderungen im linken Bereich anzusehen.
  7. Klicken Sie auf Veröffentlichen, um die Änderungen in Ihrem Portal zu veröffentlichen. Bestätigen Sie den Vorgang, wenn Sie dazu aufgefordert werden.

Passen Sie das Logo auf der Anmeldeseite an, wenn Sie die Registrierung und Anmeldung für Ihr Entwicklerprogramm konfigurieren. Weitere Informationen hierzu finden Sie unter Unternehmensinformationen verwalten.

Im Folgenden finden Sie einige Tipps zum Anpassen der Navigationsleiste:

Hintergrundbild anpassen

Passen Sie das Hintergrundbild auf der Startseite an, indem Sie eine der folgenden Aufgaben ausführen:

  • Laden Sie eine eigene Version des Bildes home-background.jpg mit dem gleichen Namen und der gleichen Dateigröße (3.000 Pixel x 1.996 Pixel) in den Asset-Manager hoch. Weitere Informationen finden Sie unter Assets verwalten.

  • Ändern Sie den Dateinamen des Hintergrundbilds und seinen Abstand, indem Sie den erweiterten Designeditor aufrufen und die folgende SCSS mit angepassten Werten im Abschnitt Benutzerdefinierte Stile einfügen: 

    #index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}

  • Fügen Sie allen Seiten im Portal ein Hintergrundbild hinzu. Rufen Sie dazu den erweiterten Designeditor auf und fügen Sie das folgende SCSS mit dem angepassten Wert im Abschnitt Benutzerdefinierte Stile ein: 

     body {
    background-image: url('/files/background-image.jpg');
 }

Typografie anpassen

Passen Sie die Typografie an, indem Sie den Editor für erweiterte Designs öffnen und die Werte für eine oder mehrere der folgenden Typografievariablen im Bereich Variablen anpassen:

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

Beispiel:

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

Anschließend können Sie die Typografie auf einen bestimmten CSS-Selektor anwenden, wie im folgenden Beispiel gezeigt:

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

Alternativ können Sie eine bestimmte Typografieebene, die in der benutzerdefinierten Typografie definiert wurde, auf einen CSS-Selektor anwenden, wie im folgenden Beispiel gezeigt:

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

Das Design mit dem erweiterten Designeditor anpassen

Passen Sie das Design an, indem Sie Designvariablen überschreiben oder direkt im erweiterten Designeditor Designelemente anpassen.

Designvariablen überschreiben

Überschreiben Sie Designvariablen im Bereich Variablen des erweiterten Designeditors. Eine Liste der Designvariablen finden Sie in der Referenz zu Designvariablen.

Wenn Sie beispielsweise die Symbolleisten der Symbolleiste für Kopf- und Fußzeilen anpassen möchten, fügen Sie im Abschnitt Variablen des erweiterten Designeditors die folgenden Variablen mit angepassten Werten ein:

Weitere Beispiele:

So überschreiben Sie Designvariablen:

  1. Rufen Sie den Designeditor auf.
  2. Klicken Sie im rechten Bereich auf Erweitert.
  3. Klicken Sie auf Variablen.
  4. Fügen Sie die Variablenüberschreibungen hinzu.
    Eine Liste der Variablen, die überschrieben werden können, finden Sie in der Referenz zu Theme.
  5. Klicken Sie auf Save (Speichern), um Ihre Änderungen zu übernehmen.
  6. Klicken Sie auf x, um den Editor für erweiterte Designs zu schließen.
  7. Sehen Sie sich Ihre Änderungen im Vorschaufenster an oder klicken Sie auf Vorschau, um eine Vorschau der Portaländerungen in einem Browser anzusehen. Hinweis: Klicken Sie im Vorschaubereich auf die Portalnavigation, um die Änderungen auf allen Seiten zu sehen.
  8. Klicken Sie auf Veröffentlichen, um Ihr Design zu veröffentlichen. Sie werden aufgefordert, das Update zu bestätigen.

Stilelemente des Designs anpassen

Sie können die Stilelemente des Designs direkt im Bereich Benutzerdefinierte Stile des erweiterten Designeditors anpassen.

Sie können zum Beispiel die Farbe der Schaltfläche "Erstellen" auf der Seite Neue App ändern, die beim Registrieren von Apps im Portal angezeigt wird, indem Sie das folgende Designstilelement mit einem angepassten Wert hinzufügen:

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

Weitere Informationen finden Sie unter Hintergrundbild anpassen.

So passen Sie die Designstilelemente an:

  1. Rufen Sie den Designeditor auf.
  2. Klicken Sie im rechten Bereich auf Erweitert.
  3. Klicken Sie auf Benutzerdefinierte Stile.
  4. Fügen Sie die Stilelemente hinzu.
  5. Klicken Sie auf Save (Speichern), um Ihre Änderungen zu übernehmen.
  6. Schließen Sie x, um den erweiterten Designeditor zu schließen.
  7. Sehen Sie sich Ihre Änderungen im Vorschaufenster an oder klicken Sie auf Vorschau, um eine Vorschau der Portaländerungen in einem Browser anzusehen.
    Hinweis: Klicken Sie im Vorschaubereich auf die Portalnavigation, um die Änderungen auf allen Seiten zu sehen.
  8. Klicken Sie auf Veröffentlichen, um Ihr Design zu veröffentlichen. Sie werden aufgefordert, das Update zu bestätigen.

Steuerfeld in voller Breite auf einer Portalseite erstellen

So erstellen Sie ein Steuerfeld in voller Breite auf einer Portalseite:

  1. Fügen Sie im erweiterten Designeditor die folgenden Stilelemente hinzu, wie unter Designelemente anpassen beschrieben: 
    .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. Bearbeiten Sie den Inhalt der Portalseite so, dass er das folgende <div>-Element enthält, wie unter Portalinhalte mit dem Seiteneditor entwickeln beschrieben: 
    <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>

Design veröffentlichen

So veröffentlichen Sie im Live-Portal das von Ihnen hinzugefügte Design und Stile:

  1. Rufen Sie den Designeditor auf.
  2. Klicke auf Veröffentlichen.

Wenn Sie sich Ihre veröffentlichten Inhalte im Live-Portal ansehen möchten, klicken Sie in der oberen Navigationsleiste auf Portal ansehen.

Spezifitätsregeln für Preisvergleichsportale

Bei Konflikten wird in CSS die Spezifizierung beschrieben, die im Browser verwendet wird, um die Deklaration von CSS-Stilelement-Deklarationen bei Konflikten zu ermitteln. Die CSS-Spezifizierung wird berechnet, indem eine Gewichtung auf eine bestimmte CSS-Stilelement-Deklaration basierend auf seinem Selektortyp angewendet wird. Je spezifischer der CSS-Selektor, desto höher die Gewichtung. Beispielsweise wird in der Berechnung ein ID-Attribut höher gestellt als der Typselektor.

Wenn Sie folgende Stilelemente in Ihrem CSS-Code festlegen, wird das Absatzelement rot dargestellt, da die Deklaration des "p"-Elements innerhalb eines "div"-Elements spezifischer ist als die "p"-Elementdeklaration.

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

Wenn Sie in Ihrem CSS-Code die folgenden Deklarationen des Stilelements definieren, wird der gesamte in <div class="test"></div>-Tags eingeschlossene Text blau hervorgehoben, da eine ID-Attributstildeklaration in einem "div"-Element spezifischer als die div-Stilelementdeklaration ist.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Bei Stilelementdeklarationen mit der gleichen Spezifizierung hat die zuletzt definierte Stilelementdeklaration Vorrang. Bei der Anordnung der folgenden Stilelementdeklarationen wird das Absatzelement blau dargestellt. 

p { color: red }  
p { color: blue }  ← Last specified

Referent zu Designvariabeln

In den folgenden Abschnitten werden die Variablen zusammengefasst, die im Abschnitt "Variablen" des erweiterten Designeditors überschrieben werden können, wie unter Designvariablen überschreiben beschrieben.

Basisthemavariable

Passen Sie die Vordergrundfarben des Basisdesigns an, das auf der Website verwendet wird. Gültige Werte sind light und dark.

$base-theme: light;

Farbpalettenvariablen

Passen Sie die Farbpalette an, indem Sie die folgenden Variablen ändern, um primäre Farbe, die sekundäre Farbe, die Akzentfarbe oder die Warnmeldungsfarbe zu ändern. Weitere Details finden Sie unter Informationen zu den Farbpalettenkategorien.

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

Die numerischen Werte geben die Schattierungswerte für die standardmäßigen, helleren und dunkleren Elemente an. Rufen Sie den Inhalt der Datei Material-Design-SCSS (material-theming.scss) auf, um die vordefinierten Farbvariablen zu identifizieren.

Beispielsweise können Sie die primäre Farbpalette so in Grün ändern:

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

Wenn Sie nur die Schattierungswerte für den im Basisdesign definierten Standardfarbsatz anpassen möchten, fügen Sie folgenden Code mit angepassten Schattierungswerten ein:

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

Schriftfamilien und -stilvariablen

Passen Sie die Schriftfamilie und -stile an.

// 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;

Legen Sie eine benutzerdefinierte Typografie fest, um eine genauere Kontrolle zu ermöglichen, wie im folgenden Beispiel gezeigt:

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

Typografievariablen

Passen Sie die Typografie für Angular Material an. Jede Typografieebene definiert eine Schriftgröße, Zeilenhöhe und Schriftstärke.

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