Templates maken met het Helix Framework voor Joomla 3

ERIC TIGGELER | JOOMLA USER GROUP UTRECHT

ma 10 nov 2014 | zpot De Meern

Eric Tiggeler

Tekstschrijver

Schrijfboeken

Boeken over Joomla:

www.joomla.erictiggeler.nl

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

Template nodig, wat dan?1. Standaardtemplate Protostar

aanpassenLogo, header, kleuren aanpassen (hoofdstuk 4, Tips en tools voor Joomla 3)

Template nodig, wat dan?2. Bestaande template aanpassen

Bijvoorbeeld Favourite van FavThemes.com (hoofdstuk 7, Tips en tools voor Joomla 3)

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)

Template nodig, wat dan?4. … een framework gebruiken

Afbeelding: /www.joomlart.com/blog/t3-framework/the-pros-and-cons-of-competing-joomla-template-frameworks

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

Wat zijn templateframeworks?

… en wat kun je ermee als niet-codeklopper?

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.

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

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

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)

Toch werk ik veel met …

Waarom gekozen voor Helix?

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

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’

Wie zit erachter?

Joomshaper, Bangladesh

Joomshaper maakt templates en extensies

http://www.joomshaper.com/joomla-templates/helix-ii

… en het Helix-II-framework

• Radon: strak, clean, corporate• Xeon: ‘one page template’, voor sites

met alle content op een pagina

(gratis) templates gebaseerd op Helix

Gebouwd met HelixVoorbeelden: wat heb ik ermee gemaakt?

joomla.erictiggeler.nl

joomla.erictiggeler.nl

• Responsive

schrijfgids.nl

Helix: de praktijktest

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

Zo ziet site eruit na installatie van het Quickstart Pack

Hoe kun je de basistemplate aanpassen?

• Zoals bij elke template:• Templates > Stijlen > [helix] - Standaard

Welke aanpassingen zijn allemaal mogelijk zonder aan de code te

komen?

Van logo tot lay-out

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

• Resultaat:

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

• Resultaat:

Voorbeeld 3: Google Fonts• Selecteer eerst je favoriete fonts op

http://www.google.com/fonts

Voorbeeld 3: Google Fonts• Tab Fonts > Body Font, Header Font• Vul in: Google fontnaam en selectors

zoals body, h1, h2

Google Fonts Het resultaat:

Voorbeeld 4: homepage in afwijkende lay-out

• Tab Advanced > Component Area: • Kies Hide from frontpage

Gewone pagina

Homepage: alleen modules

Voorbeeld 5: globale kleuraanpassingen

• Tab Presets: drie kleurenschema’s

Voorbeeld 6: lay-out en kleuren aanpassen

Het geheime wapen van Helix:

Layout Builder

(tab Layout)

Layout Builder• Van onder naar boven vind je alle

templateblokken en moduleposities• Blokken (divs): Header, Feature, Users, enz.• Moduleposities: logo, menu, enz.

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">

Wat kun je met de Layout Builder?Eenvoudig moduleposities verslepen

1

2

3

1 Moduleposities verslepenHet resultaat:

2 Secties (paginablokken) verslepen

Bijvoorbeeld de menubalk (Header)

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

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

Breedte van modulepositiessaanpassen

• span3 – span6 – span3

• span4 – span5 – span3

4 Extra kolommen (moduleposities) toevoegen

• Klik op ‘Add new column’

• Kies type ‘Module’ en geef positienaam op:

• 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

5 Kleuren aanpassen via LayoutBuilder

• Klik in de Layout Builder op het tandwieltje• Pas de kleuren van het blok aan:

Kleuren aanpassen via Layout builder• Je kunt veranderen:

• Achtergrondkleur• Tekstkleur• Linkkleur (en hoverkleur)• Bovendien de ruimte rondom:

margin en padding

Kleuren aanpassen via Layout Builder• Een voorbeeld van het resultaat:

donkergrijze achtergrond, groene links in het blok Header

Kleuren aanpassen via Layout Builder• Voorbeeld: groene kleur Background in het

blok Feature

Het effect: paginakleuren wijzigen• Snel effect op de paginavormgeving door

blok voor blok de kleuren aan te passen

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

Responsive weergave aanpassen: voorbeeld

• Bijvoorbeeld het blok Feature: zichtbaar op desktop, niet op kleiner scherm

Responsive weergave aanpassen: voorbeeld

• Bijvoorbeeld het blok Feature: zichtbaar op desktop, niet op kleiner scherm

Desktop Tablet

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

Leuk voor codehatersAl die lay-outwijzigingen zijn

mogelijk …… zonder een regel code te

wijzigen

En hoe doe je dan aanpassingen op detailniveau?

Niet alles kun je aanpassen met de ingebouwde opties

Layout Builder bepaalt alleen de kleuren van de ‘vaste layout’

• Hoe verander je kleuren van modules?

Modulekleuren aanpassen• Via module class suffix

• Standaard:

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

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

Andere aanpassingen: via CSS• De gekleurde pagina-achtergrond kun je toewijzen

via de Layout Builder

Andere aanpassingen: via CSS• Ontdek via de browsertools (Inspecteer element) hoe

je de paginakleur wijzigt

Andere aanpassingen: via CSS• Ga naar Templates > [naam template] > Details and

files• Maak een bestand custom.css

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

• Het resultaat:

Helix: nog meer extra’s

Meegeleverde extensie: megamenu

Onderdeel van standaard-Joomla-menu’s

Meegeleverde extra’s: shortcodes

ShortcodesJe maakt shortcodes met de knop (plugin) in de artikel-tekstverwerker:

ShortcodesBijvoorbeeld: accordion invoegen in artikel

En de andere frameworks?

En de andere?Er zijn veel template frameworks. Ze

bieden allemaal vergelijkbare features.

Een snelle blik op twee daarvan:

WarpT3

WarpMet de Customizer kun je kleuren en marges aanpassen:

WarpMet de Customizer kun je kleuren en marges aanpassen:

WarpResponsive, met een off-canvas menu

Warp• Lay-out aanpassen is veel minder

intuïtief• Geen visuele layout-builder

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

ThemeMagic

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

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

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?

Tot slotHappy frameworking!

ExtraHoe installeer je de Helix-template zonder voorbeeldinhoud?• Installeren template en plugin• Inschakelen • Een kopie van de template maken

1 Installeren1. Installeer Helix blank

template2. Installeer Helix System Plugin3. Optioneel: installeer

Shortcode Generator

2 Inschakelen• Activeer beide plugins

3 Kopiëren template• Noem de kopie bijvoorbeeld

helixdemo

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

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

4 Nieuwe template als standaard instellen

5 Resultaat

Eric Tiggeler

Deze presentatie:

www.slideshare.net

www.joomla.erictiggeler.nl