Onderwerpen
- startpagina
- ik ben een redacteur
- ik ben een ontwerper
- sjablonen
- sjablonen nader bekeken
- stylesheets
- menubeheer
- themabeheer
- sjablonen
- ik ben een beheerder
- over deze wiki
Bekijk deze pagina in het Engels - vanaf daar zijn ook andere talen te vinden.
Sjablonen nader bekeken
- laatst bijgewerkt op 27-12-2010
- Alle sjablonen die bij CMSMS geleverd worden, bestaan uit (min of meer) dezelfde HTML-code. De verschillen zitten in het soort menu en het toepassen van HTML-blokken. De rest is vormgegeven volledig met behulp van CSS.
- Op deze pagina lopen we stap voor stap door een sjabloon, om uit te leggen uit welke onderdelen het bestaat en hoe je ze zou kunnen veranderen. De stijl en het uiterlijk van een pagina worden vervolgens aangepast in de stylesheets die gekoppeld zijn aan iedere sjabloon.
declaratie van DOCTYPE en specificatie van de taal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Dit is de DOCTYPE (documenttypedeclaratie). Het vertelt aan de browser welke versie van (X)HTML het document gebruikt, zodat het goed geïnterpreteerd kan worden. De DOCTYPE is ook nodig voor validatie-tools, die de syntax van de code kunnen controleren.
- De eerste twee regels kunnen onveranderd blijven. Wat je mogelijk wel moet veranderen is de taaldefinitie in de <HTML> tag. Verander "en" naar de tweeletterige code van je voorkeurtaal. Voor Nederlands is dit "nl". Een complete lijst van taalcodes is vinden op de website Codes for the Representation of Names of Languages.
- Meer over DOCTYPE kunt u lezen op de website van W3C.
head tags
<head>
<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>
- Het deel tussen de <title> tags verschijnt in de browsertitelbalk. {sitename} is de naam van de site, zoals opgegeven in Websitebeheer -> Algemene instellingen. Als je ook de naam van de specifieke pagina wilt weergeven, dan voeg je de tag {title} toe. Deze titel geef je op bij Inhoud -> Pagina's -> Nieuwe inhoud.
- {stylesheet} is een tag die zorgt dat alle stylesheets die je hebt gekoppeld aan het sjabloon worden toegevoegd. Deze tag móet dus worden opgenomen, anders heeft je pagina geen opmaak!
- {metadata} tenslotte haalt alle metadata op die je invoert via Websitebeheer -> Algemene instellingen. Daarnaast kan je per pagina extra metadata opgeven via het Opties-tabblad, tijdens het aanmaken of bewerken van een pagina.
de pagina-wrapper
<body> <div id="pagewrapper">
- Dit is de start van het div-blok die de totale pagina-content omsluit (to wrap = omsluiten). In de stylesheet geef je de breedte van de pagina op, of hij gecentreerd moet worden, enz.
- Hoe pas ik dit aan?
- Zoek naar div#pagewrapper in een van de stylesheets waarvan de naam begint met Layout.
de pagina-header
<div id="header">
<h1>{cms_selflink dir="start" text="$sitename"}</h1>
<hr class="accessibility" />
- In de header, koptekst van de pagina vind je het CMSMS-logo. Zoals je kan zien is er geen content in het sjabloon zelf opgenomen, maar wordt alle inhoud van de koptekst ingesteld via CSS. Dit zorgt voor hele schone HTML-code. Echter, als je wilt, kan je direct in het sjabloon ook tekst of andere informatie toevoegen die dan in de koptekst verschijnt.
- Hoe pas ik dit aan?
- Zoek naar div#header en div#header h1 a (voor de link) in een van de stylesheets waarvan de naam begint met Layout. Daar stel je de achtergrondkleur, logo, hoogte, enz. in.
zoekfunctie
{* Start Search *}
<div id="search">
{search}
</div>
{* End Search *}
- De {search} tag voegt een zoekfunctie toe aan alle pagina's op je website. De zoekfunctie wordt uitgevoerd door de module Search. Aan de tag kan je enkele van de volgende, optionele parameters meegegeven:
- submit="Versturen" - Tekst die in de verstuurknop komt te staan
- searchtext="null" - Tekst die in het zoekveld staat
- resultpage="null" - Pagina om de resultaten in te tonen. Dit kan een pagina alias of id zijn. Wordt gebruikt om de resultaten in een ander sjabloon te tonen dan het zoekformulier.
- inline="false" - Als dit op true wordt gezet, dan zal de uitvoer van het zoekformulier de oorspronkelijke inhoud van de 'search' tag in het verwijzende 'HTML Blok' vervangen. Gebruik deze parameter als uw sjabloon meerdere HTML-blokken heeft en u niet wilt dat de uitvoer van de zoekactie het standaard 'HTML Blok' vervangt.
- Hoe pas ik de vormgeving aan?
- Zoek naar div#search in de stylesheet die met Layout begint. Hier kan je de lengte en de positie van het invoerveld opgeven.
breadcrumbs
<* Start Breadcrumbs *>
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
<* End Breadcrumbs *>
- De breadcrumbs of broodkruimels zijn het spoor (met hyperlinks) die de bezoeker tonen welke pagina hij momenteel ziet en wat de hiërarchie van die pagina is, bijvoorbeeld:
Home >> Section page >> Sub-section page- In CMSMS is er een tag die de breadcrumbs automatisch toevoegt op iedere pagina: {breadcrumbs}.
- delimiter="»" betekent dat » wordt gebruikt als scheidingsteken tussen ieder niveau.
- initial='1 betekent dat de breadcrumbsreeks begint met een scheidingsteken. Als dit wordt weggelaten of op 0 wordt ingesteld wordt er geen scheidingsteken voor het eerste niveau afgebeeld.
- Hoe pas ik dit aan?
- Zoek naar div.breadcrumbs in een stylesheet dat begint met Layout. Hier kan je o.a. het lettertype en de achtergrond instellen.
- Om verder te lezen hoe de {breadcrumbs} tag gebruikt kan worden, klikt u op Uitleg in Uitbreidingen -> Tags in het beheerpaneel.
de inhoud (content)
{* Start Content (Navigation and Content columns) *}
<div id="content">
- Hiermee wordt de start van de 'werkelijke' inhoud van de pagina gemarkeerd. De pagina is in het standaardsjabloon opgedeeld in een zijvlak links en een hoofdvlak rechts. Het zijvlak heeft in het sjabloon de naam 'Sidebar' en bevat het menu ('Navigation') en het nieuws ('News'). Het hoofdvlak wordt aangeduid met 'Main'.
{* Start Sidebar *}
<div id="sidebar">
{* Start Navigation *}
<div id="menu_vert">
<h2 class="accessibility">Navigation</h2>
{menu template='simple_navigation.tpl' collapse='1'}
</div>
{* End Navigation *}
{* Start News *}
<div id="news">
<h2>News</h2>
{news number='3' detailpage='news'}
</div>
{* End News *}
</div>
{* End Sidebar *}bar">
Bijdragen aan de Nederlandse wiki? Check dan eerst het forum-topic WIKI - wat doen we daarmee?
