Logo web2do
taalkeuze: EN | NL

CMS module Content Toggle (expand/collapse)

Wat doet deze plugin?

Het maakt een div ("block") dewelke kan inklappen of uitklappen door op de titelbar te klikken. De plugin maakt gebruik van JQuery.
De demo can je hieronder bekijken.


Voorbeeld Content Toggle

 

 

Hoe gebruik je deze plugin?

Gewoon door deze tag in je content te plaatsen {toggle_start title="text line for the top bar"}
en sluit het met : {toggle_close}

Een voorbeeld:
{toggle_start title="Web Design & Development"}
     HTML code like pictures, text, ...
     <h3>Need a Website?</h3>
     <p> ... www.web2do.be ...</p>
{toggle_close}

 

 

Hoe installer je deze plugin in CMS Made Simple?

1) Laad Jquery

Zorg er voor dat "jqeury is geladen" door het toevoegen van deze lijn tussen de <head> tags in je template
<script type="text/javascript" src="lib/toggle/jquery.js"></script>
</head>

 

 

2) Eventueel kan je deze code toevoegen aan TinyMCE (niet noodzakelijk)

Ga naar admin / Extentsions /TinyMce WYSIWYG
open tab Advanced, scroll naar beneden en bewerk "Custom dropdown:"

 

Vervang of voeg deze code toe:
---|---
Start expand/collapse-area|{toggle_start title=\'This is my expandable area\'}
End expand/collapse-area|{toggle_close}
---|---

Dit maakt het eenvoudig om de juiste code toe te voegen in je content. Druk eerst op "Start expand", vervolgens plaats je content.. text, afbeelding... en sluit de code door op "End expand" te drukkken.

 

 

3) Plaats deze CSS code in je Stylesheets. U kan hier kleuren, afbeelding en breedte aanpassen.

h2.trigger { padding: 0 0 0 50px; margin: 0 0 5px 0; background: url(../../../lib/toggle/trigger.gif) no-repeat; height: 30px; line-height: 30px; width: 575px; font-size: 2em; font-weight: normal; }
h2.trigger a { color: #333; text-decoration: none; display: block; }
h2.trigger a:hover { color: #666; }
h2.active {background-position: left bottom;}
.toggle_container { margin: 0 0 5px; padding: 0; border-top: 1px solid #d6d6d6; background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top; overflow: hidden; font-size: 1.2em; width: 625px; clear: both; }
.toggle_container .block { padding: 20px; background: url(../../../lib/toggle/toggle_block_btm.gif) no-repeat left bottom; }
.toggle_container .block p { padding: 5px 0; margin: 5px 0; }
.toggle_container h3 { margin: 0 0 10px; padding: 0 0 5px 0; border-bottom: 1px dashed #ccc; }

 

Parameters

  • (optional) title="some text here" - Toont een titel in de titelbar.
  • (optional) status="active" - Deze parameter toont de content standaard uitgeklapt, zonder deze parameter zal de content standaard ingeklapt worden.

 

 

DEMO:

Hoe CMS Made Simple werkt


Sjablonen & stylesheets (het ontwerp)


Een sjabloon beschrijft de HTML layout, het ontwerp van een pagina. De stylesheets bepalen hoe alles eruit ziet: lettertype, achtergrond, lokatie op de pagina etc. Dit is het werk van een ontwerper.
Alles dat is opgenomen in de sjabloon wordt toegevoegd aan iedere pagina die gebruikmaakt van die sjabloon. Daarom hoeft de persoon die de inhoud bewerkt, de redacteur, geen kennis te hebben van webdesign.
In een sjabloon worden "placeholders" voor content (inhoud) en navigatievelden opgenomen. Als een bezoeker een pagina opvraagt, wordt deze automatisch gegenereerd vanuit de sjabloon en worden de "placeholders" vervangen door content.
Na installatie van CMS Made Simple zijn er enkele basissjablonen beschikbaar die je kan aanpassen aan je behoeften. Als ontwerper kan je ook nieuwe sjablonen aanmaken.
Je kan binnen een website een of meer sjablonen tegelijk gebruiken, want voor iedere pagina individueel kan je aangeven welke sjabloon moet worden gebruikt. Dat maakt het bijvoorbeeld mogelijk alleen op de openingspagina het nieuws weer te geven.
Lees meer over sjablonen op de pagina Ik ben een ontwerper.

Paginas (de structuur)


Pagina´s bepalen de structuur van de website. Beschouw een website als een verzameling pagina´s. Deze pagina´s kunnen worden opgevraagd via een menu. Je kan ook naar een pagina verwijzen vanuit een andere pagina.


Navigatie/Menu


De navigatie, of het menu, zijn de verwijzingen die helpen te navigeren door de pagina´s van de website. Deze verwijzingen worden automatisch gecreëerd door CMS Made Simple op basis van de paginastructuur.
Image:Page_structure.png
Pagina´s kunnen zich, als takken aan een boom, op verschillende niveau´s bevinden. Op het hoogste niveau in het menu zitten de parent pagina's. Iedere parent pagina kan child pagina's hebben die op hun beurt weer als parent pagina kunnen fungeren.
In het navigatiemenu rechts bijvoorbeeld, is "Beginnen met CMSMS" de parent van verschillende child pagina's, waarvan en een "Hoe CMSMS werkt" is.
Het sjabloon en de stylesheets bepalen waar op een pagina het navigatiemenu wordt weergegeven.

Content


De content is de informatie die op de pagina wordt weergegeven, de inhoud dus. Voor elke pagina op de site kan je kiezen welke sjabloon je wilt gebruiken. Als u content toevoegt aan een pagina, wordt dit automatisch geplaatst in de "placeholders" van het sjabloon dat je gebruikt.
Een pagina kan een of meer content-gebieden hebben, bijv. een groot vlak middenin de pagina voor de hoofdinhoud, en een smalle kolom rechts voor aanvullende informatie.

Werkvolgorde

Dit zijn de basisstappen voor het bouwen van een website met CMS Made Simple:
  1. Plan -- Bepaal welke pagina´s je wilt hebben (structuur) en hoe de pagina's er uit moeten zien (ontwerp).
  2. Creëer sjablonen -- Creëer een of meer sjablonen en stylesheets die de layout van de pagina's beschrijven.
  3. Creëer pagina's -- Creëer pagina's, geef aan welk sjabloon moet worden gebruikt bij welke pagina en voeg content toe.
Als een gebruiker naar je site gaat wordt de pagina gegenereerd vanuit het sjabloon met toevoeging van de content op de plaatsen van de "placeholders".