Joomla!,Protostar,

1. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Han Maassen
"De Oude Pastorie Linden"
Joomla GebruikersGroep
Arnhem - Nijmegen
8 april 2013
Uitgebreide versie
12 mei 2014

2. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Grote veranderingen
– verbeterde installatie: soepel
– Taalpakketten direct tijdens installatie
toevoegen
– Updaten via de administrator (Components)
– Directe toegang tot extentions directory
(Extenties/Extentiebeheer/eventueel
aanzetten in opties)
– Bootstrap geintegreerd
– Index.php wordt belangrijker
• Notepad++ (Windows ->open source)
• Textwrangler (Mac OSX ->ook free)

3. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Een klein beetje historie

Vroeger: statische websites met HTML, eindeloos
gepruts

Nu: Soepel en smooth bouwen aan website met CSS:
scheiding van vorm(template) en inhoud(tekst etc.)

Leercurve!

Hartenkreet: “Hoe krijg ik toch een verschillende
header-image bij verschillende afdelingen van de site?”

En verschillende vormen of kleuren?

Zoeken, lezen, proberen

4. 
Grote veranderingen
– Klaar voor mobiel
– Responsief: niet meer 5 keer dezelfde site
bouwen in verschillend formaat: EEN ontwerp
volstaat
– Nieuwe bibliotheek: Bootstrap
– Minder CSS
– Meer overrides (onderwerp voor een andere
keer)
– Less: Systeem plugin die de css comprimeert
Gevolg: Snellere site
JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template

5. 
Ja, ja, op: GetBootstrap staat alle info

Wat is dat veel

De paniek slaat lichtelijk toe

Hoe moet ik dat alles inladen? En waar?

Daarvoor is de opdracht:
<jdoc:include type="head" />

En dat staat in de index.php
JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template

6. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Vóór alle werkzaamheden éérst nieuwe
template maken op basis van Protostar
Niet via
Extentiebeheer/Templates/Templatebeheer:
Stijlen/Stijl bewerken/Opslaan als kopie

7. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template

8. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
* Maak in bestandsbeheer een map aan met de naam van
je nieuw, gekloonde Kopie van Protostar. Bijv. Jugstar
* Kopieer álle bestanden uit Protostar naar deze (Jugstar)
map
* Vervang nu overal het woord Protostar door Jugstar. Let
op: hoofdlettergevoelig
* Zip de map Jugstar en zorg dat de zipfile ook Jugstar
heet
* Installeer nu op de normale weg deze Jugstar.zip. En zet
die op default

9. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Nu begint het echte werk
Ik wil drie moduleposities hebben onder aan de
pagina: positie 12, 13, 14
De index.php van “Jugstar”
en
De templateDetails.xml
Deze posities staan wel in de
templateDetails.xml
Deze posities zijn ongebruikt. Als ik er een
module in zet levert dat niks op

10. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
In de templateDetails.xml (let op de D!) zien we:
<positions>
<position>banner</position>
<position>debug</position>
<position>position-0</position>
<position>position-1</position>
<position>position-2</position>
<position>position-3</position>
<position>position-4</position>
<position>position-5</position>
<position>position-6</position>
<position>position-7</position>
<position>position-8</position>
<position>position-9</position>
<position>position-10</position>
<position>position-11</position>
<position>position-12</position>
<position>position-13</position>
<position>position-14</position>
<position>footer</position>
</positions>

11. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Oplossing
<!---------Drie nieuwe moduleposities---------->
<div class="container-fluid">
<div class="row-fluid">
<div id="content" class="<?php echo $span;?>">
<jdoc:include type="component" />
<jdoc:include type="message" />
<div class="span4"></div>
<jdoc:include type="modules" name="position-12" style="xhtml" />
<div class="span4"></div>
<jdoc:include type="modules" name="position-13" style="xhtml" />
<div class="span4"></div>
<jdoc:include type="modules" name="position-14" style="xhtml" />
</div>
</div>
</div>

12. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
De oplossing wordt geplaatst in index.php
Op regel voor: <!-- end content →
En dan:
Divje's tellen!
Zie voorbeelden

13. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Standaard aanwezig zijn slechts:
Hoe maken we meer gekleurde buttons?
– http://charliepark.org/bootstrap_buttons
/

14. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template

15. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Maar waar laat ik de gegenereerde code?
En wat doe ik er mee?
De template.css bevat de complete (?)
bootstrap
Invoegen

16. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Template.css

17. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Aangemaakt de kleuren:
– Bemmel
– Jug
– Custom

18. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Toepassen:
– Code genereren
– Code in template.css plaatsen
– .btn-bemmel
– Verwarring: ipv de”.” begin je met spatie

19. JOOMLA! Versie 3.x
De responsive Joomla!
En PROTOSTAR template
Extratje
– http://itouchmap.com/latlong.html
– Heel handig om snel kaart coördinaten te vinden
– Ontwikkel vooral in Firefox
– Gebruik Firebug en de werkbalk van Web
Developer
Veel plezier en succes!
Bedankt voor jullie aandacht
Han Maassen
De Oude Pastorie, Linden, 12 mei 2014
hanmaassen@gmail.com