Beez5 presentatie definitief2

2,326 views
2,270 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,326
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beez5 presentatie definitief2

  1. 1. Han MaassenDe Oude Pastorie – Linden Joomla! Ver. 2.5.1 Aanpassen Beez 5 template
  2. 2. Aanpassen Beez 5 template Uitgangspunten Gratis template Makkelijk aanpasbaar Aanpassen van Header-image Kleur Lay-out
  3. 3. Aanpassen Beez 5 templateIs dit dan de ultieme template?
  4. 4. Aanpassen Beez 5 templateTijdje aanmodderen, zoeken naar templateWeinig tot geen documentatieToch net niet de functionaliteitToch net niet de juiste modulepositiesGratis templates zijn uithangbord voor betaalde versieBeez 5GratisOndersteuning door de Joomla! CommunityGeen problemen bij versie-veranderingenJoomla! eigen, géén oem
  5. 5. Aanpassen Beez 5 templateBeez 5 Homepage
  6. 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. 7. Aanpassen Beez 5 templateHulpmiddelen en bronnenTweede monitorFirebugNotepad++De JUG Bemmel templateplus de how-to van Eric Ribberink HTML = indeling en structuur CSS = feitelijke opmaak JAVA = het gedrag (Kassenaar, xHTML,CSS & JavaScript)
  8. 8. Aanpassen Beez 5 templateAAA de LettergrootteFirebug krachtige hulp bij het zoeken.
  9. 9. Aanpassen Beez 5 template Aanpakken bij de bron De oplossing: Niet allemaal regels wissen in CSS bestanden MaarDe functionaliteit (Java) in de index.php uitzetten (c.q. wissen)
  10. 10. Aanpassen Beez 5 templateHet hoofdmenu naar de rechter kantlijnFirebug Heel veel CSS bestanden
  11. 11. Aanpassen Beez 5 templateFirebug 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. 12. Aanpassen Beez 5 templateDe lettergrootte-keuze is uitgeschakeld.Het hoofdmenu staat rechts.Nu de wisselende afbeelding in de header positie De Module Flexheader
  13. 13. Aanpassen Beez 5 templateEenvoudige werkingDuidelijke handleidingWeinig instelbaar
  14. 14. Aanpassen Beez 5 template Itemid=15 7
  15. 15. Aanpassen Beez 5 templateMap met de gewenste header afbeeldingenDe afbeeldingen omgenoemd maar Itemid(nummer)
  16. 16. Aanpassen Beez 5 templateNu nog de kleurkeuze.Ook graag makkelijk.Hier heb ik Eric Ribberinks werk toegepast. Aanpassingen in templateDetails.xml Aanpassingen in index.php Aanpassingen in CSS.bestanden
  17. 17. Aanpassen Beez 5TemplateDetails.xmlAanmaken nieuwe fieldset t.b.v.Keuzemenu in administratorKnippen en plakkenCorrigeren 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. 18. Aanpassen Beez 5 templateIndex.phpI /* Template variables *// $interactText = $this->params->get(interactText);$ $templateColor = $this->params->get(templateColor);
  19. 19. Aanpassen Beez 5 templateCSSVormgeving Firebug Localiseren van alle elementen die de kleur bepalen Alle elementen in nieuwe file: “red.css” Alle elementen rood maken Zie ook: images
  20. 20. Aanpassen Beez 5 templateDe aangemaakte css bestanden
  21. 21. Aanpassen Beez 5 templateTemplates/beez5/images Kleur aangepast
  22. 22. Aanpassen Beez 5 templateTemplatebeheer met standaard: “Geavanceerde opties” Standaard opties
  23. 23. Aanpassen Beez 5 templateTemplatebeheer met standaard: “Basic opties” De nieuwe fieldset
  24. 24. Aanpassen Beez 5 templateWerkwijzeKies de gewenste basic optie, Bijv. “red”Sla op als kopie
  25. 25. Aanpassen Beez 5 template
  26. 26. Aanpassen Beez 5 template
  27. 27. Aanpassen Beez 5 template
  28. 28. Aanpassen Beez 5 templatezeer bedankt voor uw aandachtenkom binnenkort eens kijken op:www.hanenjozee.nlLinden, 03-03-2012

×