Installeer Template980

Installeer Template980

Category: Test Category | Datum: 22-07-2014 | Auteur: Pascal Merks

Altijd al een nieuws website willen beginnen? Maar geen idee hoe? CMS Made Simple en Template980 maakt het je nu heel makkelijk om een responsive nieuws website te starten! Deel berichten op Facebook en Twitter. Laat bezoekers reageren op je artikelen met Facebook Comments. En laat bezoekers je website delen op Facebook en Twitter met 1 knop! Template980 is een basis template voor CMS Made Simple en is naar eigen hand aan te passen via Stylesheet template980. Zo kan je je nieuws site naar wens aanpassen qua kleur/lettertype etc...

 

Voorbeeld: http://template980.pmkmedia.nl

 

Stylesheet voorbeelden:

http://template980.pmkmedia.nl/styledemo1

http://template980.pmkmedia.nl/styledemo2

http://template980.pmkmedia.nl/styledemo3

http://template980.pmkmedia.nl/styledemo4/blue

http://template980.pmkmedia.nl/styledemo4/pink

http://template980.pmkmedia.nl/styledemo4/green

 

Zip bestand met alle bestanden: http://grid.pmkmedia.nl/Template980v4.zip

Zip bestand met de Stylesheet bestanden: http://grid.pmkmedia.nl/Template980style.zip

 

(Zie de website met demo's van de verschillende Stylesheet voorbeelden.)

De CSS bestanden hebben de namen van de Stylesheets in CMS Made Simple. Vervang de inhoud van de Stylesheet met de inhoud van het gelijknamige CSS bestanden en upload de eventuele map template980 naar de root van je website. Als er een achtergrond afbeelding bij zit upload deze dan naar Inhoud/Afbeeldingbeheer.

 

Stap 1:

Installeer CMS Made Simple en de volgende uitbreidingen:

1. Form Builder
2. TinyMCE WYSIWTG Editor

Stap 2 Themabeheer:

Ga naar Opmaak/Themabeheer/Importeer en upload het bestand Template980-Theme.xml

Nu zijn alle Sjablonen/Stylsheets en het Menu sjabloon aangemaakt.

Stel template980page in als standaard sjabloon.

 

Stap 3 UDT aanmaken:

Uitbreidingen/Gebruikergefedinieerde tags/Tag toevoegen

Naam: youtube

Code:

echo '<iframe width="640" height="360" src="//www.youtube.com/embed/' . ($params['file']) . '?autohide=1" frameborder="0" allowfullscreen></iframe>';

 

Stap 4 Form Builder:

Ga naar uitbreiding Form Builder en verwijder alle formulieren. Upload het bestand Tamplate980-Contact_Formulier.xml via Upload formulier vanuit een XML-bestand.

Pas in het net aangemaakte Contact Formulier bij Formuliervelden het verzend e-mail adres aan naar het e-mail adres waar het contact formulier heen moet verzonden worden.

 

Stap 5 Nieuws Module:

Maak in de Nieuws Module de volgende Samenvattingssjablonen aan en kopieer de inhoud uit het gelijknamige bestand uit de map Nieuws Samenvattingssjablonen.

  1. cat-template980
  2. list-template980
  3. template980
  4. top-template980

Maak in de Nieuws Module het volgende Artikelsjabloon aan en kopieer de inhoud uit het gelijknamige bestand uit de map Nieuws Artikelsjabloon. Stel in als standaard sjabloon.

  1. template980

Maak in de Nieuws Module de volgende Velddefinities aan:

 

Naam: Type:  
FotoThumb Bestand Pubiek(openbaar)
Foto Bestand Pubiek(openbaar)
Video Tekstinvoer Pubiek(openbaar)
Auteur Tekstinvoer Pubiek(openbaar)

 

Onder FotoThumb upload je de foto voor de samenvatting bij Foto de foto voor het artikel en bij Auteur de schrijver van het artikel. In de map Root/template980/images staan 2 dummy fotos met het formaat van de 2 afbeeldingen.

Vul bij Video de ID van het Youtube filmpje in. Ga bij het Youtube filmpje naar Delen / Insluiten en kopier de code achter www.youtube.com/embed/ bijvoorbeeld www.youtube.com/embed/Yx_qHHw gebruik dan alleen Yx_qHHw en vul deze in het Video veld in.

In het tabblad Categorieën kan je zelf de categorieën aanmaken die je wilt.

Stel bij Opties onder "Standaard pagina voor detail vertoningen:” de pagina Artikel in als standaard pagina.

 

Stap 6 Pagina's:

Maak de volgende pagina's aan en geef ze de juiste sjablonen:

 

Pagina: Sjabloon:  
Home template980 {news lang="nl_NL" start="3" number="6" summarytemplate="template980"}
Artikel template980article Schakel bij tabblad Opties Toon in menu: uit.
Zoeken template980page Schakel bij tabblad Opties Toon in menu: uit.
Contact template980page {FormBuilder form='contact'}

 

Stap 7 HTML-Blokken:

Maak 5 HTML-Blokken aan:

 

Naam: Inhoud:
description (WYSIWYG Editor uit) Korte website beschrijving.
facebook (WYSIWYG Editor uit) Facebook like box code (https://developers.facebook.com/docs/plugins/like-box-for-pages) of en Facebook Activity Feed code (https://developers.facebook.com/docs/plugins/activity/). WIl je geen geen Facebook like box vul dan een 0 in.
twitter (WYSIWYG Editor uit) Twitter widget code (https://twitter.com/settings/widgets). Wil je geen Twitter widget vul dan een 0 in.
footer Website footer informatie.
logo Plaats hier een logo voor in de header inplaats van de naam. Wil je geen logo maar de website naam vul dan een 0 in.

 

Sluit javascript altijd in tussen {literal__} —JAVASCRIPT— {/__literal}

Verwijder de 2 lage streepjes in {literal__} en {/__literal}.

 

Stap 8 Metadata:

Webstebeheer/Algemene instellingen onder het eerste tablad vervang de oude Algemene metadata: met deze.

 

<meta name="description" content="{global_content name='description'}">

<meta name="generator" content="{sitename}">
<meta name="author" content="{root_url}">

<meta name="robots" content="index, follow">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- html5shiv.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="{root_url}/template980/js/html5shiv.js" type="text/javascript"></script>
<![endif]-->

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="{root_url}/template980/js/css3-mediaqueries.js" type="text/javascript"></script>
<![endif]-->

<link rel="shortcut icon" href="{root_url}/template980/images/touch-icon.png">
<link rel="apple-touch-icon" href="{root_url}/template980/images/touch-icon.png">

<meta name="application-name" content="{sitename}"/>
<meta name="msapplication-navbutton-color" content="black"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="{root_url}/template980/images/touch-icon.png"/>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,300,100,200,900' rel='stylesheet' type='text/css'>

 

Stap 9 Zoeken:

Zet bij uitbreiding Zoeken/Opties Pagina voor individuele module resultaten (Opm. modules kunnen dit mogelijk negeren): op het Artikel pagina.

 

Stap 10 TinyMCE WYSIWYG Editor:

Vul bij tablad CSS-stijlen in uitbreiding TinyMCE WYSIWYG Editor de volgende regel in bij Stijlen:

 

Code:

Foto rechts=pageimgright; Foto links=pageimgleft

 

Via stijlen in de TinyMCE WYSIWYG Editor kan je nu een foto links of rechts op je pagina zetten door op de ingevoerde foto te klikken en de gewenste stijl te selecteren.

 

Stap 11 Bestanden uploaden:

Vervang het touch-icon.png bestand door jou touch-icon.png bestand met je website icon.
Upload de map template980 uit de map Root naar de root van je website.

 

Dat was het weer. Veel plezier er mee en zijn er vragen stel ze!

Like en deel onze website

Vind ons op Facebook

Vind ons op Twitter