Thema

Thema kleuren

In het CMS kunnen onder de tab 'layout/shop thema' de kleuren gekozen worden. Deze kleuren worden gebruikt in de navbar, voor de buttons en in de editor.

Navbar

Visual

De leukste kaartjes maak je hier!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bekijk de nieuwe kaartjes

De visual bovenaan de pagina kan je met jQuery op een andere plaats zetten door aan de div met de class 'visual' een class toe te voegen. Om de visual boven het linkermenu en de main content te zetten, gebruik je de class 'js-visual-ontop'.
<a class="visual js-visual-ontop"> [content] </a>
Om de visual schermbreed direct onder de navbar te plaatsen, gebruik je de class 'js-visual-fullwidth-ontop'.
<a class="visual js-visual-fullwidth-ontop"> [content] </a>

Pagina opbouw

Standaard wordt op desktop aan de linkerkant van de pagina een menu getoond. Dit menu wordt met het widget-menu opgebouwd. Per pagina kan een menu gekozen worden. Als er geen menu gekozen is, wordt het default-menu getoond. Als er geen default-menu is, wordt er wel witruimte gereserveerd voor het linkermenu.

Linkermenu verbergen

Om een pagina zonder het linkermenu te maken, plaats je de content binnen een div-tag met de class 'js-hide-leftbar'.
<div class="js-hide-leftbar"> [pagina-content] </div>

Volledige schermgrootte

Om een pagina over de volledige breedte van het scherm te tonen, plaats je de content binnen een div-tag met de class 'js-pagecontent-fullwidth'.
<div class="js-pagecontent-fullwidth"> [pagina-content] </div>

Grid

Pagina's worden opgebouwd met behulp van een grid-systeem. Voor uitleg over een grid-systeem, zie w3schools.com/rwd-grid of w3schools.com/bootstrap.

Code voorbeeld:

<div class="container">
   <div class="cols">
      <div class="xs-12 md-4">xs-12 md-4</div>
      <div class="xs-12 md-4">xs-12 md-4</div>
      <div class="xs-12 md-4">xs-12 md-4</div>
   </div>
</div>


Margin & Padding

Je kunt met een class margin en padding toevoegen aan een element. Er zijn classes om het element rondom een margin of padding mee te geven van 5, 10, 20, 30 en 40 pixels, bijvoorbeeld: <div class="padding-30"> [content] </div>.
En er zijn classes om aan één zijde (top, right, bottom, left) margin in te stellen: <div class="margin-t-30 margin-b-30"> [content] </div>.
Let op met margin-l-x en margin-r-x op elementen met een gedefenieerde width: hierdoor kan de totale breedte groter worden dan 100%, waardoor je een verticale scrollbar krijgt.

Kleuren

Hover over de kleur voor meer informatie, zoals bijvoorbeeld de HEX-waarde.

Standaard kleuren

Filter kleuren

Deze kleuren worden standaard gebruikt voor het filter-menu. Let op: dit werkt alleen als de tag-group de naam 'kleur' of 'kleuren' heeft en de tag-namen exact overeenkomen met de kleurnamen hieronder. De kleurnaam verschijnt als je over een kleurvlakje hovert.

Tekst

H1 - Maak zelf je geboortekaartje

H2 - Maak zelf je geboortekaartje

H3 - Maak zelf je geboortekaartje

H4 - Maak zelf je geboortekaartje

H5 - Maak zelf je geboortekaartje

P - Iedereen kan zelf een geboortekaartje maken! Elk kaartje is met de editor gemakkelijk aan te passen. Kies een kaartje uit onze collectie en probeer het maar eens. Je staat versteld van jezelf!

Tekst kleuren

Icons

Speciale tekens

Om leestekens of speciale tekens toe te voegen, zie w3schools.com.

Button

Buttons

button sizes

button-group-vertical

button-group-justified

button-block

button-block-img

Account instellingen Persoonsgevens, wachtwoord

Account instellingen Persoonsgevens, wachtwoord

Thumbnails

Lorem ipsum

Lorem ipsum

Dolor sit amet, cetero assentior dissentiet te vel

Lorem ipsum

Lorem ipsum

Dolor sit amet, cetero assentior dissentiet te vel

Thumbnail-fluid

Lorem ipsum

Lorem ipsum

Dolor sit amet, cetero assentior dissentiet te vel

Lorem ipsum

Lorem ipsum

Dolor sit amet, cetero assentior dissentiet te vel

Thumbnail-transparent

Lorem ipsum

Dolor sit amet, cetero assentior dissentiet te vel, per debet maluisset efficiantur id, his error tollit ei.

Lorem ipsum

Thumbnail-slider

Kaartjes

 

 

Kaartjes

 

 

Bekijk alle geboortekaartjes

Thumbnail-people

Naam

Functie omschrijving

Naam

Functie omschrijving

Card scrollers

Thumbnail-scroller

De thumbnail-scroller vul je zelf met kaartjes. De grootte en de hoogte van de kaartjes kan je aangeven in de img-tag. Let op: als je kaartjes met verschillende formaten gebruikt, begin dan met het hoogste kaartje.

 

 

Tag-scroller

Om de kaarten die op een pagina via tags worden ingeladen in een scroller te tonen, voeg je een div in met de class 'js-add-tag-scroller'.
<div class="js-add-tag-scroller">&nbsp;</div>
Vergeet de   niet. (Anders is je div leeg en wordt hij verwijderd door de CK-editor)

Menu's

Pills

Tabellen

Table unstyled

Paragrafen

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodoligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Tekstboxen

Elementen met gelijke hoogte

Soms wil je dat elementen binnen een element even hoog zijn. Om dit te bereiken, voeg je een class 'cols-stretch-vertical' toe aan een div met de class 'cols'. Standaard worden de eerste elementen binnen deze 'cols' dan verticaal uitgevuld. Om een volgend child-element uit te vullen, zoals in bovenstaand voorbeeld de omkaderde box, geef je dit element de class 'stretch-vertical-height'.

Code voorbeeld:

<div class="container">
   <div class="cols cols-stretch-vertical">
      <div class="xs-6">
         <div class="box stretch-vertical-height"> [content] </div>
      </div>
      <div class="xs-6">
         <div class="box stretch-vertical-height"> [content] </div>
      </div>
   </div>
</div>