Het stylen van de GBIF IPT

Dit artikel geeft een korte beschrijving van een aantal basisstappen om de GBIF IPT van een eigen huisstijl te voorzien. Voor dit artikel wordt wat basiskennis van Apache Tomcat en CSS verwacht. Als je zelf echt de diepte in wil, dan is kennis van Java van belang. 

De standaard opmaak van de IPT is prima maar past misschien niet helemaal binnen de (huis)stijl van de website van de organisatie. Mede door het open karakter van de IPT is het zeer eenvoudig geworden om je eigen aanpassingen door te voeren aan de opmaak.

Er is via een 'feature request' vanuit NLBIF aan de standaard IPT installatie een Cascading Style Sheet (CSS) bestand toegevoegd. Deze heeft de naam 'custom.css' en wordt  automatisch ingelezen bij het laden van de pagina. Hierdoor kunnen de standaard GBIF instellingen van kleuren, lettertypes, marges en dergelijke allemaal worden overschreven met de eigen gewenste instellingen.
Op deze manier kun je dus op een laagdrempelige manier je eigen aanpassingen doorvoeren. Dit custom.css bestand is op de Tomcat server te vinden in de directory '$tomcat/webapps/$ipt/styles/'.
Hierbij staat $tomcat voor je ingestelde Tomcat webroot en $ipt voor de naam die je aan je IPT installatie hebt gegeven. Als je de .war file van de IPT bijvoorbeeld tryout.war noemt zal de IPT in de subdirectory 'tryout' worden geïnstalleerd.

Voor echt structurele (in zin van de opbouw/structuur van de pagina) aanpassingen van de IPT kunnen wijzigingen worden gemaakt aan de template bestanden. Met een beetje kennis van HTML is dit al zeer goed te doen.
Deze template-bestanden zijn te herkennen aan de extensie '.ftl' en zijn te vinden in '$tomcat/webapps/$ipt/WEB-INF/pages/'.  De belangrijkste bestanden die voor de weergave van de IPT webpagina's zorgen zijn:

• header.ftl
• menu.ftl
• footer.ftl

Deze zijn te vinden in de subdirectory '$tomcat/webapps/$ipt/WEB-INF/pages/inc/'.

Het is belangrijk om te weten dat na iedere upgrade van de IPT de aanpassingen opnieuw terug gezet moeten worden. Dit komt door de manier waarop Tomcat werkt; Een upgrade van de IPT bestaat uit het verwijderen van de oude installatie van de IPT en het uitrollen van de nieuwe versie van het .war bestand. Aanpassingen die in de oude versie zijn gemaakt worden door een upgrade dus volledig verwijderd en je begint dus weer met een standaard IPT installatie zonder aanpassingen.

We zullen onze aanpassingen dus goed moeten bewaren om ze na een update weer terug te kunnen zetten. Door de bestanden in  een zelfde directory-structuur te bewaren kunnen deze makkelijk worden terug gezet door simpele kopieer-en-overschrijf-actie van de zojuist uitgerolde bestanden.

Wij hebben er voor gekozen om de IPT zijn eigen identiteit te laten behouden maar er wel een sausje van onze huisstijl overheen te gieten. Zie hieronder hoe dat er in de praktijk uit ziet:

Van linksboven naar rechtsonder: GBIF IPT, NLBIF IPT Tryout, NLBIF IPT productien, NIOZ IPT 

Voor de aanpassingen voor de NLBIF (en organisaties die wij technisch ondersteunen, zoals onder andere Alterra, CGN, IBED, NIOZ en FLORON) hebben wij een standaard structuur gemaakt die hieronder te downloaden is.

• Bronbestanden NLBIF IPT Tryout

Hierin zijn alle aanpassingen terug te vinden van de NLBIF IPT Tryout. Wij gebruiken een eigen logo voor in de header en ook een favicon in de kleurstijl van de website. Ook zijn afbeeldingen geplaatst om de icoontjes in de admin omgeving aan te passen en de taalkeuze in de juiste kleur te krijgen. Deze afbeeldingen zijn terug te vinden in de map '$tomcat/webapps/$ipt/images/'. In een fotobewerkingsprogramma kunnen deze makkelijk worden aangepast naar de gewenste kleur.

NB: Omdat wij voor de productie en de tryout versie van de NLBIF IPT exact dezelfde aanpassingen gebruiken en alleen de kleur anders is, is een extra bestand toegevoegd (custom-tryout.css) waar alleen de oranje kleuren van de tryout IPT staan beschreven. De custom.css laadt dit bestand in via een @import bovenaan de stylesheet. In een situatie waarin een organisatie maar één IPT heeft is dit niet nodig.

Om ook de achtergrondafbeelding te krijgen zoals op de NLBIF IPT moet het volgende stukje css worden toegevoegd aan de custom.css:
----------------------------------------------------------------------------------------------
/**********************************\
* background image
\**********************************/
body {
background: url(branding/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
----------------------------------------------------------------------------------------------
Ook moet er natuurlijk een background.jpg worden geplaatst. De achtergrond zal dan altijd schermvullend worden weergegeven.

Neem voor vragen gerust contact op met NLBIF. Wij helpen u graag verder!