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.

../../_images/theme_interface.png

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.

../../_images/theme_versioning.png

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.

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

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.

../../_images/theme_colors.png

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.

../../_images/theme_stylesheet.png

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.

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.

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

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.

../../_images/theme_offline-dev.png

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.