Portaalthema's personaliseren

Het standaard thema van alle Opendatasoft-portalen kan volledig worden gepersonaliseerd, niet enkel in termen van lay-out en kleuren, maar ook met betrekking tot specifieke ruimten, zoals header, footer en cataloguskaarten. Themaconfiguraties worden beheerd vanuit de subrubriek Look & Feel > Thema van de back-office.

../../_images/theme_interface.png

De interface Thema omvat 3 belangrijke blokken.

  • De header (1), waarin niet enkel de titel van de interface wordt weergegeven, maar ook een drop-down menu Huidige actie voor het versiebeheer (zie Versiebeheer thema's). In de header worden ook 3 belangrijke knoppen weergegeven:

    • Opslaan, om de nieuwe configuraties op te slaan

    • Voorbeeldweergave, om in een nieuw tabblad het Opendatasoft-portaal te openen met de nieuw toegepaste configuraties

    • Live maken, om de nieuw toegepaste configuraties te definiëren als het nieuw, live thema dat beschikbaar is op het Opendatasoft-portaal

  • Het beheerblok API-sleutel voor offline ontwikkeling (2), dat toelaat nieuwe API-sleutels te gebruiken en aan te maken (zie toelichting net hieronder voor meer informatie).

Opmerking

Het is mogelijk stijlbladen buiten het platform aan te maken met om het even welke standaard web ontwikkelingstool en deze naar het platform te pushen met behulp van een API-sleutel. Voor een eenvoudiger en sneller gebruik is de Opendatasoft Portal Development Kit beschikbaar: het is een open source-project dat aangemaakt is door Opendatasoft en dat op Github kan worden gedownload.

Om de API-sleutel van een thema terug te vinden en te gebruiken, klik op het blok API-sleutel voor offline ontwikkeling om deze te vergroten. De huidige API-sleutel staat weergegeven in het blok en is klaar om te worden gekopieerd en gebruikt.

Het is ook mogelijk om een nieuwe API-sleutel aan te maken door te klikken op de knop "Nieuwe sleutel aanmaken". Wees echter voorzichtig wanneer u nieuwe API-sleutels aanmaakt: enkel de huidige kan worden gebruikt. Dit betekent dat door het aanmaken van een nieuwe API-sleutel alle vorige worden herroepen.

  • Een blok met 6 tabbladen (3). Elk ervan laat toe om een deel van het thema van een Opendatasoftportaal te configureren (zie Een portaalthema personaliseren):

    • Lay-outopties, om de algemene lay-out van het portaal te wijzigen

    • Kleuren, om de kleuren van achtergronden, teksten, randen, koppelingen, enz. te wijzigen

    • Stijlblad, om meer stijl aan het portaal toe te voegen met CSS

    • Header, om de header te wijzigen met HTML-code

    • Footer, om de footer te wijzigen met HTML-code

    • Cataloguskaart, om de cataloguskaarten te wijzigen met HTML-code

Versiebeheer van thema's

../../_images/theme_versioning.png

De versie van portaalthema's wordt beheerd. Dit betekent dat aan elk gepersonaliseerd nieuw thema een versienummer wordt toegekend. Eenmaal een thema is voltooid en live is gemaakt, wordt automatisch een andere versie aangemaakt: het is het nieuwe ontwerpthema waaraan gewerkt wordt tot het klaar is om live te gaan.

Het drop-down menu Huidige actie dat weergegeven wordt in de header geeft aan op welke versie momenteel wordt gewerkt. Het laat ook toe vorige thema's te selecteren die al live zijn gegaan.

Belangrijk

Eenmaal een thema live is, wordt het volledig vergrendeld: het is niet meer mogelijk andere wijzigingen aan te brengen. Enkel de laatste ontwerpversie kan worden gewijzigd.

Wanneer aan de laatste ontwerpversie van het portaalthema wordt gewerkt, is het mogelijk om vooraf te bekijken hoe het portaal er zal uitzien met dit nieuwe thema. Er wordt immers een knop Voorbeeldweergave weergegeven tussen de knoppen Live maken en Opslaan, zodat een nieuw tabblad kan worden geopend met het portaal dat geconfigureerd is met het ontwerpthema.

Opmerking

Enkel gebruikers die in staat zijn domeineigenschappen te bewerken kunnen een voorbeeldweergave krijgen van de laatste themaversie; Wanneer de URL wordt gedeeld met andere gebruikers aan wie niet de juiste toelatingen zijn verleend, zouden ze het portaal zien met het live thema.

Een portaalthema personaliseren

Lay-outopties

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

Het tabblad Lay-outopties laat toe de lay-out van het portaal te personaliseren. Deze berust standaard op een rastersysteem dat uit 12 kolommen bestaat en dat geërfd werd van het Bootstrap CSS kader.

In dit tabblad is het meer specifiek mogelijk het volgende te wijzigen:

  • de Spatiebreedte. Dit is de ruimte (in pixels) tussen de verschillende elementen waaruit een interface van het portaal bestaat (kolommen, rijen en vakjes), en

  • de Responsieve breekpunten. Dit zijn de verschillende breedtes van het scherm (in pixels) op basis waarvan de lay-out een aanpassing zal doorvoeren om de beschikbare ruimte (bijv. de lay-out van het portaal zou moeten verschillen afhankelijk van het feit of het gebruikt wordt op een mobiele telefoon of een desktop omdat het scherm van een mobiele telefoon veel kleiner is dan dat van een desktop) aan te passen. Een web interface die aanpast afhankelijk van de schermbreedte wordt immers "responsief" genoemd. Er zijn 3 breekpunten die kunnen worden geconfigureerd tussen 4 standaard schermgroottes voor gewone toestellen:

    • Mobiel naar tablet: om van een extra klein scherm naar een klein scherm te gaan

    • Tablet naar desktop: om van een klein scherm naar een middelgroot scherm te gaan

    • Desktop naar grote desktop: om van een middelgroot scherm naar een groot scherm te gaan

Opmerking

"Mobiel", "Tablet", "Desktop" en "Grote desktop" worden als referentie gebruikt omdat het gewone toestellen zijn die vrij goed de 4 standaard schermgroottes illustreren (extra klein, klein, middelgroot en groot) die men kan terugvinden. Denk er wel aan dat Mobiel bijvoorbeeld niet betekent dat de gebruiker effectief een mobiel toestel gebruikt, maar wel dat de browser die door de gebruiker gebruikt wordt enkel een extra kleine weergaveruimte biedt.

Om een lay-outoptie te wijzigen:

  1. Schrijf in het gekozen tekstvak een nieuwe breedte, in pixels.

  2. Klik op de knop Opslaan in de rechter bovenhoek.

Om een lay-outwaarde opnieuw in te stellen naar de standaardwaarde ervan, hoeft u enkel op de knop icon-trash te klikken.

Kleuren

../../_images/theme_colors.png

Het tabblad Kleuren laat toe de kleuren die gebruikt worden in de teksten en koppelingen, achtergronden en randen van het portaal te personaliseren.

Belangrijk

Wanneer een gepersonaliseerd stijlblad aangemaakt geweest is voor het portaal zullen de CSS-regels die erin staan voorrang hebben op de kleuren die gedefinieerd staan in het tabblad Kleuren.

In dit tabblad kan de kleur van de volgende elementen van een Opendatasoft-portaal worden geconfigureerd:

Categorie

Elementen die kunnen worden geconfigureerd

Tekst

  • Text (main)

  • Links

  • Links in de header

  • Links in de footer

  • Titles

  • Section titles

  • Highlight (actief element)

Achtergrond

  • Page background

  • Boxes background

  • Section titles background

  • Header background

  • Footer background

Randen

  • Boxes border

Om een themakleur te wijzigen:

  1. Schrijf in het gekozen tekstvak de hexadecimale code van de nieuwe kleur of klik op de kleurknop om een nieuwe kleur te kiezen door gebruik te maken van ofwel Mooie kleuren of het Kleurwiel.

  2. Klik op de knop Opslaan in de rechter bovenhoek.

Om de kleur van het portaalthema dat momenteel live is opnieuw in te stellen, klik op de knop icon-reset.

Opmerking

Er kunnen themakleuren in het stijlblad van het domein gebruikt worden als CSS-variabelen:

var(--variable-name)

De beschikbare variabelen zijn: text, links, titles, page-background, highlight, boxes-background, boxes-border, section-titles, section-titles-background, header-background, header-links, footer-background en footer-links.

Deze CSS-variabelen zijn compatibel met alle browsers omdat het Opendatasoft-platform automatisch alle variabelen vervangt door hun echte themakleurwaarden.

Stijlblad

../../_images/theme_stylesheet.png

In het tabblad Stijlblad staat een editor waaraan zuivere CSS stijlregels kunnen worden toegevoegd. Deze laat toe de personalisering van een portaalthema nog verder door te voeren. Alle regels die in dit tabblad zijn toegevoegd hebben voorrang op de configuraties zoals die gedefinieerd zijn in de andere thematabbladen.

Om de stijl van een element te wijzigen, hoeft u enkel de categorie van het element terug te vinden en de gewenste CSS-eigenschap te wijzigen. Categorienamen worden geschreven als block, element, modifier: .ods-block[--blockmodifier][__element][--elementmodifier].

Opmerking

Wanneer specifieke afbeeldingen en lettertypes worden gebruikt om het domein te personaliseren, aarzel dan niet om deze als eigenschappen te uploaden in het platform (zie Eigenschappen toevoegen). Zo kunt u gemakkelijk de URL's van de eigenschappen kopiëren en deze in de CSS-code plakken.

Cataloguskaart

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

In het tabblad Cataloguskaart staat een editor waaraan zuivere HTML kan worden toegevoegd. Dit laat toe de cataloguskaarten die weergegeven staan in de catalogus van het portaal, die de gepubliceerde datasets weergeeft van dat portaal, te personaliseren (zie Een dataset uit de catalogus onderzoeken).

De volgende richtlijnen laten toe informatie met betrekking tot een dataset terug te vinden die zou kunnen worden opgenomen in de cataloguskaart.

Opmerking

Richtlijnen die gebruikt worden in de Cataloguskaart gaan gepaard met een standaardstijl die gewijzigd kan worden in het tabblad Stijlblad.

Richtlijn

Informatie
ods-catalog-card

Verplicht. Omvat de volledige cataloguskaart opdat de andere richtlijnen kunnen werken
ods-catalog-card-theme-icon

Zoekt het thema van de dataset op en integreert het relevante pictogram
ods-catalog-card-body

Voorziet nuttige stijl- en gedragsregels (bijv. datasets zonder records, …)
ods-catalog-card-title

Zoekt de titel van de dataset op
ods-catalog-card-description

Zoekt de omschrijving van de dataset op
ods-catalog-card-keywords

Zoekt de trefwoorden op zoals die gedefinieerd zijn voor de dataset
ods-catalog-card-metadata-item

Neemt een item-key en een item-title attribuut, zoekt een metadataeigenschap die overeenstemt met het item-key (zie onderstaande tabel) uit de dataset en integreert deze in de pagina met item-title als het label ervan. Het dient omwikkeld te worden door middel van een .ods-catalog-card__metadata element voor een betere styling maar zonder enige verplichting.

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

In onderstaande tabel wordt een lijst gegeven van alle beschikbare metadata-itemsleutels:

Itemsleutel

Informatie

licentie

Licentie (zal indien mogelijk aangeleverd worden als een koppeling)
language

Taal van de inhoud
modified

Datum van laatste wijziging
publisher

Naam van de uitgever

referenties

Koppeling naar de oorspronkelijke born van de data
odi_certificate_url

Koppeling naar het ODI-certificaat
records_count

Aantal records in de dataset (ongeacht filters)

attributen

Namen van de eigenaar van de data
source_domain

Enkel voor samengevoegde datasets, de naam van het domein waar de dataset van afkomstig is
source_domain_title

Enkel voor samengevoegde datasets, de oorspronkelijke titel van de dataset op het brondomein ervan
source_dataset

Enkel voor samengevoegde datasets, de oorspronkelijke identifier van de dataset op het brondomein ervan
explore.download_count

Aantal downloads van data voor deze dataset