Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Han MaassenDe Oude Pastorie – Linden      Joomla! Ver. 2.5.1  Aanpassen Beez 5 template
Aanpassen Beez 5 template     Uitgangspunten     Gratis template   Makkelijk aanpasbaar      Aanpassen van      Header-ima...
Aanpassen Beez 5 templateIs dit dan de ultieme template?
Aanpassen Beez 5 templateTijdje aanmodderen, zoeken naar templateWeinig tot geen documentatieToch net niet de functionalit...
Aanpassen Beez 5 templateBeez 5 Homepage
Aanpassen Beez 5 template                Wat moet anders?Menu rechts en boven tegenaan de header afbeelding        De lett...
Aanpassen Beez 5 templateHulpmiddelen en bronnenTweede monitorFirebugNotepad++De JUG Bemmel templateplus de how-to van Eri...
Aanpassen Beez 5 templateAAA de LettergrootteFirebug krachtige hulp bij het zoeken.
Aanpassen Beez 5 template                                                  Aanpakken                                      ...
Aanpassen Beez 5 templateHet hoofdmenu naar de rechter kantlijnFirebug                                         Heel veel  ...
Aanpassen Beez 5 templateFirebug doet de was.Notebook++ is paraat op het tweede scherm om de wijziging direct  door te voe...
Aanpassen Beez 5 templateDe lettergrootte-keuze is uitgeschakeld.Het hoofdmenu staat rechts.Nu de wisselende afbeelding in...
Aanpassen Beez 5 templateEenvoudige werkingDuidelijke handleidingWeinig instelbaar
Aanpassen Beez 5 template                        Itemid=15                            7
Aanpassen Beez 5 templateMap met de gewenste header afbeeldingenDe afbeeldingen omgenoemd maar Itemid(nummer)
Aanpassen Beez 5 templateNu nog de kleurkeuze.Ook graag makkelijk.Hier heb ik Eric Ribberinks werk toegepast.   Aanpassing...
Aanpassen Beez 5TemplateDetails.xmlAanmaken nieuwe fieldset t.b.v.Keuzemenu in administratorKnippen en plakkenCorrigeren v...
Aanpassen Beez 5 templateIndex.phpI    /* Template variables *//    $interactText = $this->params->get(interactText);$    ...
Aanpassen Beez 5 templateCSSVormgeving  Firebug  Localiseren van alle elementen die de   kleur bepalen  Alle elementen in ...
Aanpassen Beez 5 templateDe aangemaakte css bestanden
Aanpassen Beez 5 templateTemplates/beez5/images  Kleur aangepast
Aanpassen Beez 5 templateTemplatebeheer met standaard: “Geavanceerde opties”                             Standaard        ...
Aanpassen Beez 5 templateTemplatebeheer met standaard: “Basic opties”                                                  De ...
Aanpassen Beez 5 templateWerkwijzeKies de gewenste basic optie, Bijv. “red”Sla op als kopie
Aanpassen Beez 5 template
Aanpassen Beez 5 template
Aanpassen Beez 5 template
Aanpassen Beez 5 templatezeer bedankt voor uw aandachtenkom binnenkort eens kijken op:www.hanenjozee.nlLinden, 03-03-2012
Upcoming SlideShare
Loading in …5
×

Beez5 presentatie definitief2

2,458 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

×