Logo web2do

CMS module Content Toggle (expand/collapse)

What does this do?

It creates a div ("block") witch can collapse and expand by pressing the bar, it uses JQuery.

 

How install it?

1) Extract all files in respective directories (lib/toggle/... plugins/... )

2) make sure you enter this code between your section of your pagetemplate.
(Not needed if you already have Jquery installed)


After refresh, Extensions>Tags will list a "toggle_close" tag and "toggle_start".
Now the plugin is installed.

 

How do I use it?

Just insert the tag into your content or template like: {toggle_start title="text line for the top bar"}
and close it with {toggle_close}

For example:
{toggle_start title="Web Design & Development" width="700" status="active"}
     HTML code like pictures, text, ...
     <h3>Need a Website?</h3>
     <p> ... www.web2do.be ...</p>
{toggle_close}

(This show contentoggle window, expanded and 700 width)

 

The result:



For personal changes you can edit the top bar (trigger.gif) like this example:

 

Installation:

 

1) Load Jquery


Make sure "jqeury library is loaded" by inserting this line, unless you already have jquery installed in your head section of your template/shabloon.

<script type="text/javascript" src="lib/toggle/jquery.js"></script>
</head>

 

 

2) Now for easy use you can edit TinyMCE (not necessary)


goto admin / Extentsions /TinyMce WYSIWYG
open tab Advanced, scroll down and edit "Custom dropdown:"

 

add this code or change original:
---|---
Start expand/collapse-area|{toggle_start title=\'This is my expandable area\'}
End expand/collapse-area|{toggle_close}
---|---

and save
now you can use the icon "Specifik Dropdown-menu" in TinyMCE menubar.

 

 

Parameters

  • (optional) title="some text here" - Display title in de bar.
  • (optional) status="active" - This 'll show the content, if omitted the content 'll be collapsed by default.

(optional) width="700" - Controls the width of your content.
if not set then default width = 625px;
Warning: when using multiple content togle windows it only needs to be set in the first toggle difenition. Else this settings won't work.

 

 

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".