2min

De code aanpassen

Om een site compatible te maken met CushyCMS moet je in de broncode een aantal kleine aanpassingen doen. Alles wat je aanpasbaar wil maken in CushyCMS moet je in de broncode voorzien van deze code:

PHP Code
1
class="cushycms"

Met deze code kun je precies aangeven wat straks aanpasbaar is met CushyCMS. Elke HTML tag kun je voorzien van een class attribuut. Hieronder zie je een voorbeeld hoe dit er in de praktijk uitziet.

PHP Code
1
2
3
4
5
6
7
8
9
<h1 class="cushycms" title="Titel">Mijn Website</h1>
<div class="cushycms" title="Main Content">
  <p>Alles wat tussen deze div's staat is straks aanpasbaar met CushyCMS</p>
</div>
<div class="extra cushycms" title="Extra Content">
  <p>Deze div had al een class. Typ er gewoon cushycms achter. Simpel!</p>
</div>
<p>Ik ben niet aanpasbaar, snik.</p>
<img class="cushycms" src="techzine.jpg" alt="Ik ben straks aanpasbaar!" />

Zoals je ziet gebruik ik in dit voorbeeld ’title’ en ‘alt’. Dit doe ik omdat CushyCMS deze attributen herkent. Zo is straks makkelijker te zien wat je aanpast. Dit werkt met ’title’, ‘alt’ en ‘id’.
In het voorbeeld kun je zien dat afbeeldingen ook aanpasbaar zijn. Maar vaak zijn de afmetingen van een afbeelding verschillend. Een grote afbeelding kan je design verpesten. Dit voorkom je door te werken met ‘width’ en ‘height’. Dit ziet er in een code als volgt uit.

PHP Code
1
2
<img class="cushycms" src="techzine.jpg" width= "300" height="250" alt="Mijn breedte en hoogte staan vast." />
<img class="cushycms" src="techzine.jpg" width= "300" alt="Alleen mijn breedte staat vast." />

De eerste afbeelding wordt verkleind en passend gemaakt binnen de opgegeven waarden. Dit kan vervormde afbeeldingen opleveren. De tweede afbeelding wordt alleen verkleind. De verhoudingen blijven dus behouden. Dit is in veel gevallen mooier. Tenslotte behandel ik nog een aantal soorten classes die je kunt gebruiken.

PHP Code
1
class="cushycms-text"

Als je deze class gebruikt, kun je straks alleen maar tekst invoeren. Het voordeel hiervan is dat je bijvoorbeeld HTML codes kunt invoeren.

PHP Code
1
class="cushycms-html"

Deze class zorgt ervoor dat alle speciale tekens worden omgezet naar HTML. Zo wordt © omgezet in ©.

PHP Code
1
class="cushycms-wysiwyg"

Deze class doet hetzelfde als de class hierboven. Verder verschijnen er een aantal knoppen in de CMS om wat standaard opmaak te verrichten. Dit was het technische gedeelte van deze tutorial. Je kunt bovenstaande codes op heel veel manieren gebruiken. Met een portie creativiteit is voor elke site wel een ideale CMS samen te stellen.

Table of contents