1. Han Maassen
De Oude Pastorie – Linden
Joomla! Ver. 2.5.1
Aanpassen Beez 5 template

2. Aanpassen Beez 5 template
Uitgangspunten
Gratis template
Makkelijk aanpasbaar
Aanpassen van
Header-image
Kleur
Lay-out

3. Aanpassen Beez 5 template
Is dit dan de ultieme template?

4. Aanpassen Beez 5 template
Tijdje aanmodderen, zoeken naar template
Weinig tot geen documentatie
Toch net niet de functionaliteit
Toch net niet de juiste moduleposities
Gratis templates zijn uithangbord voor betaalde versie
Beez 5
Gratis
Ondersteuning door de Joomla! Community
Geen problemen bij versie-veranderingen
Joomla! eigen, géén oem

5. Aanpassen Beez 5 template
Beez 5 Homepage

6. Aanpassen Beez 5 template
Wat moet anders?
Menu rechts en boven tegenaan de header afbeelding
De lettergrootte-keuze uitschakelen
Andere afbeelding in de header positie
Afbeelding in header positie wisselt met menu-item
Kleur en lay-out wisselen met menu-item

7. Aanpassen Beez 5 template
Hulpmiddelen en bronnen
Tweede monitor
Firebug
Notepad++
De JUG Bemmel template
plus de how-to van Eric Ribberink
HTML = indeling en structuur
CSS = feitelijke opmaak
JAVA = het gedrag
(Kassenaar, xHTML,CSS & JavaScript)

8. Aanpassen Beez 5 template
AAA de Lettergrootte
Firebug krachtige hulp bij het zoeken.

9. Aanpassen Beez 5 template
Aanpakken
bij de bron
De oplossing:
Niet allemaal regels wissen in CSS bestanden
Maar
De functionaliteit (Java) in de index.php uitzetten (c.q. wissen)

10. Aanpassen Beez 5 template
Het hoofdmenu naar de rechter kantlijn
Firebug
Heel veel
CSS
bestanden

11. Aanpassen Beez 5 template
Firebug doet de was.
Notebook++ is paraat op het tweede scherm om de wijziging direct
door te voeren.
left: 20;
(personal.cs
s)
en het
menu
staat rechts

12. Aanpassen Beez 5 template
De lettergrootte-keuze is uitgeschakeld.
Het hoofdmenu staat rechts.
Nu de wisselende afbeelding in de header positie
De Module Flexheader

13. Aanpassen Beez 5 template
Eenvoudige werking
Duidelijke handleiding
Weinig instelbaar

14. Aanpassen Beez 5 template
Itemid=15
7

15. Aanpassen Beez 5 template
Map met de gewenste header afbeeldingen
De afbeeldingen omgenoemd maar Itemid(nummer)

16. Aanpassen Beez 5 template
Nu nog de kleurkeuze.
Ook graag makkelijk.
Hier heb ik Eric Ribberink's werk toegepast.
Aanpassingen in templateDetails.xml
Aanpassingen in index.php
Aanpassingen in CSS.bestanden

17. Aanpassen Beez 5
TemplateDetails.xml
Aanmaken nieuwe fieldset t.b.v.
Keuzemenu in administrator
Knippen en plakken
Corrigeren voor correcte filename etc.
• < fie ld s n a m e = " p a ra m s " >
• < fie ld s e t n a m e = " a d v a n c e d " >
• < fie ld n a m e = " te m p la te C o lo r" ty p e = " lis t" d e fa u lt= " g ra y "
la b e l= " T P L _ S IM P L IC IT Y _ T E M P L A T E _ C O L O R " d e s c rip tio n = " "
filte r= " w o rd " >
• < o p tio n v a lu e = " g ra y " > T P L _ S IM P L IC IT Y _ T E M P L A T E _ C O L O R _ G R A Y
< /o p tio n >
• < o p tio n v a lu e = " re d " > T P L _ S IM P L IC IT Y _ T E M P L A T E _ C O L O R _ R E D < /o p tio n >
• < o p tio n v a lu e = " b lu e " > T P L _ S IM P L IC IT Y _ T E M P L A T E _ C O L O R _ B L U E
< /o p tio n >
• < o p tio n v a lu e = " lim e " > T P L _ S IM P L IC IT Y _ T E M P L A T E _ C O L O R _ L IM E
< /o p tio n >
• < o p tio n v a lu e = " p u rp le " > T P L _ S IM P L IC IT Y _ T E M P L A T E _ C O L O R _ P U R P L E
< /o p tio n >
• < /fie ld >

18. Aanpassen Beez 5 template
Index.php
I /* Template variables */
/ $interactText = $this->params->get('interactText');
$ $templateColor = $this->params->get('templateColor');

19. Aanpassen Beez 5 template
CSS
Vormgeving
Firebug
Localiseren van alle elementen die de
kleur bepalen
Alle elementen in nieuwe file:
“red.css”
Alle elementen rood maken
Zie ook: images

20. Aanpassen Beez 5 template
De aangemaakte
css bestanden

21. Aanpassen Beez 5 template
Templates/beez5/images
Kleur aangepast

22. Aanpassen Beez 5 template
Templatebeheer met standaard: “Geavanceerde opties”
Standaard
opties

23. Aanpassen Beez 5 template
Templatebeheer met standaard: “Basic opties”
De
nieuwe
fieldset

24. Aanpassen Beez 5 template
Werkwijze
Kies de gewenste basic optie, Bijv. “red”
Sla op als kopie

25. Aanpassen Beez 5 template

26. Aanpassen Beez 5 template

27. Aanpassen Beez 5 template

28. Aanpassen Beez 5 template
zeer bedankt voor uw aandacht
en
kom binnenkort eens kijken op:
www.hanenjozee.nl
Linden, 03-03-2012