Design anpassen

<ph type="x-smartling-placeholder"></ph> Sie sehen die Dokumentation zu Apigee Edge.
Gehen Sie zur Apigee X-Dokumentation. Weitere Informationen

Ein Design ist eine Sammlung von Dateien, die das Erscheinungsbild einer Website definieren. Die Das Portal für Entwicklerdienste wird anfangs mit einem Standarddesign definiert, das Sie anpassen können. Hier kannst du das Design deines Portals nach deinen Vorstellungen anpassen. Mehr insbesondere die Farbe von Links, Hintergründen, Text und anderen Designelementen. Ich können Sie auch die Willkommensnachricht ändern, die auf der Titelseite Ihres Entwicklerportals angezeigt wird.

Sie können das Design über die Benutzeroberfläche des Entwicklerportals anpassen oder Code in einem benutzerdefinierten Designdatei die Standarddesigndatei überschreiben.

<ph type="x-smartling-placeholder">

Abhängig von Ihrer Version des Entwicklerportals stehen mehrere Designs zur Auswahl. von:

Design	Beschreibung
Responsives Apigee-Design	Basierend auf Bootstrap 3, dem Standarddesign für neuere Versionen des Portals. Dieses Design unterstützt Geräte mit einer Breite von 768 Pixeln bis 1400 Pixel. In diesem Design sind alle Funktionen von Bootstrap 3 verfügbar. Hinweis: Wenn Sie das responsive Apigee-Theme verwenden möchten, muss das Bootstrap- Das Design 7.x-3.0 ist aktiviert.
Apigee DevConnect-Design	Das standardmäßige Portaldesign vor dem Responsive-Design von Apigee. Vorhandene Portale können auf das neue Apigee Responsive-Design aktualisiert werden, müssen aber zuerst sicherzustellen, dass alle Blöcke, Vorlagen und sonstigen Inhalte mit Bootstrap 3 kompatibel sind und dass das Bootstrap 7.x-3.0-Design aktiviert ist.
Apigee-Basisdesign	Ein übergeordnetes Thema des Apigee DevConnect-Designs, das nicht für dessen gehören.

Festlegen des Standarddesigns

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

"Apigee DevConnect theme" is out of date 

Mit dem folgenden Verfahren können Sie das Standarddesign für das Portal festlegen. Sie sollten Testen Sie ein neues Design stets zuerst auf einem Nicht-Produktionssystem, bevor Sie es für für die Produktion.

<ph type="x-smartling-placeholder">

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 Darstellung im Drupal-Verwaltungsmenü aus. Die Liste der aktivierten erscheinen.
3. Wählen Sie für das Design, das Sie als Standarddesign verwenden möchten, die Option Standard festlegen aus.
   Wenn Sie das responsive Apigee-Design verwenden möchten, muss das Bootstrap 7.x-3.0-Design auch auf dieser Seite aktiviert ist.
4. Speichern Sie die Konfiguration.

Responsives Apigee-Theme anpassen

In diesem Abschnitt wird beschrieben, wie Sie das responsive Apigee-Theme konfigurieren:

• Modale Formulare anpassen
• Allgemeine Einstellungen anpassen

So passen Sie die Unterstützung für modale Formulare an:

Das Portal verwendet den Drupal-Bootstrap Modale Formulare-Sandbox-Modul zur Anzeige von Drupal-Formularen als modales Fenster. Die Anmelde- und Registrierungsformulare Standardfunktion als modales Fenster verwendet. Sie können diese Funktion deaktivieren, damit diese Formulare als stattdessen einzelne Seiten.

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

So passen Sie die allgemeinen Einstellungen des Responsive-Designs von Apigee 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 Drupal-Verwaltungsmenü aus. Liste der aktivierten Designs angezeigt wird.
3. Wählen Sie im Bereich Apigee responsiv (Standarddesign) die Option Einstellungen – klicken Sie nicht oben auf der Seite auf die Schaltfläche „Einstellungen“.
4. Die Seite mit den Einstellungen für das responsive Apigee-Theme wird angezeigt.
5. In der folgenden Tabelle werden die Bereiche auf dieser Seite beschrieben, die Sie zur Konfiguration des aus. Wenn Sie eine dieser Einstellungen ändern, wählen Sie „Konfiguration speichern“ aus.
   
   

   Gebiet	Abschnitt	Beschreibung
   Bootstrap-Einstellungen
   	Komponenten	Steuern Sie die Anzeige von Navigationspfaden, die Position des Hauptmenüs (die Navbar in den Einstellungen) und die Anzeige der Regionsquellen: Navigationspfade: Navigationspfad ein-/ausblenden, Link zur Startseite aktivieren/deaktivieren im Navigationspfad. Navbar: Position der Navigationsleiste (Hauptmenü) wie folgt ändern: feste/statische/normale Positionen, wodurch das Layout dynamischer wird. Regionswellen: Hier können Sie jeder Region auf der Website eine Wellenklasse hinzufügen. um dem Bereich einen dunkleren Hintergrund hinzuzufügen.
   	JavaScript	Legen Sie fest, wie Anker, Pop-over und Kurzinfos angezeigt werden: Anker: Hiermit können Sie die Ankerpositionen fixieren und die Glättung ermöglichen. durch Scrollen. Popovers: Bei Popovers werden jedem Element kleine Overlays mit Inhalten hinzugefügt. -Elements. Sie können Popover aktivieren bzw. deaktivieren und ihre Verwendung konfigurieren. Kurzinfos: Konfigurieren Sie die Verwendung von Kurzinfos. Sie können jedes einzelne Kurzinfo, die rechts, links, oben oder unten von jedem Formularelement angezeigt werden soll, und legen Sie weitere Anzeigeoptionen.
   	Erweitert	Steuert, wie das Portal BootstrapCDN verwendet um die Bootstrap-Designdateien zu aktualisieren. Sie können die Abhängigkeit des Portals auf BootstrapCDN. Sie müssen dann aber Ihre eigene Bootstrap-Implementierung bereitstellen. Framework.
   	DevConnect-Einstellungen	Die Willkommensnachricht, die Standardfarben und die Größe des angezeigten Logos festlegen im Hauptmenü.
   Globale Einstellungen überschreiben
   	Display ein-/ausschalten	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 das Verknüpfungssymbol	Gibt das Bild an, das in der Adressleiste eines Browsers oder für ein Lesezeichen angezeigt wird zum Portal.

Apigee DevConnect-Design anpassen

Das Apigee DevConnect-Design ist das Standarddesign des Portals für ältere Versionen des Portals. kann auf das neue responsive Apigee-Design aktualisiert werden. Zunächst müssen Sie jedoch sicherstellen, Blöcken, Vorlagen und anderen Inhalten mit Bootstrap 3 kompatibel ist, bevor die ein Upgrade ausführen.

So passen Sie die allgemeinen Einstellungen von Apigee DevConnect an Thema:

1. Melden Sie sich in Ihrem Portal als Nutzer mit Administrator- oder Berechtigungen zum Erstellen von Inhalten an.
2. Wählen Sie Darstellung > Apigee DevConnect-Design > Einstellungen in der Drupal-Version Menü „Verwaltung“. Daraufhin werden die Anfangseinstellungen für das Design angezeigt. Die Farbeinstellungen sind Hexadezimalwerte angegeben werden.

   

3. Passen Sie die Einstellungen nach Bedarf an.
   Sie können beispielsweise die Willkommensnachricht hinzufügen oder ändern oder die Hintergrundfarbe der Kopfzeile ändern. Die Die Hintergrundfarbe der Kopfzeile ist anfänglich auf Orange eingestellt (#FF4300). Sie können ihn in eine andere Farbe wie z. B. Blau (#0000FF) ändern.
4. Wenn Sie mit dem Ändern der Einstellungen fertig sind, klicken Sie auf Speichern.

Design durch Erstellen eines Unterdesigns anpassen

Alle Dateien und Assets, die die mit dem Portal versendeten 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 Design der Website zu ändern, ändern Sie nicht die Designdateien unter profiles/apigee/themes direkt an. In diesem Fall werden Ihre Änderungen beim nächsten Upgrade des Portals überschrieben.

Erstellen Sie stattdessen ein Unterthema des Designs, das Sie ändern möchten, indem Sie das Standarddesign kopieren. Dateien im Ordner /sites/all/themes -Verzeichnis. Anleitungen zu Unterthemen finden Sie in der Dokumentation unter https://www.drupal.org/node/225125.

1. Kopieren Sie den Ordner profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit zu /sites/all/themes Ordner.
2. Benennen Sie den Ordner apigee_responsive_starterkit um. für YOUR_THEME_NAME
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.
5. Benennen Sie js/apigee_responsive_starterkit.js in YOUR_THEME_NAME.js erstellt.
6. Bearbeiten Sie die Datei YOUR_THEME_NAME.info und ersetzen Sie die folgenden Zeilen:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   Skripts[] = js/apigee_responsive_starterkit.js
   
   mit:
   
   stylesheets[all][] = css/IHR_THEME_NAME.css
   script[] = js/DEIN_THEME_NAME.js
7. Ändern Sie den Namen des Designs in der Datei YOUR_THEME_NAME.info von Apigee Responsive Starter Kit in IHR THEME. NAME
8. Wenn Sie dem Design einen neuen Screenshot hinzufügen möchten, ersetzen Sie einfach die vorhandene Datei screenshot.png.
9. Wenn Sie dem Design ein neues Logo hinzufügen möchten, ersetzen Sie die vorhandene Datei logo.png.
10. Wenn Sie dem Design ein neues Favicon hinzufügen möchten, ersetzen Sie die vorhandene Datei favicon.ico.