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