Templates maken met het Helix II Framework van Joomshaper. Hoe werkt het, wat kun je ermee, hoe zet je de basistemplate naar je hand?

1. Templates
maken met het
Helix Framework
voor Joomla 3
ma 10 nov 2014 | zpot De Meern
ERIC TIGGELER | JOOMLA USER GROUP UTRECHT

2. Eric
Tiggeler
Tekstschrijver
Schrijfboeken
Boeken over Joomla:
www.joomla.erictiggeler.nl

3. Programma
• Wat zijn frameworks?
Hoe helpen ze je bij het maken van templates
• Voor- en nadelen
Wel of niet gebruiken
• Frameworks in detail: Helix
De praktijktest: wat kan je er allemaal mee?
• Andere frameworks
Een korte vergelijking

4. Template nodig, wat dan?
1. Standaardtemplate Protostar
aanpassen
Logo, header, kleuren aanpassen
(hoofdstuk 4, Tips en tools voor Joomla 3)

5. Template nodig, wat dan?
2. Bestaande template aanpassen
Bijvoorbeeld Favourite van FavThemes.com
(hoofdstuk 7, Tips en tools voor Joomla 3)

6. 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)

7. Template nodig, wat dan?
4. … een framework gebruiken
Afbeelding: /www.joomlart.com/blog/t3-framework/the-pros-and-cons-of-competing-joomla-template-frameworks

8. Erg veel frameworks
voor 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

9. Wat zijn
template
frameworks?

10. … en wat kun je
ermee als niet-codeklopper?

11. Wat is een framework?
• Eigenlijk een gewone template …
… maar dan wel heel uitgebreid
• Basisvormgeving vaak kaal …
… maar via template-interface in de
backend toegang tot ingebouwde
opties
Je kunt de basistemplate van het framework
direct gebruiken, maar hij is bedoeld om zelf op
maat te maken.

12. 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 gebruiken
Geen verplichte zichtbare copyrightregels

13. Nadelen zijn er ook …
• Er zijn er zoveel
Welke werkt het beste, welke levert
beste resultaten, welke blijft bestaan?
• Gecompliceerd
Template + scripts + extensies
• Een systeem binnen een systeem
Elk framework heeft eigen logica, eigen
interface

14. Nadelen zijn er ook …
• Documentatie versnipperd
Weinig stap-voor-stap tutorials.
Hoe wijk je af van de ingebouwde
mogelijkheden?
• Ermee leren werken vergt tijd
Wat handiger en sneller is voor een
templateontwikkelaar, is dat niet
voor wie af en toe een template maakt
(denk aan LESS)

15. Toch werk ik veel met …

16. Waarom
gekozen
voor Helix?

17. 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 aanpasbaar
Achtergrond, tekst, links
• Responsive
Inclusief responsive lay-out en menu

18. 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’

19. Wie zit erachter?

20. Joomshaper,
Bangladesh

21. Joomshaper maakt templates
en extensies

22. … en het Helix-II-framework
http://www.joomshaper.com/joomla-templates/
helix-ii

23. (gratis) templates gebaseerd
op Helix
• Radon: strak, clean, corporate
• Xeon: ‘one page template’, voor sites
met alle content op een pagina

24. Gebouwd met Helix
Voorbeelden: wat heb ik ermee
gemaakt?

25. joomla.erictiggeler.nl

26. joomla.erictiggeler.nl
• Responsive

27. schrijfgids.nl

28. Helix: de
praktijktest

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

30. Zo ziet site eruit na installatie van
het Quickstart Pack

31. Hoe kun je de basistemplate
aanpassen?
• Zoals bij elke template:
• Templates > Stijlen > [helix] - Standaard

32. Welke aanpassingen zijn allemaal
mogelijk zonder aan de code te
komen?
Van logo tot lay-out

33. Voorbeeld 1: logo vervangen
• Tab Basic > Logo
• Upload eigen logo
• Resultaat:

34. Voorbeeld 2: footer aanpassen
• Geen overbodige logo’s en copyrights
• Tab Basic > Footer settings, Brand Info:
• Kies bij alles voor Hide
• Resultaat:

35. Voorbeeld 3: Google Fonts
• Selecteer eerst je favoriete fonts op
http://www.google.com/fonts

36. Voorbeeld 3: Google Fonts
• Tab Fonts > Body Font, Header Font
• Vul in: Google fontnaam en selectors
zoals body, h1, h2

37. Google Fonts
Het resultaat:

38. Voorbeeld 4: homepage in
afwijkende lay-out
• Tab Advanced > Component Area:
• Kies Hide from frontpage
Gewone
pagina
Homepage: alleen
modules

39. Voorbeeld 5: globale
kleuraanpassingen
• Tab Presets: drie
kleurenschema’s

40. Voorbeeld 6: lay-out en
kleuren aanpassen
Het geheime wapen van Helix:
Layout Builder
(tab Layout)

41. Layout Builder
• Van onder naar boven vind je alle
templateblokken en moduleposities
• Blokken (divs): Header, Feature, Users, enz.
• Moduleposities: logo, menu, enz.

42. Layout Builder
Blokken in de Layout Builder
= de code van de template
= wat je ziet aan de voorkant van de site:
<div id="sp-feature"
class="span12">

43. Wat kun je met de Layout Builder?
Eenvoudig moduleposities verslepen
1
2
3

44. 1 Moduleposities verslepen
Het resultaat:

45. 2 Secties (paginablokken)
verslepen
Bijvoorbeeld de menubalk (Header)

46. 3 Breedte van moduleposities
aanpassen
• Helix gebruikt Bootstrap-grid: 12 kolommen
• Bepaalt hoe breed ‘contentblokken’ zijn
• Som van de blokken naast elkaar: altijd 12
Over Bootstrap 2.3.2: getbootstrap.com/2.3.2/scaffolding.html

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

48. Breedte van modulepositiess
aanpassen
• span3 – span6 – span3
• span4 – span5 – span3

49. 4 Extra kolommen
(moduleposities) toevoegen
• Klik op ‘Add new column’
• Kies type ‘Module’ en geef positienaam op:

50. Ook mogelijk: extra rijen voor
moduleposities toevoegen
Nieuwe rij
In de lay-out
• Meer over nieuwe moduleposities maken
www.joomshaper.com/documentation/helix/creating-module-positions

51. 5 Kleuren aanpassen via Layout
Builder
• Klik in de Layout Builder op het tandwieltje
• Pas de kleuren van het blok aan:

52. Kleuren aanpassen via Layout builder
• Je kunt veranderen:
• Achtergrondkleur
• Tekstkleur
• Linkkleur (en hoverkleur)
• Bovendien de ruimte rondom:
margin en padding

53. Kleuren aanpassen via Layout Builder
• Een voorbeeld van het resultaat:
donkergrijze achtergrond, groene links
in het blok Header

54. Kleuren aanpassen via Layout Builder
• Voorbeeld: groene kleur Background in het
blok Feature

55. Het effect: paginakleuren wijzigen
• Snel effect op de paginavormgeving door
blok voor blok de kleuren aan te passen

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

57. Responsive weergave
aanpassen: voorbeeld
• Bijvoorbeeld het blok Feature:
zichtbaar op desktop, niet op kleiner scherm

58. Responsive weergave
aanpassen: voorbeeld
• Bijvoorbeeld het blok Feature:
zichtbaar op desktop, niet op kleiner scherm
Desktop Tablet

59. Samenvattend
Met de Layout Builder kun je:
1. Moduleposities verplaatsen (verslepen)
2. Secties (paginablokken) verslepen: hoger/lager
3. Relatieve breedte moduleposities aanpassen
4. Nieuwe moduleposities maken:
in nieuwe kolom of rij
5. Kleuren bepalen van alle vaste paginablokken:
achtergrond, tekst, links
(en margin en padding van die blokken wijzigen)
6. Responsive weergave bepalen

60. Leuk voor codehaters
Al die lay-outwijzigingen zijn
mogelijk …
… zonder een regel code te
wijzigen

61. En hoe doe je dan
aanpassingen op detailniveau?
Niet alles kun je aanpassen met de
ingebouwde opties

62. Layout Builder bepaalt alleen de
kleuren van de ‘vaste layout’
• Hoe verander je kleuren van modules?

63. Modulekleuren aanpassen
• Via module class suffix
• Standaard:

64. Modulekleuren aanpassen
• Met aangepast suffix:
Voor beschikbare suffixen:
zie Features > Module Variations op de Helix II demosite

65. Andere aanpassingen: via CSS
• Niet alles is te wijzigen via de ingebouwde opties
• Bijvoorbeeld: centrale pagina
met achtergrondfoto of -kleur

66. Andere aanpassingen: via CSS
• De gekleurde pagina-achtergrond kun je toewijzen
via de Layout Builder

67. Andere aanpassingen: via CSS
• Ontdek via de browsertools (Inspecteer element) hoe
je de paginakleur wijzigt

68. Andere aanpassingen: via CSS
• Ga naar Templates > [naam template] > Details and
files
• Maak een bestand custom.css

69. Andere aanpassingen: via CSS
• Voer de benodigde code in en sla custom.css op
• Het resultaat:

70. Helix:
nog meer
extra’s

71. Meegeleverde extensie:
megamenu

72. Onderdeel van standaard-
Joomla-menu’s

73. Meegeleverde extra’s:
shortcodes

74. Shortcodes
Je maakt shortcodes met de knop (plugin)
in de artikel-tekstverwerker:

75. Shortcodes
Bijvoorbeeld: accordion invoegen in
artikel

76. En de
andere
frameworks?

77. En de andere?
Er zijn veel template frameworks. Ze
bieden allemaal vergelijkbare features.
Een snelle blik op twee daarvan:
Warp
T3

78. Warp
Met de Customizer kun je kleuren en
marges aanpassen:

79. Warp
Met de Customizer kun je kleuren en
marges aanpassen:

80. Warp
Responsive, met een off-canvas menu

81. Warp
• Lay-out aanpassen is veel minder
intuïtief
• Geen visuele layout-builder

82. T3
• Eerste indruk: mooi, maar complex
• Ook hier een ingebouwde customizer:
ThemeMagic

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

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

85. 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?

86. Tot slot
Happy frameworking!

87. Extra
Hoe installeer je de Helix-template zonder
voorbeeldinhoud?
• Installeren template en plugin
• Inschakelen
• Een kopie van de template maken

88. 1 Installeren
1. Installeer Helix blank
template
2. Installeer Helix System Plugin
3. Optioneel: installeer
Shortcode Generator

89. 2 Inschakelen
• Activeer beide plugins

90. 3 Kopiëren template
• Noem de kopie bijvoorbeeld
helixdemo

91. 3a Kopiëren template
Na het kopiëren moet je nog een
taalbestand handmatig kopiëren:
1. Ga naar
[webadres]/helixdemo/language/en-GB
2. Zoek naar bestand
en-GB.tpl_shaper_helix_ii.ini
3. Kopieer het bestand en hernoem
het tot en-GB.tpl_helixdemo.ini

92. 3b Kopiëren template
Tot slot een bestand hernoemen
1. Ga naar
[webadres]/helixdemo/templates/helixde
mo/layout/shaper_helix_ii.json
2. Hernoem het bestand tot
helixdemo.json

93. 4 Nieuwe template als
standaard instellen

94. 5 Resultaat

95. Eric Tiggeler
Deze presentatie:
www.slideshare.net
www.joomla.erictiggeler.nl