Design anpassen

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

Ein Design ist eine Sammlung von Dateien, die das Design einer Website definieren. Das Portal für Entwicklerdienste ist anfangs mit einem Standarddesign definiert, das Sie anpassen können. Auf diese Weise können Sie das Design Ihres Portals anpassen. Insbesondere kannst du die Farbe von Links, Hintergründen, Text und anderen Designelementen ändern. Sie können auch die Willkommensnachricht ändern, die auf der Titelseite des Entwicklerportals angezeigt wird.

Sie können das Design über die Benutzeroberfläche des Entwicklerportals anpassen oder Code in eine benutzerdefinierte Designdatei schreiben, um die Standarddesigndatei zu überschreiben.

Abhängig von Ihrer Version des Entwicklerportals können Sie aus mehreren Designs wählen:

Design	Beschreibung
Responsives Apigee-Design	Basiert auf Bootstrap 3, dem Standarddesign für spätere Releases des Portals. Dieses Design unterstützt Geräte mit einer Breite von 768 Pixeln bis 1.400 Pixel. In diesem Design sind alle Funktionen von Bootstrap 3 verfügbar. Hinweis: Wenn Sie das Apigee Responsive-Design verwenden möchten, muss das Bootstrap 7.x-3.0-Design aktiviert sein.
Apigee DevConnect-Design	Das standardmäßige Portaldesign vor dem Apigee Responsive-Design. Vorhandene Portale können auf das neue Apigee Responsive-Design aktualisiert werden. Dazu müssen Sie jedoch zuerst dafür sorgen, dass alle Blöcke, Vorlagen und anderen Inhalte mit Bootstrap 3 kompatibel sind und das Bootstrap 7.x-3.0-Design aktiviert ist.
Apigee Base-Design	Ein übergeordnetes Thema des Apigee DevConnect-Designs, das nicht für die alleinige Verwendung bestimmt ist.

Standarddesign festlegen

Wenn Ihr Portal noch das ältere Apigee DevConnect-Design verwendet, wird möglicherweise eine Warnung im folgenden Format angezeigt:

"Apigee DevConnect theme" is out of date 

Mit den folgenden Schritten können Sie das Standarddesign für das Portal festlegen. Sie sollten ein neues Design immer zuerst auf einem Nicht-Produktionssystem testen, bevor Sie es für die Produktion bereitstellen.

So legst du das Standarddesign fest:

1. Melden Sie sich in Ihrem Portal als Nutzer mit Administrator- oder Berechtigungen zum Erstellen von Inhalten an.
2. Wählen Sie im Verwaltungsmenü von Drupal Darstellung aus. Die Liste der aktivierten Designs wird angezeigt.
3. Wählen Sie für das Design, das Sie als Standard verwenden möchten, die Option Standard festlegen aus.
   Wenn Sie das Apigee Responsive-Design verwenden möchten, muss auf dieser Seite auch das Design Bootstrap 7.x-3.0 aktiviert sein.
4. Speichern Sie die Konfiguration.

Apigee Responsive-Design anpassen

In diesem Abschnitt wird beschrieben, wie Sie das Apigee Responsive-Design konfigurieren. Dazu gehören:

• Modale Formulare anpassen
• Allgemeine Einstellungen anpassen

So passen Sie die Unterstützung von modalen Formularen an:

Das Portal verwendet das Sandbox-Modul Drupal Bootstrap Modal Formulare, um Drupal-Formulare als Modales anzuzeigen. Die Anmelde- und Registrierungsformulare funktionieren standardmäßig als Modales. Du kannst diese Funktion deaktivieren, damit die Formulare stattdessen als einzelne Seiten angezeigt werden.

1. Melden Sie sich im Entwicklerportal als Nutzer mit Administratorberechtigungen an.
2. Wählen Sie im Drupal-Verwaltungsmenü Configuration > Benutzeroberfläche > Bootstrap Modal-Formulare aus.
3. Modale Unterstützung für Formulare aktivieren oder deaktivieren
4. Wählen Sie Konfiguration speichern aus.

So passen Sie die allgemeinen Einstellungen des Apigee Responsive-Designs an:

1. Melden Sie sich in Ihrem Portal als Nutzer mit Administrator- oder Berechtigungen zum Erstellen von Inhalten an.
2. Wählen Sie Darstellung im Verwaltungsmenü von Drupal. Die Liste der aktivierten Designs wird angezeigt.
3. Wählen Sie im Bereich Apigee Responsive (Standarddesign) der Seite die Option Einstellungen aus. Klicken Sie nicht auf die Schaltfläche „Einstellungen“ oben auf der Seite.
4. Die Seite mit den Einstellungen für das Apigee Responsive-Design wird angezeigt.
5. In der folgenden Tabelle werden die Bereiche auf dieser Seite beschrieben, in denen Sie das Design konfigurieren können. Wenn Sie eine dieser Einstellungen ändern, wählen Sie „Konfiguration speichern“ aus.
   
   

   Standort	Abschnitt	Beschreibung
   Bootstrap-Einstellungen
   	Komponenten	Steuert die Anzeige von Navigationspfaden, die Position des Hauptmenüs (in den Einstellungen als „Navbar“ bezeichnet) und die Anzeige der Regionsbereiche: Navigationspfade: Navigationspfad ein-/ausblenden, den Link zur Startseite im Navigationspfad aktivieren/deaktivieren. Navigationsleiste: Ändern Sie die Position der Navigationsleiste (Hauptmenü) in feste/statische/normale Positionen, um das Layout dynamischer zu gestalten. Regionsquellen: Fügen Sie einer beliebigen Region auf der Website eine Well-Klasse hinzu, um der Region einen dunkleren Hintergrund hinzuzufügen.
   	JavaScript	So steuern Sie die Anzeige von Ankern, Popovers und Kurzinfos: Anker: Korrigieren Sie Ankerpositionen und ermöglichen Sie reibungsloses Scrollen. Popovers: Mit Popovers werden jedem Element kleine Overlays mit Inhalten hinzugefügt. Popovers aktivieren/deaktivieren und konfigurieren, wie Popover verwendet werden Kurzinfos: Konfigurieren Sie, wie Kurzinfos verwendet werden. Sie können erzwingen, dass jede Kurzinfo rechts, links, oben oder unten auf jedem Formularelement angezeigt wird, und weitere Anzeigeoptionen festlegen.
   	Erweitert	Steuert, wie das Portal BootstrapCDN verwendet, um die Dateien des Bootstrap-Designs zu aktualisieren. Sie können die Abhängigkeit des Portals von BootstrapCDN deaktivieren, müssen dann aber Ihre eigene Implementierung des Bootstrap-Frameworks bereitstellen.
   	DevConnect-Einstellungen	Lege die Willkommensnachricht, die Standardfarben und die Größe des Logos fest, das im Hauptmenü angezeigt wird.
   Globale Einstellungen überschreiben
   	Display ein-/ausblenden	Hier können Sie die Anzeige verschiedener Bereiche des Portals aktivieren und deaktivieren.
   	Einstellungen für das Logobild	Gibt das Bild an, das im Hauptmenü angezeigt wird.
   	Einstellungen für Verknüpfungssymbole	Gibt das Bild an, das in der Adressleiste eines Browsers oder als Lesezeichen für das Portal angezeigt wird.

Apigee DevConnect-Design anpassen

Das Apigee DevConnect-Design ist das Standardportaldesign für ältere Versionen des Portals und kann auf das neue Apigee Responsive-Design aktualisiert werden. Sie müssen jedoch zuerst prüfen, ob alle Blöcke, Vorlagen und anderen Inhalte mit Bootstrap 3 kompatibel sind, bevor Sie das Upgrade durchführen.

So passen Sie die allgemeinen Einstellungen des Apigee DevConnect-Designs an:

1. Melden Sie sich in Ihrem Portal als Nutzer mit Administrator- oder Berechtigungen zum Erstellen von Inhalten an.
2. Wählen Sie im Drupal-Verwaltungsmenü Darstellung > Apigee DevConnect-Design > Einstellungen aus. Daraufhin werden die Anfangseinstellungen für das Design angezeigt. Farbeinstellungen werden als Hexadezimalwerte angegeben.

   

3. Ändern Sie die Einstellungen wie gewünscht.
   Sie können beispielsweise die Willkommensnachricht hinzufügen oder ändern oder die Hintergrundfarbe des Headers ändern. Die Hintergrundfarbe des Headers ist anfänglich auf einen orangefarbenen Wert eingestellt (#FF4300). Sie können sie in eine andere Farbe ändern, z. B. in Blau (#0000FF).
4. Wenn Sie mit den Änderungen fertig sind, klicken Sie auf Speichern.

Design durch Erstellen eines untergeordneten Designs anpassen

Alle Dateien und Assets, die die mit dem Portal gelieferten Standardthemen definieren, befinden sich im Verzeichnis profiles/apigee/themes im Installationsverzeichnis des Portals. Dieses Verzeichnis befindet sich unter /var/www/html/profiles/apigee/themes, wenn Sie das Portal am Standardspeicherort installiert haben.

Wenn Sie ein Design bearbeiten möchten, um das Erscheinungsbild der Website zu ändern, ändern Sie die Designdateien unter profiles/apigee/themes nicht direkt. Andernfalls werden Ihre Änderungen beim nächsten Upgrade des Portals überschrieben.

Erstellen Sie stattdessen ein Unterthema des Designs, das Sie ändern möchten. Kopieren Sie dazu die Dateien des Standarddesigns in das Verzeichnis /sites/all/themes. Anweisungen zu Unterthemen finden Sie in der Drupal-Dokumentation unter https://www.drupal.org/node/225125.

1. Kopieren Sie den Ordner profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit in den Ordner /sites/all/themes.
2. Benennen Sie den Ordner apigee_responsive_starterkit in YOUR_THEME_NAME um.
3. Benennen Sie die Datei apigee_responsive_starterkit.info in YOUR_THEME_NAME.info um.
4. Benennen Sie css/apigee_responsive_starterkit.css in css/YOUR_THEME_NAME.css um.
5. Benennen Sie js/apigee_responsive_starterkit.js in IHR_THEME_NAME.js um.
6. Bearbeiten Sie die Datei YOUR_THEME_NAME.info und ersetzen Sie die folgenden Zeilen:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   scripts[] = js/apigee_responsive_starterkit.js
   
   durch:
   
   stylesheets[all][js] =
   css/YOUR_THEME_NAME.
7. Ändern Sie den Namen des Designs in der Datei YOUR_THEME_NAME.info von Apigee Responsive Starter Kit in IHR THEMANAME.
8. Wenn Sie einen neuen Screenshot für Ihr Design hinzufügen möchten, ersetzen Sie die vorhandene Datei screenshot.png.
9. Wenn Sie Ihrem Design ein neues Logo hinzufügen möchten, ersetzen Sie die vorhandene Datei logo.png.
10. Wenn Sie Ihrem Design ein neues Favicon hinzufügen möchten, ersetzen Sie die vorhandene Datei favicon.ico.