Post on 06-Jul-2015
Han MaassenDe Oude Pastorie – Linden
Joomla! Ver. 2.5.1Aanpassen Beez 5 template
Aanpassen Beez 5 template
Uitgangspunten
Gratis templateMakkelijk aanpasbaar
Aanpassen van
Header-imageKleur
Lay-out
Aanpassen Beez 5 template
Is dit dan de ultieme template?
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
Aanpassen Beez 5 template
Beez 5 Homepage
Aanpassen Beez 5 template
Wat moet anders?
Menu rechts en boven tegenaan de header afbeeldingDe lettergrootte-keuze uitschakelen
Andere afbeelding in de header positieAfbeelding in header positie wisselt met menu-item
Kleur en lay-out wisselen met menu-item
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)
Aanpassen Beez 5 template
AAA de Lettergrootte
Firebug krachtige hulp bij het zoeken.
Aanpassen Beez 5 template
De oplossing:Niet allemaal regels wissen in CSS bestanden
MaarDe functionaliteit (Java) in de index.php uitzetten (c.q. wissen)
Aanpakken bij de bron
Aanpassen Beez 5 template
Het hoofdmenu naar de rechter kantlijn
Firebug
Heel veel CSS
bestanden
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
Aanpassen Beez 5 template
De lettergrootte-keuze is uitgeschakeld.
Het hoofdmenu staat rechts.
Nu de wisselende afbeelding in de header positie
De Module Flexheader
Aanpassen Beez 5 template
Eenvoudige werkingDuidelijke handleidingWeinig instelbaar
Aanpassen Beez 5 template
Itemid=157
Aanpassen Beez 5 template
Map met de gewenste header afbeeldingenDe afbeeldingen omgenoemd maar Itemid(nummer)
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
Aanpassen Beez 5
TemplateDetails.xml
Aanmaken nieuwe fieldset t.b.v.
Keuzemenu in administrator
Knippen en plakken
Corrigeren voor correcte filename etc.
• < f i e l d s n a m e = " p a r a m s " >
• < f i e l d s e t n a m e = " a d v a n c e d " >
• < f i e l d n a m e = " t e m p l a t e C o l o r " t y p e = " l i s t " d e f a u l t = " g r a y " l a b e l = " T P L _ S I M P L I C I T Y _ T E M P L A T E _ C O L O R " d e s c r i p t i o n = " " f i l t e r = " w o r d " >
• < o p t i o n v a l u e = " g r a y " > T P L _ S I M P L I C I T Y _ T E M P L A T E _ C O L O R _ G R A Y< / o p t i o n >
• < o p t i o n v a l u e = " r e d " > T P L _ S I M P L I C I T Y _ T E M P L A T E _ C O L O R _ R E D < / o p t i o n >
• < o p t i o n v a l u e = " b l u e " > T P L _ S I M P L I C I T Y _ T E M P L A T E _ C O L O R _ B L U E< / o p t i o n >
• < o p t i o n v a l u e = " l i m e " > T P L _ S I M P L I C I T Y _ T E M P L A T E _ C O L O R _ L I M E< / o p t i o n >
• < o p t i o n v a l u e = " p u r p l e " > T P L _ S I M P L I C I T Y _ T E M P L A T E _ C O L O R _ P U R P L E< / o p t i o n >
• < / f i e l d >
Aanpassen Beez 5 template
Index.php
I /* Template variables */
/ $interactText = $this->params->get('interactText');
$ $templateColor = $this->params->get('templateColor');
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
Aanpassen Beez 5 template
De aangemaakte css bestanden
Aanpassen Beez 5 template
Templates/beez5/images
Kleur aangepast
Aanpassen Beez 5 template
Templatebeheer met standaard: “Geavanceerde opties”
Standaard opties
Aanpassen Beez 5 template
Templatebeheer met standaard: “Basic opties”
De nieuwe fieldset
Aanpassen Beez 5 template
Werkwijze
Kies 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 template
zeer bedankt voor uw aandacht
en
kom binnenkort eens kijken op:
www.hanenjozee.nl
Linden, 03-03-2012