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.

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¶

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¶

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:
Schrijf in het gekozen tekstvak een nieuwe breedte, in pixels.
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 te klikken.
Kleuren¶

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 |
|
Achtergrond |
|
Randen |
|
Om een themakleur te wijzigen:
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.
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 .
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¶

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¶

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 Voorbeeld: In onderstaande tabel wordt een lijst gegeven van alle beschikbare metadata-itemsleutels:
|