Design anpassen (Originalversion)

Sie lesen gerade die Dokumentation zu Apigee Edge.
Apigee X-Dokumentation aufrufen. info

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

Die meisten Standardstile, die im Beispielportal enthalten sind, basieren auf Bootstrap. Sie können Ihr Design gemäß den folgenden Abschnitten anpassen, als Vorschau ansehen und veröffentlichen.

Im folgenden Video erfahren Sie, wie Sie das Portaldesign anpassen.

Auf den Designeditor zugreifen

Im Designeditor können Sie das Design für Ihr Portal anpassen, in der Vorschau ansehen und veröffentlichen. Wenn Sie den Themeneditor öffnen möchten, wählen Sie in der oberen Navigationsleiste im Drop-down-Menü die Option Thema aus.

Designeditor

Wie in der vorherigen Abbildung erwähnt, können Sie Folgendes tun:

Benutzerdefinierte Stile hinzufügen

Sie können Ihr Design anpassen, indem Sie im Bereich „Design-Editor“ eigenen CSS-Code hinzufügen. Alle CSS-Stilelemente werden unterstützt.

So passen Sie Ihr Design an:

  1. Wählen Sie im Drop-down-Menü der oberen Navigationsleiste Design aus.
  2. Fügen Sie Ihren benutzerdefinierten CSS-Code im Bereich „Design-Editor“ auf der rechten Seite der Seite ein.
  3. Klicken Sie auf Vorschau neu laden, um sich eine Vorschau der Änderungen im Vorschaufenster anzusehen.
    > Hinweis: Sie können durch die Portalnavigation klicken, um eine Vorschau der Inhalte auf allen Seiten zu sehen.
  4. Klicken Sie auf Veröffentlichen, um die Designänderungen zu veröffentlichen.
  5. Klicken Sie auf Veröffentlichen, um die Aktualisierung zu bestätigen.

Passen Sie das Bild „Your Logo“ (Ihr Logo) mit dem Logo Ihres Unternehmens an. Ersetzen Sie dazu die folgenden Bilddateien im Dateimanager, indem Sie Ihr Logo mit denselben Namen und relativen Dateigrößen hochladen:

  • logo.png (140 × 40 Pixel)
  • mobile-logo.png (140 × 40 Pixel)

Ändern Sie außerdem den folgenden Inhalt im CSS-Stylesheet nach Bedarf:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Weitere Informationen finden Sie unter Assets verwalten.

Hintergrundbild auf der Startseite anpassen

Sie können das Hintergrundbild auf der Startseite anpassen, indem Sie den folgenden Inhalt im CSS-Stylesheet ändern.

  • Ändern Sie die Hintergrundbilddatei und ihre Platzierung.
    Sie können Ihre eigene Version des portal-hero.jpg-Bilds mit demselben Namen und derselben relativen Dateigröße (1.440 × 540 Pixel) in den Dateimanager hochladen. Wenn Sie einen anderen Dateinamen verwenden möchten, müssen Sie den background-image-Wert im folgenden CSS bearbeiten. 

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • Das Format des Texts ändern, der über dem Hintergrundbild angezeigt wird 

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

CSS-spezifische Regeln verstehen

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

Design veröffentlichen

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

  1. Wählen Sie im Drop-down-Menü des oberen Navigationsmenüs Design aus.
  2. Klicken Sie auf Veröffentlichen.

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