CMSMS HTML5 Responsive parallax template

CMSMS HTML5 Responsive parallax template

CMS Made Simple 1.11+ / 2.0+ | 25-03-2016 | Pascal Merks | Reacties


Let op: Voor CMS Made Simple 2.0+ gebruiker. Template1200 is geupdate voor CMS Made Simple 2.0+. Deze versie werkt wel maar is niet optimaal voor CMS Made Simple 2.0+ en is gemaakt voor CMS Made Simple 1.11+.

Link naar de CMS Made Simple 2.0+ versie: http://pmkmedia.nl/news/43/88/CMSMS-HTML5-Responsive-parallax-template-2-0

Voor CMS Made Simple heb ik een nieuwe template gemaakt om een responsive website te maken met parallax achtergronden. Voor deze template is geen uitbreiding nodig. Alleen de installatie van CMS Made Simple. Mocht je de Slideshow / Gallery of een Contact formulier willen gebruiken dan zijn de uitbreidingen Gallery en Form Builder nodig.

Voorbeeld: http://template1200.pmkmedia.nl

Zip bestand met alle bestanden: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.6.zip

 

CMS Made Simple installeren:

Installeer CMS Made Simple en activeer Pretty Url:

http://docs.cmsmadesimple.org/configuration/pretty-url

Ga naar Inhoud/Bestandsbeheer en upload hier de map template1200 uit de map uploads van het zip bestand.
(Dit gaat het snelste via een FTP programma)

Ga naar Inhoud/Afbeeldingbeheer en maak hier 2 mappen aan
(in CMS Made Simple 2.0+ die je dat bij Inhoud/Bestandsbeheer/images):

  1. backgrounds (Map voor de header achtergronden alleen jpg)
  2. pics (Map voor pagina afbeeldingen deze moeten vierkant zijn. Deze mogen jpg, jpeg, png of gif bestanden zijn)

 

Gebruikersgedefinieerde tags:

Maak een nieuwe UDT aan met als naam get_image en kopieer de inhoud uit het gelijknamige bestand in de map UDT van het zip bestand er in.

 

HTML-Blokken (CMS Made Simple 1.11+):

Ga naar inhoud/HTML-blokken en maak de volgende HTML-Blokken aan met de zelfde namen.

 

Maak voor de pagina's met een header achtergrond ook een HTML-Blok aan met de zelfde naam als de page alias. Hier kan je de tekst invullen die je wil zien in de header. In CMS Made Simple 2.0+ doe je dat via Opmaak/Design Manager/Sjablonen en maar een Core::Algemeen sjabloon aan voor de header.

 

Let op: Gebruik geen streepjes in je page alias. Dit is omdat HTML-Blokken geen streepjes ondersteunen.

 

Als je een contactformulier gebruikt kan je die in HTML-Blok "contactform" zetten. (Contact formulier voor Form Builder zit in het zipbestand). De andere spreken voor zich. In CMS Made Simple 2.0+ staat deze al standaard in het Template1200-contact sjabloon.

 

Sjablonen:

De lijst met Sjablonen:

  1. Template1200 - De basis met header achtergrond.
  2. Template1200-home - Sjabloon voor de home-page met onder aan de laatste 4 news artikelen.
  3. Template1200-contact - Contactpagina met HTML-Blok Contactform.
  4. Template1200-gallery - Voor een gallery met Gallery sjabloon Template1200-Gallery.
  5. Template1200-news-search - Toewijzen aan de nieuws en zoek pagina.
  6. Template1200-page -  Voor een basis pagina zonder header
  7. Template1200-slider - Voor een gallery met Gallery sjabloon Template1200-Slider.

 

Nieuws sjablonen (CMS Made Simple 1.11+):

In het zip bestand zitten 2 nieuws samenvattingen sjablonen en 2 nieuws artikel sjabloon. Zet deze in de nieuws module met de zelfde naam als het bestand. Kies zelf welke nieuws sjabloon je het mooiste vind en stel deze in als standaard (ook in CMS Made Simple 2.0+).

 

Maak ook de volgende 3 velddefinities aan en maak ze publiek (ook in CMS Made Simple 2.0+):

 

  1. Author - is de naam van de auteur.
  2. Image - is de afbeelding voor de samenvatting en het eerste artikel sjabloon
  3. Imagearticle - is de afbeelding voor artikel sjabloon v2

 

Nieuwspagina regel:

{news number="12" summarytemplate="Template1200"}

Stel je nieuwspagina in als Standaard pagina voor detail vertoningen in de nieuws module.

 

Zoek sjabloon (CMS Made Simple 1.11+):

Wijzig het zoeksjabloon in die die in het zip bestand zit. Het Resultaatsjabloon kun je zo laten. Stel de zoek pagina als Pagina voor individuele module resultaten (Opm. modules kunnen dit mogelijk negeren) in in de zoek module.

 

Kleur aanpassen:

In de stylesheets Template1200-style en Template1200-menu staat boven aan de volgende regel:

[[* +++++ COLOR SETTINGS +++++ *]]
[[assign var='color' value='#F60']]

Hier kan je de kleur van de website links, headers en het menu aanpassen naar de kleur die je mooi vind! Standaard is dat #F60 (oranje).

 

Dat was het weer. Veel plezier er mee en zijn er vragen of ben ik iets vergeten zeg het maar!

 

Voorbeeld video:

 

Changelog:

Upgrade naar versie 1.6
Wat is er veranderd in versie 1.6:

1. Aangepast voor CMSMS 2.0+.

Link naar zip: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.6.zip

Upgrade naar versie 1.5
Wat is er veranderd in versie 1.5:

1. Formbuilder sjabloon PHP error_reporting gefixt.

Link naar zip: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.5.zip

Upgrade naar versie 1.4

Wat is er veranderd in versie 1.4:

1. MicroTiny WYSIWYG Editor text links uitlijnen fix

Link naar zip: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.4.zip

Upgrade naar versie 1.3

Wat is er veranderd in versie 1.3:

1. UDT voor pagina afbeeldingen (nu kunnen het  jpg, jpeg, png of gif bestanden zijn).
2. Gallery template laat nu een beschrijving van de gallery zien als deze is ingevuld.

Link naar zip: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.3.zip

Upgrade naar versie 1.2

Wat is er veranderd in versie 1.2:

1. Menu sjabloon in de template toegevoegd.
2. Nieuws sjablonen verbeterd.
3. Nieuw extra nieuws artikel sjabloon gemaakt.

Link naar zip: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.2.zip

Upgrade naar versie 1.1

Wat is er veranderd in versie 1.1:

1. Grid geupdate naar 1.7.
2. Social media svg bestanden gefixt voor Internet Exporer.

Link naar zip: http://template1200.pmkmedia.nl/uploads/files/Template1200-1.1.zip

Reacties:

comments powered by Disqus

Laatst toegevoegd

Categorieën

Laatste reacties

Laatste tweets