Anpassen von Thema und Portal-Icon¶

Wichtig

Die Theme-Anpassung ist nicht für Freemium-Domains verfügbar (erstellt mit Hilfe der Seite 'Kostenlos ausprobieren <https://www.opendatasoft.com/discover-opendatasoft-demo/>`_ auf der Opendatasoft-Website <https://www.opendatasoft.com>`_). Falls Ihre Domain eine Freemium-Domain ist und Sie diese Themenfunktion haben möchten, mailen Sie uns einfach! <sales@opendatasoft.com>`_

Die Opendatasoft-Themenmanagement-Schnittstelle befindet sich im Back-Office der Domain. Um auf sie zuzugreifen, müssen Sie auf den Look & feel-Abschnitt in der Navigationsleiste klicken und dann auf den Link Thema.

Hinweis

Um auf die Thema-Seite zu gelangen, müssen Sie in der Lage sein, die Domain-Eigenschaften zu bearbeiten. Weitere Informationen zu Berechtigungen finden Sie hier: Sicherheitsmanagement Ihrer Domain.

Durch die Nutzung der verschiedenen Formulare auf dieser Seite können Sie jeden Aspekt Ihres Portals anpassen, von den Grundfarben bis hin zu weitreichenden Layout-Änderungen.

Versionierung¶

Bevor Sie die zahlreichen Anpassungsmöglichkeiten des Portalthemas erkunden, sollte betont werden, dass alles, was Sie auf dieser Seite tun, versioniert wird. Das bedeutet, dass jedem Ihrer Arbeitsschritte eine Versionsnummer zugeordnet wird und Sie jederzeit eine neue Version erstellen können. Sie arbeiten dabei immer an der neuesten Version (sehen Sie sie als Ihren Arbeitsentwurf an), können jedoch jede beliebige Version live schalten (d. h. auf Ihr Portal anwenden). Sobald Sie die neueste Version live schalten, wird eine weitere erstellt, die wiederum zu Ihrem Arbeitsentwurf wird. Es kann jeweils nur die neueste Version bearbeitet werden, alle älteren sind schreibgeschützt.

Während Sie an der neuesten Version arbeiten, können Sie Ihre Änderungen in der Vorschau ansehen, indem Sie auf die Schaltfläche "Vorschau" klicken. Daraufhin öffnet sich ein neues Fenster, das Ihr Portal mit der aktuellen Version des angewandten Portal-Themas zeigt.

Hinweis

Die Vorschau der neuesten Themenversion kann nur von Benutzern aufgerufen werden, die die Domain-Eigenschaften bearbeiten können. Wenn Sie die URL der Vorschau mit anderen Benutzern teilen, sehen diese keinen Unterschied in der Live-Version.

Hinweis

Sie können die neueste Themenversion jederzeit und auf jeder Seite des Front-Office des Portals in der Vorschau ansehen, indem Sie der URL den stage_theme=true Parameter hinzufügen.

Der Versionsselektor zeigt Ihnen genau an, ob Sie an der neuesten Version arbeiten oder eine ältere ansehen bzw. welche Version live geschaltet ist.

Anpassungsoptionen¶

Layout-Optionen¶

Das Portal-Layout beruht auf einem 12-Spalten-Rastersystem, das in großen Teilen aus dem 'Bootstrap CSS Framework <http://getbootstrap.com/css/#grid>`_ übernommen wurde und an und für sich wenige interne Variablen besitzt, die über sein ganzes CSS hinweg verwendet werden. Mithilfe dieses Tabs können Sie den Wert von einigen dieser Variablen einstellen.

Die jetzt überschreibbaren Variablen sind die Spaltenabstände und die responsiven Breakpoints.

Bei den Spaltenabständen handelt es sich um die Abstände zwischen Spalten, Zeilen und benachbarten Boxen.

Bei den responsiven Breakpoints handelt es sich um die jeweiligen Bildschirmbreiten (in Pixeln), ab denen sich das Layout verändert, um sich besser an das zur Verfügung stehende Platzangebot anzupassen. Es stehen 4 Modi zur Verfügung: extra-klein, klein, mittel und groß, d. h. es sind 3 Breakpoints möglich: von extra-klein zu klein, vom klein zu mittel und von mittel zu groß. Diese Modi entsprechen allgemein auch den Kategorien Mobiles Endgerät, Tablet, Desktop und großer Desktop.

Hinweis

Denken Sie jedoch daran, dass der mobile Modus nicht bedeutet, dass der Benutzer momentan ein mobiles Gerät verwendet, sondern dass der Browser auf dem Gerät nur ein kleines Anzeigefeld bietet.

Zum Zurücksetzen einer Variable auf ihren Standardwert klicken Sie einfach auf die Löschen-Schaltfläche neben ihr.

Farben¶

Wie bei den Layout-Optionen beruht die Opendatasoft-Plattform auf mehreren Farbvarianten für den Stil der Portalelemente. Sie können die Farbeingaben an diesem Tab verwenden, um einige von ihnen einzustellen. So können Sie mit nur wenigen Klicks Ihr Portal in den eigenen Farben gestalten.

Hinweis

Diese Variablen überschreiben die Standard-Themenfarben. Die benutzerdefinierten Stilregeln, die Sie in das Stylesheet schreiben können, haben diesen Farben gegenüber jedoch Vorrang. Das bedeutet, dass Ihre gewählten Farben möglicherweise nicht sichtbar sind, wenn Sie spezifischere CSS-Regeln festgelegt haben.

Hinweis

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

var(--variable-name)

Die verfügbaren Variablen sind: 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 ersetzt.

Stylesheet¶

Falls Ihnen die die Farbanpassung nicht reicht und Sie weiterreichende Änderungen vornehmen möchten, müssen Sie Ihr eigenes CSS schreiben. Mit diesem Tab können Sie ganz einfach Ihre eigenen Stilregeln eingeben. Sie kommen an oberster Stelle vor den Opendatasoft-Standardregeln und haben Vorrang vor ihnen.

Falls Ihre benutzerspezifische Anpassung spezifische Bilder und Schriftarten enthält, können Sie diese auf die Plattform hochladen, indem Sie die Anlagenverwaltungsseite verwenden. Sie können nun die Anlagen-URLs kopieren und in Ihren CSS-Code einfügen.

Wichtig

Zum Ändern eines Elementstils müssen Sie lediglich die Elementklasse herausfinden und die gewünschte CSS-Eigenschaft ändern. Dies hat keine unerwünschten Nebeneffekte (im Rahmen dieses einzelnen Klassennamens) und funktioniert garantiert (da der Hierarchiebaum meist flach ist).

Dies ist möglich, weil der gesamte CSS Code von Opendatasoft nach der 'BEM-Methodik' geschrieben <http://getbem.com/introduction/>`_ und mit dem Präfix ods- versehen ist, so dass sie nicht mit Ihren eigenen Styles in Konflikt geraten und ganz einfach überschrieben werden können. Eine umfassende Einführung zu dieser Methodik finden Sie auf der CSS-Tricks-Website <https://css-tricks.com/bem-101/>`_.

Mit einem Wort, Klassennamen werden als Block, Element, Modifier geschrieben (daher die Bezeichnung BEM) .ods-block[--blockmodifier][__element][--elementmodifier]. Der Hierarchiebaum ist maximal 2 Selektoren tief. Zudem ist der relevante Stil so nahe am Element wie möglich.

Kopf- und Fußzeile¶

Sowohl die Kopfzeile als auch die Fußzeile können im Abschnitt Domain-Anpassung und Farbauswahl individuell gestaltet werden. Doch Firmen möchten meist auch das Layout und den Inhalt dieser Bereiche genauer anpassen.

Kopf- und Fußzeile sind in unabhängige AngularJS-Anwendungen eingebunden, d. h. Sie können ng-if, ng-class, ng-show, ng-hide sowie sämtliche Standardrichtlinien für Angular verwenden, um die Bereiche dynamischer zu gestalten. Eine der gängigen Anfragen ist die minimierte Anzeige der Kopfzeile in einem aufklappbaren Seitenmenü unterhalb einer bestimmten Breite des Anzeigebereichs. Zu diesem Zweck bieten wir die ods-responsive-menu Richtlinie. Weitere Informationen siehe diese spezielle Seite.

Wir bieten zudem Platzhalter, die durch den in den Domain-Anpassungsoptionen spezifizierten Content ersetzt werden, wie etwa Menüpunkte, Sprachen-Selektoren und Logos. Die vollständige Liste wird direkt über dem Code-Bereich angezeigt.

Hinweis

Sie können Angular für die Kopf- und Fußzeile nutzen, das Standard JS ist jedoch aus Sicherheitsgründen noch nicht zulässig.

Katalog-Karte¶

Auf der Katalogseite Ihrer Domain wird jeder Datensatz durch eine eigene Katalog-Karte dargestellt. Diese Karten zeigen ein paar Standardelemente. Sie möchten jedoch eventuell ihr Aussehen komplett verändern, neue Links hinzufügen oder neue Verhalten implementieren.

Hier ein paar Beispiele für Katalog-Karten:

../../_images/theme__catalog-card-example-central.png

../../_images/theme__catalog-card-example-datacorsica.png

../../_images/theme__catalog-card-example-toulouse.png

Wir bieten praktische Richtlinien, um Informationen zu einem Datensatz einfach abrufen und einbinden zu können. Diese Richtlinien werden zusammen mit einem Standardstil angeboten, der mit dem Stylesheet-Tab überschrieben werden kann.

Die Richtlinien lauten folgendermaßen:

ods-catalog-card muss die ganze Katalog-Karte umbrechen, damit die übrigen Richtlinien funktionieren.
ods-catalog-card-theme-icon ruft das Thema des Datensatzes auf und bindet das relevante Icon ein.
ods-catalog-card-body bietet nützliche Randfälle für den Umgang mit Stil und Verhalten (Datensätze ohne Einträge, API Proxy...).
ods-catalog-card-title, ods-catalog-card-description und ods-catalog-card-keywords sind selbsterklärende Richtlinien.
ods-catalog-card-metadata-item übernimmt ein item-key und ein item-title Attribut, ruft eine Metadaten-Eigenschaft ab, die mit dem item-key aus dem Datensatz übereinstimmt und bindet sie in die Seite ein, die den item-title` als Kennzeichen verwendet. Es sollte für einen optimalen Stil von einem .ods-catalog-card__metadata Element eingebunden werden, dies ist jedoch nicht verpflichtend.
```
<ods-catalog-card-metadata-item item-title="Data" item-key="records_count"></ods-catalog-card-metadata-item>
```

Metadaten Element-Key¶
Element-Key	Element-Titel
license	Lizenz (wird als Link wiedergegeben, falls möglich)
Sprache	Content-Sprache
modified	Datum der letzten Änderung
publisher	Veröffentlicher
Referenzen	Link zur Original-Datenquelle
odi_certificate_url	Link zum ODI-Zertifikat
records_count	Anzahl Einträge im Datensatz (unabhängig von Filtern)
Zuordnungen	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

Offline-Entwicklung¶

Im letzten Abschnitt haben wir gesehen, dass Sie detaillierte CSS-Regeln schreiben können, die das Standard-Thema des Portals überschreiben können. Es kann jedoch mühsam sein, sie alle in den Browser zu schreiben, insbesondere für Gelegenheitsentwickler, die leistungsstarke Text-Editoren gewohnt sind. Da nur reines CSS akzeptiert wird, müssen Sie von Hand sicherstellen, dass Ihre Regeln korrekt mit den Anbieter-Präfixen versehen sind und keine der gewöhnlichen Funktionen für Frontend-Entwickler nutzen (etwa Preprozessoren wie Variablen oder Verschachtelungen) .

Aus all diesen Gründen haben wir ein API erstellt, das es Benutzern ermöglicht, anhand des Themen-API-Schlüssels ihre Stilregeln lokal zu schreiben, dabei jedes beliebige Tool zu verwenden und den daraus resultierenden CSS-Code auf die Plattform zu pushen. Wir haben diesem API einen Client beigefügt sowie die üblichen Tools (ohne Preprozessor und Autoprefixer) im Opendatasoft Portal-Entwicklungskit.

Dieses ODV-Portal Entw.kit ist ein Open-Source-Projekt, das kostenlos auf Github erhältlich ist. Sie können es einfach herunterladen und an Ihren Entwicklungs-Workflow anpassen.

Themen-API-Schlüssel¶

Sie finden den Themen-API-Schlüssel auf der Portal-Themenanpassungsseite. Dazu einfach den Abschnitt API-Schlüssel für die Offline-Entwicklung ausklappen und den Schlüssel kopieren.

Warnung

Durch das Generieren eines neuen Schlüssels verfallen die alten Schlüssel. Dadurch können Entwickler, die einen alten Schlüssel verwenden, ihre Arbeit nicht auf die Plattform pushen. Denken Sie also daran, jedem Entwickler, der an Ihrem Portalthema arbeitet, den neuen Schlüssel weiterzugeben, um sicherzugehen, dass die Entwicklung ohne Unterbrechung fortgesetzt werden kann.