Beez5 presentatie definitief2

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


Is dit dan de ultieme 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


Beez 5 Homepage


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


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)


AAA de Lettergrootte

Firebug krachtige hulp bij het zoeken.


De oplossing:Niet allemaal regels wissen in CSS bestanden

MaarDe functionaliteit (Java) in de index.php uitzetten (c.q. wissen)

Aanpakken bij de bron


Het hoofdmenu naar de rechter kantlijn

Firebug

Heel veel CSS

bestanden


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


De lettergrootte-keuze is uitgeschakeld.

Het hoofdmenu staat rechts.

Nu de wisselende afbeelding in de header positie

De Module Flexheader


Eenvoudige werkingDuidelijke handleidingWeinig instelbaar


Itemid=157


Map met de gewenste header afbeeldingenDe afbeeldingen omgenoemd maar Itemid(nummer)


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 >


Index.php

I /* Template variables */

/ $interactText = $this->params->get('interactText');

$ $templateColor = $this->params->get('templateColor');


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


De aangemaakte css bestanden


Templates/beez5/images

Kleur aangepast


Templatebeheer met standaard: “Geavanceerde opties”

Standaard opties


Templatebeheer met standaard: “Basic opties”

De nieuwe fieldset


Werkwijze

Kies de gewenste basic optie, Bijv. “red”

Sla op als kopie


zeer bedankt voor uw aandacht

en

kom binnenkort eens kijken op:

www.hanenjozee.nl

Linden, 03-03-2012

http://www.hanenjozee.nl/

Beez5 presentatie definitief2

Education

Transcript of Beez5 presentatie definitief2