Stylesheets

Stylesheets kun je aanmaken en beheren via het Menu admin --> Stylesheets. Je kunt ervoor kiezen het standaard stylesheet te gebruiken of zelf je eigen stylesheets toe te voegen. Als je de standaard gebruikt kun je daarop aanpassingen maken door zelf extra stylesheets toe te voegen.

Met de stylesheets kun je de complete opmaak van de website en de pdf aanpassen. Stylesheets bepalen niet alleen de opmaak van de content maar ook bijv. de opmaak van het menu.

Bij het aanmaken van een stylesheet kun je ervoor kiezen of deze door alle projecten binnen je klant omgeving gebruikt moet worden of alleen gebruikt moet worden voor het project waarin je aan het werken bent. Je kunt er ook voor kiezen de CSS te laten gelden voor alleen de taal waarin je werkt of voor alle talen van hetzelfde project.

De optie media bepaald voor welke output het stylesheet gebruikt wordt.

• all - zowel voor website als pdf
• screen - alleen voor de website
• print - alleen voor pdf en print ( output project overzicht )

De volgorde van het laden van de stijlsheets kun je aanpassen door de stijlsheets te verslepen. Verder geldt de volgende volgorde:

• Het standaard stylesheet
• De stylesheets voor alle projecten in een klant omgeving
• De stylesheets van een project
• De taal specifieke stylesheets

Het standaard stylesheet

Het standaard stylesheet is afgeleid van bootstrap. Bootstrap is een veel gebruikt HTML, CSS, en JS framework voor het ontwikkelen van responsive, mobile first websites. De classes die in bootstrap gebruikt worden kun je ook als class opnemen in je document.

De standaard opmaak voor het document is:

body {
color: #222;
font-family: "Raleway",sans-serif;
font-size: 15px;
line-height: 1.3;
}

Deze waarden kun je overschrijven in een zelf gemaakt stylesheet. Een aantal stijlen zijn al gedefinieerd in het het standaard stylesheet. Hieronder een overzicht met een voorbeeld van deze classes.

• intro
• quote
• smallquote
• koptext
• check
• nobreak

Deze stijlen kun je aanmaken in Project instellingen --> Stijlen. Als je bovenstaande Css class naam gebruikt wordt onderstaande opmaak aan deze stijlen gegeven. Je kunt deze vormgeving overschrijven in een zelf aangemaakt stylesheet.

Hier staat een intro.

Een Quote text, CLASS iS "QUOTE". tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Een Kleine Quote TEXT, CLASS is "smallquote". ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.

Dit is een koptext (class is "koptext").

Hieronder een check list:

• class is "check"
• Nullam accumsan lorem in dui.
• Cras ultricies mi eu turpis hendrerit fringilla.

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.

Deze alinea heeft de class "nobreak" gekregen, waardoor er geen ruimte tussen deze alinea en de volgende alinea zit.

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

Stylesheet voor pdf

Als de pdf gegenereerd wordt worden in principe alle stylesheets die ook voor de website gelden meegenomen. Uitzondering zijn stylesheets waarvoor media screen is gekozen. De pdf ondersteund niet alle standaard CSS waarden en in sommige gevallen worden een aantal eigenschappen anders geïnterpreteerd.

In het stylesheet voor de pdf kun je de opmaak voor de inhoudsopgave aanpassen en bepalen wanneer een nieuwe pagina moet beginnen. Je kunt ook afwijken van de vormgeving van de website door een apart stylesheet aan te maken voor de pdf. Je maakt een apart stylesheet aan voor de pdf door bij "media" voor print te kiezen. Er zijn een paar speciale classes beschikbaar om de pdf vorm te geven. Hieronder een opsomming van deze classes:

• section_after: Met deze class kun je ervoor zorgen dat elk hoofdstuk op een nieuwe pagina begint. vb.: .section_after { page-break-before: always; }
• pageNr: Met deze class kun je de stijl van het pagina nummer onderaan de pagina aanpassen. vb.: p.pageNr { text-align:center; }
• toc_title: Hiermee kun je de vormgeving van de kop boven de inhoudsopgave aanpassen. vb.: .toc_title { font-size: 16pt; font-weight:bold; }
• mpdf_toc_level_n met n is 0 tm 2 is de tekst van een bepaald niveau. vb.: .mpdf_toc_level_0 { font-size: 14pt; font-weight:normal; }
• span.mpdf_toc_t_level_n met n is 0 tm 2 zijn de titels in de inhoudsopgave.
• span.mpdf_toc_p_level_0 met n is 0 tm 2 zijn de pagina nummers in de inhoudsopgave.

De standaard titel pagina heeft als id titlepage, hieraan kun je bijv. een achtergrond afbeelding koppelen> verder kun je een titel, sub titel en auteur plaatsen. Een voorbeeld stylesheet ziet er dan als volgt uit:

#titlepage {

background-image: url('../images/omslag.jpg');

background-repeat: no-repeat;

border:1px solid #ff0000;

}

#titlepage h4.title {

padding-top:230px;

padding-left:20px;

color:#ffffff;

text-align: left;

}

#titlepage h4.subtitle {

padding-top:20px;

padding-left:20px;

text-align:left;

}

#titlepage h4.auteur {

padding-top:400px;

padding-left:20px;

text-align:right;

vertical-align:bottom;

}

Om ervoor te zorgen dat de titelpagina geen marges krijgt. De inhoudsopgave wel en de pagina nummering begint bij de eerste content sectie:

@page {

margin: 0px;

margin-header: 0mm;

margin-footer: 0mm;

odd-footer-name: _blank;

even-footer-name: _blank;

}

@page toc {

margin-left: 10mm;

margin-right: 10mm;

margin-top: 10mm;

margin-bottom: 10mm;

}

@page section {

margin: 10mm;

}