templates maken met helix framework joomla user group utrecht 10 november 2014
TRANSCRIPT
![Page 1: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/1.jpg)
Templates maken met het Helix Framework voor Joomla 3
ERIC TIGGELER | JOOMLA USER GROUP UTRECHT
ma 10 nov 2014 | zpot De Meern
![Page 2: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/2.jpg)
Eric Tiggeler
Tekstschrijver
Schrijfboeken
Boeken over Joomla:
www.joomla.erictiggeler.nl
![Page 3: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/3.jpg)
Programma• Wat zijn frameworks?
Hoe helpen ze je bij het maken van templates
• Voor- en nadelenWel of niet gebruiken
• Frameworks in detail: HelixDe praktijktest: wat kan je er allemaal mee?
• Andere frameworksEen korte vergelijking
![Page 4: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/4.jpg)
Template nodig, wat dan?1. Standaardtemplate Protostar
aanpassenLogo, header, kleuren aanpassen (hoofdstuk 4, Tips en tools voor Joomla 3)
![Page 5: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/5.jpg)
Template nodig, wat dan?2. Bestaande template aanpassen
Bijvoorbeeld Favourite van FavThemes.com (hoofdstuk 7, Tips en tools voor Joomla 3)
![Page 6: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/6.jpg)
Template nodig, wat dan?3. Vanaf nul een template bouwen
Basis in HTML en CSS + Joomla-codes + Bootstrap =eigen template
(uit: hoofdstuk 7 Tips en tools voor Joomla 3)
![Page 7: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/7.jpg)
Template nodig, wat dan?4. … een framework gebruiken
Afbeelding: /www.joomlart.com/blog/t3-framework/the-pros-and-cons-of-competing-joomla-template-frameworks
![Page 8: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/8.jpg)
Erg veel frameworksvoor Joomla• T3 (joomlart.com)• Warp (yootheme.com)• Gantry (gantry-framework.org)• Gavern (gavick.com)• Helix II (joomshaper.com)• Wright (joomlashack.com)• Bootstruct (construct-framework.com)• JV framework (joomlavi.com)• … en meer
![Page 9: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/9.jpg)
Wat zijn templateframeworks?
![Page 10: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/10.jpg)
… en wat kun je ermee als niet-codeklopper?
![Page 11: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/11.jpg)
Wat is een framework?• Eigenlijk een gewone template …
… maar dan wel heel uitgebreid• Basisvormgeving vaak kaal …
… maar via template-interface in debackend toegang tot ingebouwde opties
Je kunt de basistemplate van het frameworkdirect gebruiken, maar hij is bedoeld om zelf op maat te maken.
![Page 12: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/12.jpg)
Voordelen van frameworks• Niet vanaf nul beginnen
Je hoeft het wiel niet opnieuw uit te vinden• Geavanceerde extra’s ingebouwd
Responsive lay-out, megamenu, …• Basistemplate eenvoudig aan te passen
Geen codekennis nodig, vele tientallen ingebouwde opties
• Gebaseerd op bestaande codebibliotheken Vaak Bootstrap als basis
• Gratis te gebruikenGeen verplichte zichtbare copyrightregels
![Page 13: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/13.jpg)
Nadelen zijn er ook …• Er zijn er zoveel
Welke werkt het beste, welke levert beste resultaten, welke blijft bestaan?
• GecompliceerdTemplate + scripts + extensies
• Een systeem binnen een systeemElk framework heeft eigen logica, eigen interface
![Page 14: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/14.jpg)
Nadelen zijn er ook …• Documentatie versnipperd
Weinig stap-voor-stap tutorials. Hoe wijk je af van de ingebouwde mogelijkheden?
• Ermee leren werken vergt tijdWat handiger en sneller is voor een templateontwikkelaar, is dat niet voor wie af en toe een template maakt(denk aan LESS)
![Page 15: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/15.jpg)
Toch werk ik veel met …
![Page 16: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/16.jpg)
Waarom gekozen voor Helix?
![Page 17: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/17.jpg)
Voordelen van Helix• Erg veel ingebouwde opties
Template is vergaand aan te passen zonder een regel code
• Visuele ‘layout builder’O.a. moduleposities toevoegen en verplaatsen door te slepen
• Kleuren per layoutblok aanpasbaarAchtergrond, tekst, links
• ResponsiveInclusief responsive lay-out en menu
![Page 18: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/18.jpg)
Voordelen van Helix• Powered by Bootstrap (versie 2, net als
Joomla 3)• Bevat veel extra’s: megamenu en
‘shortcodes’ voor o.a. accordion• Css aan te passen: toevoegen in één
bestand custom.css• Ondersteunt Google Fonts en Google
Analytics• Claim: goede, moderne code,
‘lichtgewicht’
![Page 19: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/19.jpg)
Wie zit erachter?
![Page 20: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/20.jpg)
Joomshaper, Bangladesh
![Page 21: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/21.jpg)
Joomshaper maakt templates en extensies
![Page 22: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/22.jpg)
http://www.joomshaper.com/joomla-templates/helix-ii
… en het Helix-II-framework
![Page 23: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/23.jpg)
• Radon: strak, clean, corporate• Xeon: ‘one page template’, voor sites
met alle content op een pagina
(gratis) templates gebaseerd op Helix
![Page 24: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/24.jpg)
Gebouwd met HelixVoorbeelden: wat heb ik ermee gemaakt?
![Page 25: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/25.jpg)
joomla.erictiggeler.nl
![Page 26: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/26.jpg)
joomla.erictiggeler.nl
• Responsive
![Page 27: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/27.jpg)
schrijfgids.nl
![Page 28: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/28.jpg)
Helix: de praktijktest
![Page 29: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/29.jpg)
Wat heb je nodig om met Helix te beginnen?
• Voor bestaande site: alleen template + system plugin
• Voor een complete Joomla-demosite (met template en plugin): Quickstart Pack
![Page 30: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/30.jpg)
Zo ziet site eruit na installatie van het Quickstart Pack
![Page 31: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/31.jpg)
Hoe kun je de basistemplate aanpassen?
• Zoals bij elke template:• Templates > Stijlen > [helix] - Standaard
![Page 32: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/32.jpg)
Welke aanpassingen zijn allemaal mogelijk zonder aan de code te
komen?
Van logo tot lay-out
![Page 33: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/33.jpg)
Voorbeeld 1: logo vervangen• Tab Basic > Logo• Upload eigen logo
• Resultaat:
![Page 34: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/34.jpg)
Voorbeeld 2: footer aanpassen• Geen overbodige logo’s en copyrights• Tab Basic > Footer settings, Brand Info:• Kies bij alles voor Hide
• Resultaat:
![Page 35: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/35.jpg)
Voorbeeld 3: Google Fonts• Selecteer eerst je favoriete fonts op
http://www.google.com/fonts
![Page 36: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/36.jpg)
Voorbeeld 3: Google Fonts• Tab Fonts > Body Font, Header Font• Vul in: Google fontnaam en selectors
zoals body, h1, h2
![Page 37: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/37.jpg)
Google Fonts Het resultaat:
![Page 38: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/38.jpg)
Voorbeeld 4: homepage in afwijkende lay-out
• Tab Advanced > Component Area: • Kies Hide from frontpage
Gewone pagina
Homepage: alleen modules
![Page 39: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/39.jpg)
Voorbeeld 5: globale kleuraanpassingen
• Tab Presets: drie kleurenschema’s
![Page 40: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/40.jpg)
Voorbeeld 6: lay-out en kleuren aanpassen
Het geheime wapen van Helix:
Layout Builder
(tab Layout)
![Page 41: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/41.jpg)
Layout Builder• Van onder naar boven vind je alle
templateblokken en moduleposities• Blokken (divs): Header, Feature, Users, enz.• Moduleposities: logo, menu, enz.
![Page 42: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/42.jpg)
Layout BuilderBlokken in de Layout Builder= de code van de template= wat je ziet aan de voorkant van de site:
<div id="sp-feature" class="span12">
![Page 43: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/43.jpg)
Wat kun je met de Layout Builder?Eenvoudig moduleposities verslepen
1
2
3
![Page 44: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/44.jpg)
1 Moduleposities verslepenHet resultaat:
![Page 45: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/45.jpg)
2 Secties (paginablokken) verslepen
Bijvoorbeeld de menubalk (Header)
![Page 46: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/46.jpg)
3 Breedte van moduleposities aanpassen
• Helix gebruikt Bootstrap-grid: 12 kolommen• Bepaalt hoe breed ‘contentblokken’ zijn• Som van de blokken naast elkaar: altijd 12Over Bootstrap 2.3.2: getbootstrap.com/2.3.2/scaffolding.html
![Page 47: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/47.jpg)
Breedte van moduleposities aanpassen
• Per modulepositie kun je een Bootstrapbreedte toewijzen: span1 t/m span12
• Verander de span-breedte bijvoorbeeld om logo breder te maken en zoekvak smaller
![Page 48: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/48.jpg)
Breedte van modulepositiessaanpassen
• span3 – span6 – span3
• span4 – span5 – span3
![Page 49: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/49.jpg)
4 Extra kolommen (moduleposities) toevoegen
• Klik op ‘Add new column’
• Kies type ‘Module’ en geef positienaam op:
![Page 50: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/50.jpg)
• Meer over nieuwe moduleposities maken
www.joomshaper.com/documentation/helix/creating-module-positions
Ook mogelijk: extra rijen voormoduleposities toevoegen
Nieuwe rij In de lay-out
![Page 51: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/51.jpg)
5 Kleuren aanpassen via LayoutBuilder
• Klik in de Layout Builder op het tandwieltje• Pas de kleuren van het blok aan:
![Page 52: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/52.jpg)
Kleuren aanpassen via Layout builder• Je kunt veranderen:
• Achtergrondkleur• Tekstkleur• Linkkleur (en hoverkleur)• Bovendien de ruimte rondom:
margin en padding
![Page 53: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/53.jpg)
Kleuren aanpassen via Layout Builder• Een voorbeeld van het resultaat:
donkergrijze achtergrond, groene links in het blok Header
![Page 54: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/54.jpg)
Kleuren aanpassen via Layout Builder• Voorbeeld: groene kleur Background in het
blok Feature
![Page 55: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/55.jpg)
Het effect: paginakleuren wijzigen• Snel effect op de paginavormgeving door
blok voor blok de kleuren aan te passen
![Page 56: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/56.jpg)
6 Responsive weergave aanpassen
• Welke pagina-onderdelen zijn wel en niet zichtbaar op desktop, tablet en phone?
• Per sectie en module kun je de zichtbaarheid bij responsive weergave aanpassen
![Page 57: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/57.jpg)
Responsive weergave aanpassen: voorbeeld
• Bijvoorbeeld het blok Feature: zichtbaar op desktop, niet op kleiner scherm
![Page 58: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/58.jpg)
Responsive weergave aanpassen: voorbeeld
• Bijvoorbeeld het blok Feature: zichtbaar op desktop, niet op kleiner scherm
Desktop Tablet
![Page 59: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/59.jpg)
SamenvattendMet de Layout Builder kun je:
1. Moduleposities verplaatsen (verslepen)2. Secties (paginablokken) verslepen: hoger/lager3. Relatieve breedte moduleposities aanpassen4. Nieuwe moduleposities maken:
in nieuwe kolom of rij5. Kleuren bepalen van alle vaste paginablokken:
achtergrond, tekst, links (en margin en padding van die blokken wijzigen)
6. Responsive weergave bepalen
![Page 60: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/60.jpg)
Leuk voor codehatersAl die lay-outwijzigingen zijn
mogelijk …… zonder een regel code te
wijzigen
![Page 61: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/61.jpg)
En hoe doe je dan aanpassingen op detailniveau?
Niet alles kun je aanpassen met de ingebouwde opties
![Page 62: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/62.jpg)
Layout Builder bepaalt alleen de kleuren van de ‘vaste layout’
• Hoe verander je kleuren van modules?
![Page 63: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/63.jpg)
Modulekleuren aanpassen• Via module class suffix
• Standaard:
![Page 64: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/64.jpg)
Modulekleuren aanpassen• Met aangepast suffix:Voor beschikbare suffixen: zie Features > Module Variations op de Helix II demosite
![Page 65: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/65.jpg)
Andere aanpassingen: via CSS• Niet alles is te wijzigen via de ingebouwde opties• Bijvoorbeeld: centrale pagina met achtergrondfoto of -kleur
![Page 66: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/66.jpg)
Andere aanpassingen: via CSS• De gekleurde pagina-achtergrond kun je toewijzen
via de Layout Builder
![Page 67: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/67.jpg)
Andere aanpassingen: via CSS• Ontdek via de browsertools (Inspecteer element) hoe
je de paginakleur wijzigt
![Page 68: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/68.jpg)
Andere aanpassingen: via CSS• Ga naar Templates > [naam template] > Details and
files• Maak een bestand custom.css
![Page 69: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/69.jpg)
Andere aanpassingen: via CSS• Voer de benodigde code in en sla custom.css op
• Het resultaat:
![Page 70: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/70.jpg)
Helix: nog meer extra’s
![Page 71: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/71.jpg)
Meegeleverde extensie: megamenu
![Page 72: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/72.jpg)
Onderdeel van standaard-Joomla-menu’s
![Page 73: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/73.jpg)
Meegeleverde extra’s: shortcodes
![Page 74: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/74.jpg)
ShortcodesJe maakt shortcodes met de knop (plugin) in de artikel-tekstverwerker:
![Page 75: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/75.jpg)
ShortcodesBijvoorbeeld: accordion invoegen in artikel
![Page 76: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/76.jpg)
En de andere frameworks?
![Page 77: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/77.jpg)
En de andere?Er zijn veel template frameworks. Ze
bieden allemaal vergelijkbare features.
Een snelle blik op twee daarvan:
WarpT3
![Page 78: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/78.jpg)
WarpMet de Customizer kun je kleuren en marges aanpassen:
![Page 79: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/79.jpg)
WarpMet de Customizer kun je kleuren en marges aanpassen:
![Page 80: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/80.jpg)
WarpResponsive, met een off-canvas menu
![Page 81: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/81.jpg)
Warp• Lay-out aanpassen is veel minder
intuïtief• Geen visuele layout-builder
![Page 82: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/82.jpg)
T3• Eerste indruk: mooi, maar complex• Ook hier een ingebouwde customizer:
ThemeMagic
![Page 83: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/83.jpg)
T3• Updaten lijkt erg ingewikkeld• Alleen al om te updaten heb je een
uitgebreide component nodig
http://www.joomlart.com/documentation/wiki-ja-extension-manager/how-to
![Page 84: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/84.jpg)
Framework-template hergebruiken in andere site
• Moeilijk om informatie te vinden over hoe je je eigen template maakt (en hergebruikt), alleen over aanpassingen
• Joomshaper geeft aanwijzingen:www.joomshaper.com/forums/how-to-package-template#reply-26818
![Page 85: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/85.jpg)
Tot slot• Kijk eens rond op de demosites van de
verschillende frameworks• Kies een framework dat bij jouw
wensenlijstje past.• Probeer het uit: staat de manier van
werken je aan?
![Page 86: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/86.jpg)
Tot slotHappy frameworking!
![Page 87: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/87.jpg)
ExtraHoe installeer je de Helix-template zonder voorbeeldinhoud?• Installeren template en plugin• Inschakelen • Een kopie van de template maken
![Page 88: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/88.jpg)
1 Installeren1. Installeer Helix blank
template2. Installeer Helix System Plugin3. Optioneel: installeer
Shortcode Generator
![Page 89: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/89.jpg)
2 Inschakelen• Activeer beide plugins
![Page 90: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/90.jpg)
3 Kopiëren template• Noem de kopie bijvoorbeeld
helixdemo
![Page 91: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/91.jpg)
3a Kopiëren templateNa het kopiëren moet je nog een taalbestand handmatig kopiëren:1. Ga naar
[webadres]/helixdemo/language/en-GB
2. Zoek naar bestanden-GB.tpl_shaper_helix_ii.ini
3. Kopieer het bestand en hernoemhet tot en-GB.tpl_helixdemo.ini
![Page 92: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/92.jpg)
3b Kopiëren templateTot slot een bestand hernoemen1. Ga naar [webadres]/helixdemo/templates/helixdemo/layout/shaper_helix_ii.json2. Hernoem het bestand tot helixdemo.json
![Page 93: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/93.jpg)
4 Nieuwe template als standaard instellen
![Page 94: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/94.jpg)
5 Resultaat
![Page 95: Templates maken met helix framework Joomla User Group Utrecht 10 november 2014](https://reader034.vdocuments.mx/reader034/viewer/2022051112/55a48f891a28abb93e8b4653/html5/thumbnails/95.jpg)
Eric Tiggeler
Deze presentatie:
www.slideshare.net
www.joomla.erictiggeler.nl