Design anpassen (Originalversion)

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

Ein Design besteht aus einem globalen Cascading Style Sheet (CSS), das allen Seiten in Ihrem Portal ein einheitliches Design bietet. Ziel eines Designs ist es, das Erscheinungsbild aller Portalseiten gleichzeitig anzupassen.

Die meisten Standardstile, die im Beispielportal bereitgestellt werden, 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.

Designeditor aufrufen

Im Designeditor können Sie das Design für Ihr Portal anpassen, in der Vorschau anzeigen und veröffentlichen. Wählen Sie zum Öffnen des Designeditors im Drop-down-Menü oben in der Navigationsleiste Design aus.

Designeditor

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

Benutzerdefinierte Stile hinzufügen

Passen Sie Ihr Design an, indem Sie im Stileditor-Bereich eigenen CSS-Code hinzufügen. Alle CSS-Stilelemente werden unterstützt.

So passen Sie Ihr Design an:

  1. Wählen Sie oben in der Navigationsleiste im Drop-down-Menü die Option Design aus.
  2. Fügen Sie Ihren benutzerdefinierten CSS-Code im Stileditor-Bereich auf der rechten Seite der Seite hinzu.
  3. Sehen Sie sich eine Vorschau der Änderungen im Vorschaubereich an, indem Sie auf Vorschau aktualisieren klicken.
    > Hinweis: Sie können sich durch die Portalnavigation klicken, um eine Vorschau der Inhalte auf allen Seiten anzusehen.
  4. Klicken Sie auf Veröffentlichen, um die Designänderungen zu veröffentlichen.
  5. Klicken Sie zur Bestätigung auf Veröffentlichen.

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

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

Ändern Sie außerdem bei Bedarf die folgenden Inhalte im CSS-Stylesheet:

/* ==== 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

Passen Sie das Hintergrundbild auf der Startseite an, indem Sie den folgenden Inhalt im CSS-Stylesheet ändern.

  • Ändern Sie die Hintergrundbild-Datei und ihre Platzierung.
    Sie können Ihre eigene Version des portal-hero.jpg-Bildes in den Dateimanager hochladen. Verwenden Sie dazu denselben Namen und die gleiche relative Dateigröße (1.440 × 540 Pixel). Wenn Sie einen anderen Dateinamen verwenden möchten, achten Sie darauf und bearbeiten Sie den background-image-Wert im CSS-Code unten.

    /* ==== Jumbotron ====
    a billboard for drawing attention, from Bootstrap  */
    
    home-page-jumbotron-bg {
        background-image: url('/files/portal-hero.jpg');
    }
  • Ändere das Format des Textes, der das Hintergrundbild überlagert.

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

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

Design veröffentlichen

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

  1. Wählen Sie oben im Navigationsmenü im Drop-down-Menü die Option Design aus.
  2. Klicke auf Veröffentlichen.

Um Ihre veröffentlichten Inhalte im Live-Portal anzusehen, klicken Sie in der oberen Navigationsleiste auf Live Portal.