21 juli 2017
Dutch CMS
Handleidingen

Met Dutch CMS 2.0

Nog makkelijker een mooie website !
Gemoderniseerd template design
Achtergrondafbeeldingen invoegen
Uitgebreid Contactformulier !
En meer.....

 
 
 
 
 
Diverse handleidingen Dutch CMS Tips en Trucs 12 februari 2009

Hier vindt je handige tips en trucks bij het werken met Dutch CMS.

Let op: Veel van de tips op deze pagina zijn vrij technisch van aard en geschreven voor mensen die Dutch CMS en/of de TinyMCE Editor aan het opzetten zijn voor henzelf of eventueel voor andere mensen om te gaan gebruiken. Ze vergroten het gebruikersgemak maar zijn zeker niet noodzakelijk. Sommige tips hebben betrekking op het beheerdersgedeelte van Dutch CMS (en de ingebouwde TinyMCE Editor) en andere op het aanpasssen van de layout van de website. Tip 1 staat onderaan oplopend tm Tip 7 bovenaan. Tips 4 tm 7 horen bij elkaar en je kan dan het beste beginnen met lezen bij tip 4.

Voor meer tips kijk je bij de Veel Gestelde Vragen > Hoe kan ik..

Tip 7: Het gehele uiterlijk aanpassen van de TinyMCE Editor

(3- De knopppen op de Editor aanpassen)

Standaard zie je in de TinyMCE Editor een heleboel knoppen waarvan je de helft of meer nooit zal gebruiken. Zeker als je het CMS configureert voor iemand anders om er mee te gaan werken is het handig om een aantal van deze knoppen te verwijderen.

Dit aanpassen doe je in het bestand tinymceadvanced.php. Let wel ook dit zijn wijzigingen die met een upgrade naar een hogere versie van Dutch CMS weer verloren gaan tenzij je dit noteert ergens en de handleiding goed volgt bij het overstappen naar een hogere versie.
Open het bestand tinymceadvanced.php in de map javascripts. Je ziet daar deze regels:

  // Theme options
  theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,
styleselect,formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|
,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,
backcolor",
  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|
,ltr,rtl,|,fullscreen",
  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,
visualchars,nonbreaking,template,pagebreak",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,

Ze zijn opgedeeld in 4 delen theme_advanced_buttons1 tm 4 wat overeenkomt met de Editor. Vergelijk het maar. Je kunt hier knopjes verwijderen, anders indelen of op een andere regels plaatsen etc. Zorg er wel voor dat de code er omheen niet stuk gaat dus de aanhalingstekens en comma aan het einde => "knopjes", laten staan. Verder tussen ieder knopje een comma zonder spatie ertussen.

Als we dan aanpassingen zouden maken en alleen de meest noodzakelijke knoppen laten staan zou je code er vervolgens zo uit kunnen zien:

  // Theme options
  theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,bullist,
numlist,forecolor,styleselect,formatselect,code",
  theme_advanced_buttons2 : "cut,copy,paste,pastetext,undo,redo,fullscreen",
  theme_advanced_buttons3 : "link,unlink,image,media,hr,emotions,styleprops",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,

Let er op dat er ook geen spaties tussen de knopje,knopje mogen zitten. Dat is in bovenstaande code wel zo om het goed op deze pagina te krijgen dus numlist moet terug naar achter bullist. Met anders woorden: alle knopjes per theme_advanced_buttons moeten op 1 regel staan.

Het resultaat in de Editor is als volgt:

Naast formatselect kun je nog fontselect,fontsizeselect zetten of een van beide, maar dat is een keuze die uitleg vereist. Het lettertype kun je namelijk instellen in de CSS bestanden van het CMS en het kan tot ongewenste effecten leiden als de persoon die het CMS gaat gebruiken zelf andere lettertypen gaat kiezen. Zelfde geldt een beetje voor lettergroootte maar in uitzonderingsgevallen kan het zijn dat een stukje tekst groter of kleiner moet dan de standaard (in het CSS) ingestelde lettergrootte. Echter, als het om een kop van een alinea gaat dan kan gebruik gemaakt worden van Kop 1 tm 6 die zich in het selectiemenu van Opmaak bevinden en is het dus nogsteeds niet nodig om lettergrootte toe te voegen aan de Editor. Doe je dit wel dan moet je ook uitleggen dat de lettergrootte in het venster van de Editor niet de werkelijke weergave is in verhouding tot de rest van de tekst zoals het op de site eruit komt te zien als voor een andere lettergrootte wordt gekozen. Dus die persoon moet dan daarna ook kijken op de site of de lettergrootte van dat stukje tekst ook echt de gewenste lettergrootte is.

Tip voor niet-dutchcms wel-TinyMCE gebruikers
Voor mensen die via een zoekmachine op deze pagina zijn gekomen en geen gebruik maken van Dutch CMS en zich afvragen waar ze dit moeten doen. Deze aanapssing maak je in de Javascript die in de header van je HTML-bron op je website wordt ingevoegd bij de tinyMCE.init instructie.

Tip 6: Het gehele uiterlijk aanpassen van de TinyMCE Editor

(2- CSS toekennen aan koppen)

Deze tip borduurt verder op tip 4 en tip 5. Als je tekst opmaakt in een Editor kun je gebruik maken van zogenoemde koppen. Dit zijn H1 tm H6 in volgorde van groot naar klein. De H staat voor Header. Je bent vrij om deze te gebruiken waar en wanneer je wilt maar zoals het woord het al zegt ze zijn bedoeld als koppen boven stukken tekst. 1 wil wel zeggen dat dat de belangrijkste kop is dus bv bovenaan je pagina en 2 weer iets "minder" belangrijk dus bv bovenaan een paragraaf of 2 bovenaan een pagina samenvatting en 3 boven een paragraaf/alinea etc. Ze bepalen dus de structuur, de hiërarchie van de pagina.

Nu kun je ook extra CSS toekennen aan deze koppen omdat de grootte en kleur van de koppen wel in de layout van je website moet passen natuurlijk. Dit doe je op de volgende manier:

h1 {font-size: 80px;color:#04A8B7;}
h2 {font-size: 60px;color:#04A8B7;}
h3 {font-size: 40px;color:#04A8B7;}
h4 {font-size: 20px;color:#04A8B7;}
h5 {font-size: 18px;color:#04A8B7;}
h6 {font-size: 14px;color:#04A8B7;}

Als je voor je gehele pagina al een lettertype hebt opgegeven hoef je voor de koppen alleen nog maar de grootte en de kleur op te geven. Daar kun je eventueel ook nog CSS voor de marge en padding opgeven. Bovenstaande lettergrootte en bijbehorende kleur zijn volledig willekeurig gekozen als voorbeeld en kun je geheel aanpassen aan je wensen. Als we de voorbeeldpagina van hierboven Kop in H1, Kop in H2 etc zouden opslaan dan krijg je het volgende:

Waar plaats je nu die CSS ? Specifiek toegespitst op Dutch CMS. Deze plaatst je in het bestand eigencss.css in de map templates > eigencode > dutchcms (tm versie 1.7 was dit templates > css > dutchcms).

Tip voor niet-dutchcms wel-TinyMCE gebruikers
Voor mensen die via een zoekmachine op deze pagina zijn gekomen en geen gebruik maken van Dutch CMS en zich afvragen waar deze CSS te plaatsen. Die plaats je in je algemene stylesheet zodat je deze CSS op je gehele website beschikbaar hebt.

En om het geheel een stapje verder te nemen. Nu is er ook nog een truck om deze opmaak gelijk al zichtbaar te hebben als je aan het werk bent in de TinyMCE Editor en van een van deze koppen gebruik maakt. Dit doe je door DEZELFDE CSS ook toe te voegen aan het bestand mycontent in de map javascripts > tiny_mce > css. Lees ook even tip 4 en 5 hieronder waar dit verder uitgelegd wordt.

De totale CSS gaat er dan als volgt uitzien met nog steeeds als voorbeeld code de gele letterkleur en achtergrond:

/* TinyMCE specific rules */
body.mceContentBody, body, td, pre{background:#FAF5A8; color:#EEA238; font-family:Verdana; font-size:17px; font-weight:normal; margin:8px;}
h1 {font-size: 80px;color:#04A8B7;}
h2 {font-size: 60px;color:#04A8B7;}
h3 {font-size: 40px;color:#04A8B7;}
h4 {font-size: 20px;color:#04A8B7;}
h5 {font-size: 18px;color:#04A8B7;}
h6 {font-size: 14px;color:#04A8B7;}

We slaan de wijzigingen op en vervangen met FTP het oude bestand door het nieuwe. We merken weer op dat om deze wijzigingen in te laten gaan de TinyMCE Editor opnieuw moet worden geladen. Sluit je browser venster en verwijder eventueel zelfs je browser geschiedenis en start je browser daarna weer en ga terug naar je beheerdersgedeelte. Ook moet je deze wijziging ergens noteren omdat als er een update komt voor Dutch CMS deze wijziging weer verloren gaat omdat dit bestand dan weer overschreven wordt met het standaard installatiebestand.

Hetzelfde geldt voor niet-dutchcms wel TinyMCE gebruikers als ze TinyMCE opnieuw installeren/updaten.

Als we nu dezelfde kop-opmaak toepassen in de Editor zie je gelijk hoe het er op je website uit zal gaan zien:

Tip 5: Het gehele uiterlijk aanpassen van de TinyMCE Editor

(1 - opmaak gebied aanpassen)

Deze tip borduurt verder op tip 4. Stel je hebt een bepaalde opmaak voor je site bepaald via de CSS. Nu is er een truck om de illusie van diezelfde opmaak ook in het normaal gesproken witte venster van de TinyMCE Editor te krijgen.

Stel je hebt als opmaak van een pagina op je website het volgende: een gele achtergrond en donkergeel lettertype:

Als je echter in de Editor bezig bent ziet dit er uiteraard gewoon zo uit:

Om nu het witte venster van de Editor ook het uiterlijk van de website mee te geven kun je code toevoegen aan een systeembestand van de Editor. Let wel, dit systeembestand wordt overgeschrven bij een overgang van Dutch CMS naar een volgende versie. Als je dit dus doet moet je deze wijziging goed bijhouden voor jezelf ergens en daarna weer toepassen.

Ga naar de map javascripts > tiny_mce > css naar het bestand mycontent.css.

Daarin zie je de volgende regel staan:

/* TinyMCE specific rules */
body.mceContentBody, body, td, pre{color:#000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:8px;}

Hiermee wordt de opmaak bepaald van de tekst en de achtergrond van de Editor als je in de Editor aan het werk bent. Dit staat dus los van de opmaak die deze tekst krijgt nadat hij opgeslagen is en zichtbaar wordt op je pagina. Omgekeerd kun je hier dus de opmaak van de tekst op je website toepassen op de tekst van de Editor. Hierdoor maak je de illusie voor diegene die op het beheerdersgedeelte bezig is dat het ook in die opmaak opgeslagen wordt. In ieder geval is het handig in geval je de website ontwerpt voor iemand anders die er echt mee gaat werken om inhoud op de site te zetten.

Om nu dus als voorbeeld de gele achtergrond te krijgen en het gele lettertype passen we bovenstaande CSS als volgt aan. Deze CSS is in dit geval, nadat de layout van de website veranderd is aan de eigen wensen, gekopieerd uit de gewone CSS bestanden uit het bestand templates > css > dutchcms > algemenecss.css bij #tekst gecombineerd met de achtergrondkleur van de pagina's op de website.

body.mceContentBody, body, td, pre{background:#FAF5A8; color:#EEA238; font-family:Verdana; font-size:17px; font-weight:normal; margin:8px;}

We slaan de wijzigingen op en vervangen met FTP het oude bestand door het nieuwe. Let wel. Om deze wijzigingen in te laten gaan moet de TinyMCE Editor opnieuw geladen worden. Sluit je browser venster en verwijder eventueel zelfs je browser geschiedenis en start je browser daarna weer en ga terug naar je beheerdersgedeelte.

Als we nu wat tekst intikken ziet het er als volgt uit:

Tip voor niet-dutchcms wel-TinyMCE gebruikers
Voor mensen die via een zoekmachine op deze pagina zijn gekomen en geen gebruik maken van Dutch CMS en zich afvragen waar ze het bestand moeten plaatsen om het uiterlijk van de TinyMCE Editor te veranderen. Maak in de map tiny_mce een map genaamd css. Plaats daarin een bestand genaamd mycontent.css en plaats daarin bovenstaande code. Maak vervolgens in je init instructie een link naar dit bestand door deze regel toe te voegen:

content_css :"/javascripts/tiny_mce/css/mycontent.css",

De tinyMCE.init instructie vindt je in de Javascript die je in de header van je HTML-bron op je website moet invoegen.

Tip 4: Het bestand "eigencss.css"

In de map templates > eigencode > dutchcms (tm versie 1.7 was dit templates > css > dutchcms) vindt je het bestand eigencss.css. Dit bestand wordt zowel door de editor op het beheerdersgeelte ingelezen als aan de bezoekerskant van je website. CSS die je hieraan toevoegt wordt zichtbaar in de Editor bij Stijlen. Hierdoor kun je zelfgemaakte CSS toevoegen voor speciale opmaak van bepaalde gedeelten tekst. Een voorbeeld hiervan zijn de verschillende kaders die op deze pagina gebruikt worden met de blauw gestreepte rand. Dit is erg handig zowel voor jezelf als wanneer je Dutch CMS opzet voor iemand anders die zich aan een bepaalde huisstijl moet houden en bv niet zelf tekst een bepaalde kleur mag maken.

Stel we schrijven de volgende CSS in het bestand eigencss.css:

.kadergroen {
display: block;
/* display: inline-block; */
color: #009933;
font-weight: bold;
border: #009933 dashed 1px;
padding: 15px;
background-color: #99FF99;
}

.kopje {
color: #009933;
font-size:14px;
font-weight: bold;
}

Je kopieert het bestand met FTP naar je hostingprovider en vervangt het oude bestand. Om deze style op het beheerdersgedeelte in de Editor te krijgen is de truck dat je eerst je browser moet sluiten en eventueel zelfs je geschiedenis moet wissen. Als we vervolgens teruggaan naar het beheerdersgedeelte en een willkeurige pagina maken en bij de Editor klikken op Stijlen zien we ineens het volgende:

En een voorbeeld waarbij de CSS wordt gebruikt:

Kort nog wat uitleg over display: block en display: inline-block. Als je kiest bij het kader voor display:block en je drukt op enter = een volgende paragraaf dan maakt hij een nieuw kader ipv dat de tekst verder gaat in hetzelfde kader (voorbeeld de 2 codevoorbeelden hierboven met blauw kader). Je kunt dit voorkomen door 2x shift+enter te gebruiken. Een andere oplossing is display: inline-block te gebruiken maar dan moet je 2 keer op het kader klikken om het te kunnen bewerken (wat op zich niet erg is natuurlijk).
Wil je bovenstaande code echt gebruiken. Het /* code */ wil zeggen dat die code die daartussen staat commentaar is dus uitgeschakelld. Wil je dan ipv block, inline-bock gebruiken zet dan om het een /* */ en haal het bij het ander weg.

Kies de namen van je stijlen als je de site nog aan het opzetten bent wel verstandig zodat ze enigzins omschrijven wat ze doen. Zeker als je het opzet voor iemand anders. Houd er ook rekening mee dat als de site eenmaal in gebruik is en er zijn pagina's aangemaakt dat de CSS benaming mee opgeslagen wordt in de database. Niet de opmaak zelf natuurlijk maar wel de codenaam. Dus in bovenstaand voorbeeld staat er in de HTML bron: <span class="kadergroen">Dit is tekst in een voorgemaakt CSS kader</span>. Je moet dan dus niet een maand later ineens kadergroen bijvoorbeeld groenkader noemen of kadergroen1 want dan is de opmaak dus verdwenen.

Om een opgemaakt stuk tekst weer normaal te maken dus zonder die extra CSS opmaak selecteer je dat stuk tekst en klik je op Stylen en dan op dikgedrukt Stylen.

Mocht dat niet werken dan klik je (na selecteren) op het gummetje.

Tip voor niet-dutchcms wel-TinyMCE gebruikers
Voor mensen die via een zoekmachine op deze pagina zijn gekomen en geen gebruik maken van Dutch CMS en zich afvragen hoe het bestand eigencss.css gelinkt is aan de TinyMCS editor. Dit doe je in je init instructie. Het is beter om die gescheiden te houden van mycontent.css waarin de systeem CSS staat. Je voegt dus een extra regel toe:

content_css :"/javascripts/tiny_mce/css/mycontent.css, /css/eigencss.css",

Natuurlijk mag eigencss.css ook een andere naam hebben dan en moet je ervoor zorgen dat datzelfde bestand ook geladen wordt in de header van je website.

Tip 3: Onderdelen verbergen met display: none

Met de CSS code display: none kun je onderdelen van je website die draait op Dutch CMS makkelijk verbergen zodat je de layout volledig naar je wensen kan aanpassen. Op die manier hoef je niet zelf in de PHP code van Dutch CMS te gaan rommelen wat uiteraard nooit aan te raden is en die wijzigingen zouden dan ook weer verloren gaan bij een nieuwere versie van Dutch CMS. Stel dat je de datum niet op je site wilt dan ga je naar het CSS bestand headerfooter.css naar .datum en voeg je als eerste regel toe:

display: none;

Dit kun je in principe met alles doen. Nog een voorbeeld: stel dat je geen serietitel bovenaan je pagina wilt (op deze pagina is dat het woord Gebruikershandleidingen) dan ga je naar normalepaginacss.css naar .paginaserie en verander je display: block; in display: none;

Tip 2 - Handige CSS tool: ColorZilla

ColorZilla is een add-on voor de Firefox browser die superhandig is om een website mee te analyseren. Deze add-on is binnen 3 seconden geinstalleerd. Om CollorZilla te gebruiken klik je vervolgens links onder op het colorpicker symbooltje en verandert je muisaanwijzer in een plusje en kun je overal op een website zien welke kleur iets is en welke CSS code er gebruikt wordt. Dit is dus supperhandig als je je website die draait op Dutch CMS na de installatie qua layout gaat aanpassen aan je eigen wensen. Op die manier kun je precies zien welke CSS op een bepaalde plek gebruikt is en ga je naar die CSS in het bijbehorende CSS bestand en maak je je aanpassingen. Ook kun je dus zien welke kleur ergens gebruikt is wat handig is als je op een bepaalde website een kleur tegenkomt die je ook wilt gebruiken.

Hier een screenshot:

Je kunt ColorZilla installeren door met je Firefox browser te gaan naar:
https://addons.mozilla.org/nl/firefox/addon/271 
of
http://www.colorzilla.com/firefox/

Tip 1 - E-mail adressen voor je nieuwsbrief uit de database halen

Deze tip is vanaf Dutch CMS versie 1.9 komen te vervallen. Gebruik bv YourMailinglist Provider om mensen te laten aanmelden voor een nieuwsbrief en nieuwsbrieven te verzenden.

Voor meer tips kijk je bij de Veel Gestelde Vragen > Hoe kan ik..

Zie ook de algemene Webdesign Tips en Trucs op de Thema site over Webdesign, PHP en HTML.

Powered by Dutch CMS v2.0 XHTML Strict

Bezoek ook de Webdesign website van Dutch CMS