Eigen stylesheet gebruiken

Bij het aanmaken van een integratie in je OYPO account (via de menu-optie 'Integratie in eigen website') heb je de mogelijkheid om een eigen stylesheet te gebruiken.
Welke mogelijkheden dit met zich meebrengt en hoe dit in zijn werk gaat lees je hier.

Bij het aanmaken krijg je de mogelijkheid om het kleurenschema te kiezen.
Je kan kiezen voor het standaard kleurschema van Oypo, voor 'eigen kleuren' waarmee je direct zelf een aantal kleuren kan instellen, of voor 'eigen stylesheet gebruiken'.
Kies je voor de laatste optie, dan verschijnt er een tekstveldje waar je de URL van de stylesheet dient in te vullen.
Deze URL moet verwijzen naar een eigen stylesheet, welke normaliter de bestandsextensie .CSS heeft.

SSL-certificaat

Dit tekstbestandje dien je zelf aan te maken en te hosten op je website.
Je kunt zo'n bestand eenvoudig uploaden met bijvoorbeeld FTP of via de online beheeromgeving van je hostingprovider. Belangrijk hierbij is dat je website een SSL-certificaat moet hebben om het geheel werkend te krijgen.
Het adres van een website met SSL-certificaat begint met https:// in tegenstelling tot website zonder SSL-certificaat dat met http:// begint (de extra 's' is het verschil).
Als je website niet te zien is als je voor het adres 'https://' zet, dien je nog een SSL-certificaat aan te vragen.
Dit kan via de hostingprovider van je website. In veel gevallen is het zelfs mogelijk om in de klantenbeheeromgeving van je hostingprovider deze optie aan te vinken.
Aan een SSL certificaat zijn kosten verbonden welke op dit moment van schrijven variëren van 1 tot enkele euro's per maand.

Meer info over hoe en waarom van SSL certificaten, zie bijvoorbeeld deze link.

Direct benaderen van het CSS bestand

Na het plaatsen van het bestandje in je website, is deze bereikbaar onder een internetadres, welke je ook direct in de browser kunt intypen. (dit adres begint dus met 'https://')
De inhoud wordt dan direct in de browser als gewone tekst weergegeven.

Zorg eerst dat dit werkt voordat je verder gaat met het inrichten van het CSS bestand!

Wat kan ik in een CSS bestand zetten?

Het eigen stylesheet is een aanvulling op de bestaande stylesheet van OYPO. Elke wijziging die je op het standaard stylesheet wilt toepassen kun je in het bestand kwijt. Je hoeft dus niet de gehele OYPO stylesheet op te nemen in dit eigen bestand.
Met een eigen stylesheet kun je bijvoorbeeld kleuren, lettertypes en marges wijzigen, alsmede bepaalde elementen verbergen. Het is niet mogelijk om de gehele layout/indeling van de webwinkel te wijzigen!
Zonder kennis van CSS kan het lastig zijn om een CSS bestand op te stellen, zonder deze kennis is het aan te raden een websitebouwer in de hand te nemen die dit voor je doet. Heb je wel enige kennis van html/css, dan kun je de benamingen van elementen op een pagina vaak eenvoudig vinden door de ontwikkelaarsweergave van de browser te openen (in bijv. Chrome is dat F12).
Een basisuitleg voor stylesheets vindt je bijvoorbeeld hier: https://www.w3schools.com/css/


Noot: We kunnen je helaas niet uitvoerig ondersteunen met het bouwen van je eigen stylesheet, dit dien je zelf te doen of over te dragen aan een websitebouwer.

Enkele nuttige CSS truukjes

Het verbergen van het kruimelpad ('Je bent nu hier: accountnaam -> mapnaam') :

.c-nav-breadcrumb__layout .o-layout__cell .o-layout--gutter {
  display: none;
}

Groot getoonde mapnaam verbergen :

h1.u-alpha{
  display: none;
}

Verbergen van fotograafnaam en datum onder de mapjes in een mappenoverzicht;

ul.o-list-clean.u-milli {
  display: none;
}

..ook de horizontale lijn verbergen:

hr.c-rule.u-mb--small {
  display: none;
}