Anpassen von Portal-Themen

Das Standard-Thema aller Opendatasoft-Portale kann vollständig angepasst werden, nicht nur in Bezug auf Layout und Farben, sondern auch in allen Teilbereichen wie Kopf- und Fußzeilen sowie Katalog-Karten. Themen-Konfigurationen werden über den Unterabschnitt Aussehen & Eindruck > Thema im Backoffice verwaltet.

../../_images/theme_interface.png

Drei Haupt-Bausteine machen die Themen-Benutzeroberfläche aus:

  • Die Kopfzeile (1), in der nicht nur der Titel der Oberfläche angezeigt wird, sondern auch ein Dropdown-Menü Aktuelle Aktion, um verschiedene Versionen zu verwalten (siehe Versionierung von Themen). Außerdem befinden sich drei wichtige Buttons in der Kopfzeile:

    • Speichern, um neue Konfigurationen zu speichern

    • Vorschau, um das Opendatasoft-Portal mit den aktualisierten Konfigurationen in einem neuen Tab zu öffnen

    • Liveschalten, um die aktualisierten Konfigurationen als neues Live-Thema zu definieren und auf dem Opendatasoft-Portal verfügbar zu machen

  • Der Baustein zur Verwaltung der API-Schlüssel für die Offline-Entwicklung (2), der die Verwendung und Generierung neuer API-Schlüssel ermöglicht (für zusätzliche Informationen beachten Sie den Hinweis weiter unten).

Hinweis

Es ist möglich, Stylesheets außerhalb der Plattform mit einem beliebigen Standardwerkzeug zur Webentwicklung zu erstellen und sie durch die Verwendung eines API-Schlüssels auf die Plattform zu übertragen. Für eine schnellere und einfachere Nutzung steht das OpenDataSoft-Portal-Entwicklungskit zur Verfügung: ein von Opendatasoft erstelltes Open-Source-Projekt, das über Github heruntergeladen werden kann.

Um den API-Schlüssel eines Themas zu finden und zu nutzen, klicken Sie auf den Baustein API-Schlüssel für die Offline-Entwicklung*. Der ausgeklappte Baustein zeigt dann den aktuellen API-Schlüssel an, der direkt kopiert und verwendet werden kann.

Es ist auch möglich, durch einen Klick auf den Button "Neuen Schlüssel generieren" einen neuen API-Schlüssel zu generieren. Seien Sie jedoch vorsichtig bei der Generierung neuer API-Schlüssel: Nur der jeweils aktuelle kann verwendet werden, das heißt, durch die Generierung eines neuen API-Schlüssels werden alle vorherigen widerrufen.

  • Ein Baustein mit sechs Tabs (3), die jeweils ermöglichen, einen Teil eines Opendatasoft-Portal-Themas zu konfigurieren (siehe Anpassung eines Portal-Themas):

    • Layout-Optionen, um das allgemeine Layout des Portals zu verändern

    • Farben, um die Farben für Hintergründe, Texte, Rahmen, Links etc. zu verändern

    • Stylesheet, um dem Portal mithilfe von CSS einen eigenen Stil zu verleihen

    • Kopfzeile, um die Kopfzeile mithilfe von HTML-Code zu verändern

    • Fußzeile, um die Fußzeile mithilfe von HTML-Code zu verändern

    • Katalog-Karte, um die Katalog-Karten mithilfe von HTML-Code zu verändern

Versionierung von Themen

../../_images/theme_versioning.png

Portal-Themen sind versioniert. Das bedeutet, dass jedem angepassten neuen Thema eine Versionsnummer zugewiesen wird. Wenn ein Thema fertiggestellt und livegeschaltet wurde, wir automatisch eine weitere Version erzeugt: Diese stellt die neue Entwurfsversion dar, an der an einem neuen Thema gearbeitet werden kann, bis es bereit für die Freischaltung ist.

Das Dropdown-Menü Aktuelle Aktion, das in der Kopfzeile angezeigt wird, gibt an, welche Version aktuell bearbeitet wird. Es erlaubt außerdem, zuvor bereits livegeschaltete Themen auszuwählen.

Wichtig

Sobald ein Thema livegeschaltet wurde, ist es komplett gesperrt: Es sind keine Veränderungen mehr möglich. Lediglich die neueste Entwurfsversion kann bearbeitet werden.

Während Sie an der neuesten Entwurfsversion des Portal-Themas arbeiten, können Sie eine Vorschau des Portals mit diesem neuen Thema betrachten. Ein Vorschau-Button wird zwischen dem Liveschalten- und dem Speichern-Button angezeigt; dieser öffnet das Portal entsprechend der Themen-Konfiguration des Entwurfs in einem neuen Tab.

Hinweis

Nur Anwender, die zum Bearbeiten der Domain-Eigenschaften berechtigt sind, können die Vorschau auf die neueste Version des Themas nutzen. Wenn die URL mit anderen geteilt wird, die über keine entsprechenden Berechtigungen verfügen, sehen diese das Portal mit dem Live-Thema.

Anpassen eines Portal-Themas

Layout-Optionen

../../_images/theme_layout-options.png

Der Tab Layout-Optionen ermöglicht die Anpassung des Portal-Layouts, das standardmäßig auf einem Rastersystem mit zwölf Spalten auf Grundlage des Bootstrap CSS Framework basiert.

In diesem Tab können insbesondere folgende Elemente angepasst werden:

  • die Spaltenabstände, also der Abstand (in Pixeln) zwischen den verschiedenen Elementen die eine Benutzeroberfläche des Portals bilden (Spalten, Reihen, Boxen), und

  • die responsiven Breakpoints, also die jeweiligen Bildschirmbreiten (in Pixeln), ab denen sich das Layout verändert, um sich besser an den verfügbaren Platz anzupassen (so sollte etwa das Portal-Layout auf einem Mobiltelefon anders angezeigt werden als auf einem Desktop-PC, da der Bildschirm deutlich kleiner ist). Eine Weboberfläche, die sich der Bildschirmbreite anpasst, wird als "responsiv" bezeichnet. Es können drei Breakpoints für vier Standard-Bildschirmgrößen herkömmlicher Geräte konfiguriert werden:

    • Mobiltelefon bis Tablet: passend für extra-kleine bis kleine Bildschirme

    • Tablet bis Desktop: passend für kleine bis mittlere Bildschirme

    • Desktop bis großer Desktop: passend für mittlere bis große Bildschirme

Hinweis

Mobiltelefon, Tablet, Desktop und großer Desktop werden als Referenzen angegeben, da es sich um gebräuchliche Geräte handelt, die sich gut zur Illustration der vier Standard-Bildschirmgrößen (extra-klein, klein, mittel und groß) eignen. Bedenken Sie, dass der mobile Modus nicht zwangsläufig bedeutet, dass der Benutzer ein mobiles Gerät verwendet, sondern dass der Browser auf dem Gerät nur ein kleines Anzeigefeld bietet.

Änderung einer Layout-Option:

  1. Notieren Sie eine neue Breite, in Pixeln, in der ausgewählten Textbox .

  2. Klicken Sie oben rechts auf den Button Speichern.

Um eine beliebige Layout-Option auf ihren Standardwert zurückzusetzen, klicken Sie auf den icon-trash Button.

Farben

../../_images/theme_colors.png

Der Farben-Tab ermöglicht es, die in den Texten und Links, Hintergründen sowie Rahmen verwendeten Farben anzupassen.

Wichtig

Wenn ein Benutzerdefiniertes Stylesheet für das Portal erstellt wurde, haben die darin enthaltenen CSS-Regeln Vorrang gegenüber den im Farben-Tab festgelegten Farben.

In diesem Tab kann die Farbe der folgenden Elemente eines Opendatasoft-Portals konfiguriert werden:

Kategorie

Konfigurierbare Elemente
Text

  • (Fließ-)*Text*

  • Links

  • Links in der Kopfzeile

  • Links in der Fußzeile

  • Titel

  • Abschnittstitel

  • Hervorhebung (aktives Element)

Hintergrund

  • Hintergrund der Seite

  • Hintergrund der Boxen

  • Hintergrund der Abschnittstitel*

  • Hintergrund der Kopfzeile

  • Hintergrund der Fußzeile

Rahmen

  • Boxenrahmen

Änderung einer Themen-Farbe:

  1. Notieren Sie den Hexadezimalcode der neuen Farbe in der ausgewählten Textbox oder klicken Sie auf den Farben-Button, um entweder aus den Farbvorschlägen oder mit dem Farbrad eine neue Farbe auszuwählen.

  2. Klicken Sie oben rechts auf den Button Speichern.

Um die Farbe des aktuell livegeschalteten Portal-Themas zurückzusetzen, klicken Sie auf den icon-trash Button.

Hinweis

Themenfarben können im Stylesheet der Domain als CSS-Variablen verwendet werden:

var(--variable-name)

Folgende Variablen sind verfügbar: text, links, titles, page-background, highlight, boxes-background, boxes-border, section-titles, section-titles-background, header-background, header-links, footer-background und footer-links.

Diese CSS-Variablen sind mit allen Browsern kompatibel, weil die Opendatasoft-Plattform alle Variablen automatisch durch ihre realen Farbwerte des Themas ersetzt.

Stylesheet

../../_images/theme_stylesheet.png

Der Stylesheet-Tab zeigt einen Editor an, in dem Stilregeln im CSS-Format eingetragen werden können. Dadurch können Sie Ihr Portal-Themas zusätzlich personalisieren. Alle in diesem Tab eingetragenen Regeln haben Vorrang gegenüber den in den anderen Themen-Tabs festgelegten Konfigurationen.

Um den Stil eines Elements zu ändern, suchen Sie die zugehörige Klasse und ändern Sie die gewünschte CSS-Eigenschaft. Klassen werden als Baustein, Element, Modifikator notiert: .ods-block[--blockmodifier][__element][--elementmodifier].

Hinweis

Wenn Sie für die Anpassung Ihrer Domain eigene Bilder und Schriftarten nutzen, können Sie diese problemlos als Anlagen auf die Plattform laden (siehe Anlagen hinzufügen). Dadurch kann die URL auf einfache Weise in den CSS-Code kopiert werden.

Katalog-Karte

../../_images/theme_catalog-card.png

Der Tab Katalog-Karte zeigt einen HTML-Editor an. Dieser ermöglicht die Personalisierung der im Portal-Katalog angezeigten Katalog-Karten, die die veröffentlichten Datensätze des Portals darstellen (siehe Einen Datensatz aus dem Katalog untersuchen).

Die folgenden Anweisungen ermöglichen den Abruf von Informationen im Zusammenhang mit dem Datensatz, die in die Katalog-Karte integriert werden können.

Hinweis

Die im Tab Katalog-Karte verwendeten Anweisungen verfügen über einen Standardstil, der im Stylesheet-Tab geändert werden kann.

Anweisung

 Information
ods-catalog-card

Mandatory. Umfasst die gesamte Katalog-Karte, damit die anderen Anweisungen funktionieren
ods-catalog-card-theme-icon

Ruft das Thema des Datensatzes ab und beinhaltet das zugehörige Icon
ods-catalog-card-body

Stellt nützliche Stile und Verhaltensweisen für Grenzfälle zur Verfügung (wie etwa Datensätze ohne Einträge)
ods-catalog-card-title

Ruft den Titel des Datensatzes ab
ods-catalog-card-description

Ruft die Beschreibung de Datensatzes ab
ods-catalog-card-keywords

Ruft die für den Datensatz definierten Stichwörter ab
ods-catalog-card-metadata-item

Nimmt eine item-key-Eigenschaft und eine item-title-Eigenschaft an. Ruft eine Metadaten-Eigenschaft ab, die mit dem item-key aus dem Datensatz übereinstimmt (siehe Tabelle unten) und fügt sie unter Verwendung von item-title als Beschriftung in die Seite ein. Sollte für eine optimierte Darstellung von einem .ods-catalog-card__metadata-Element umgeben sein.

Beispiel: <ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>

Die Tabelle unten listet alle verfügbaren Metadaten-Element-Keys auf:

Element-Key

 Information
license

Lizenz (wird als Link wiedergegeben, falls möglich)
language

Content-Sprache
modified

Datum der letzten Änderung
publisher

Veröffentlicher
references

Link zur Original-Datenquelle
odi_certificate_url

Link zum ODI-Zertifikat
records_count

Anzahl Einträge im Datensatz (unabhängig von Filtern)
attributions

Namen der Dateneigentümer
source_domain

Nur für verbundene Datensätze, der Domain-Name stammt aus
source_domain_title

Der Original-Titel des Datensatzes an seiner Quelldomain, nur für verbundene Datensätze
source_dataset

Der Originalbezeichner des Datensatzes an seiner Quell-Domain, nur für verbundene Datensätze
explore.download_count

Anzahl der Daten-Downloads für diesen Datensatz