You are here: Documentation
Personal tools
Views

User Handbook/Getting Started/Designer/Customizing Templates/nl

From CMSMS

Table of Contents

This page in: English - Deutsch - Français - Svenska - Русский - Norsk - Polski - Nederlands - Español - Lietuvių

Aanpassen van standaardsjablonen

Al de standaardsjablonen 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.

De CMSMS standaardsjablonen gebruiken geen tabellen voor de vormgeving. In plaats daarvan worden <div> tags gebruikt om ieder inhoudsblok in de pagina te definiëren. De positie en de stijl van ieder van deze div-blokken kan vervolgens aangepast worden via CSS. De CSS is tenslotte vastgelegd in stylesheets.

Op deze pagina zullen we stap voor stap door de sjabloon lopen, om uit te leggen uit welke onderdelen het bestaat en hoe u ze zou kunnen veranderen. De stijl en het uiterlijk van een pagina wordt 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 uw document gebruikt, zodat het goed geïnterpreteerd kan worden. De DOCTYPE is ook nog voor validatie-tools die de syntax van uw code kunnen controleren.

De eerste twee regels kunnen onveranderd blijven. Wat u mogelijk wel moet veranderen is de taaldefinitie in de <HTML> tag. Verander "en" naar de tweeletterige code van uw voorkeurtaal. Voor Nederlands is dit "nl". De overige codes kunt u vinden op Codes for the Representation of Names of Languages Engels

Meer over DOCTYPE kunt u lezen op W3C. Engels

Head tags 

<head>

<title>{sitename} - {title}</title>
{stylesheet}
{metadata}
</head>

Het deel tussen de <title> tags verschijnt in uw browser's titelbalk. {sitename} is een tag die gedefinieerd wordt in Websitebeheer -> Algemene instellingen. Als u ook de naam van iedere pagina wilt weergeven, dan voegt u de tag {title} toe. Deze tag is een placeholder die wordt vervangen door de naam van de huidige pagina die u invoert bij het aanmaken daarvan, zie Inhoud -> Pagina's -> Nieuwe inhoud toevoegen.

{stylesheet} is een tag die zorgt dat alle stylesheets die u heeft gekoppeld aan het sjabloon worden toegevoegd. Deze tag hoeft dus maar eenmaal voor te komen.

{metadata} tenslotte wordt vervangen door de inhoud die u instelt via Websitebeheer -> Algemene instellingen. Daarnaast kunt u 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 omsluit (wrapped). In de stylesheet kunt u de breedte van de pagina opgeven, of deze 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 koptekst 

   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />

In de koptekst van de pagina vindt u het CMS Made Simple-logo. Zoals u hier kunt zien is er geen informatie in het sjabloon, maar wordt alle inhoud van de koptekst ingesteld via CSS. Dit zorgt voor hele schone HTML-code. Echter, als u wilt, kunt u direct in het sjabloon ook tekst of andere informatie toevoegen die dan in de koptekst zal verschijnen.

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 stelt u 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 uw website. De zoekfunctie wordt uitgevoerd door de module Search. Aan de tag kunnen enkele van de volgende, optionele parameters meegegeven worden:

  • 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 kunt u 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 links 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 CMS Made Simple 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 breadcrumbs 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 kunt u onder andere 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 

   {* 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'.

Sidebar, Navigation en News 

      {* 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">

De rest van de standaardsjabloon wordt opgewaardeerd naar de laatste versie van CMSMS.


Retrieved from "http://wiki.cmsmadesimple.org/index.php/User_Handbook/Getting_Started/Designer/Customizing_Templates/nl"