Bouw je eerste eigen Joomla! template

Bouw je eigen Joomla! template
Zonder kennis van PHP of JavaScript
17 mei 2019 Bouw je eigen Joomla template

Voorstellen
Rachel Walraven
Eigen bedrijf sinds 2002
Zing in een popkoor
Actief in de community
Bouw eigen templates sinds altijd
Start webdesign in 1998

En jullie…?
• Wie werk professioneel met Joomla?
• Wie heeft er basis ervaring met HTML en CSS?
• Wie is heel goed in HTML en CSS?
• Wie past er wel eens templates aan?
• Wie heeft wel eens een eigen template gemaakt?

Opbouw workshop
• De template bestanden
wat heb je nodig en wat zit in de basis template
• Stukje theorie
bootstrap, less en joomla code
• Aan de slag
samen een template maken

De bestanden
• Download de basistemplate via Github https://github.com/conconnl/joomla-
basictemplate
• Pak het zipbestand uit op je computer
• Let’s take a look…

Stukje theorie
• Basis is Bootstrap 3 (voor de structuur)
• Opmaak in LESS (voor de opmaak)
• Joomla codes (voor de posities van content)

Bootstrap
• Basis bestaat uit 12 kolommen, die individueel of samen gebruikt kunnen
worden.
• 4 scherm groottes
• xs – tot 768 pixels breed (mobiel)
• sm – tot 992 pixels breed (staande ipad)
• md – tot 1200 pixels breed (liggende ipad)
• lg – 1200 en groter (laptop/desktop)

Bootstrap syntax voorbeeld
<div class=“container”>
<div class=“row”>
<div class=“col-sm-6 col-md-3”></div>
</div>
</div>

Bootstrap extra’s
• Een kolom opschuiven :
col-sm-offset-2
• Een kolom van volgorde veranderen:
col-sm-push-8 (duwt naar rechts)of col-sm-pull-
4 (trekt naar links)

Bootstrap voorbeeld
<div class=“header”>
<div class=“col-sm-5 col-sm-offset-2”>
<p>Tekst in het blok</p>
</div>
</div>
</div>
</div>

Less
• Less (Leaner Style Sheets) is een extensie op CSS.
• Less maakt gebruik van
• Variabelen
• Mixins
• Nesting
• En meer

Less - variabelen
• Geef kleuren een naam en gebruik die
• @groen: #7ac143;
• p.groen{
color: @groen;}
• Bepaal standaard formaten
• @afmeting: 10px;
• div.blokje {
width: @afmeting*10;
height: @afmeting*5; }
p.groen{
color: #7ac143;}
div.blokje {
width: 100px;
height: 50px;}

Less - mixins
Met mixins kan je een aantal eigenschappen hergebruiken
Mixin:
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;}
Hergebruik:
div.metrondehoeken{
.border-radius();}
div.metrondehoeken{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

Less - nesting
In CSS
#header {
background: black;
}
#header .navigatie {
font-size: 18px;
}
#header .logo {
width: 300px;
}
In less
#header{
background: black;
.navigatie{
font-size: 18px;}
.logo {
width: 300px;}
}
Je kan eigenschappen nesten wat veel typen scheelt

En dan nu de Joomla codes
Component positie bepalen
<jdoc:include type="component" />
Module positie bepalen
<jdoc:include type="modules" name="NAAM" style="xhtml"/>
Conditional stuff
<?php if ($this->countModules('NAAM')) : ?>
Hier de condintionele code
<?php endif; ?>

Tijd om wat te doen

Stappenplan
1. Wijzig de naam van jouw template map (tip: hou het kort)
2. Plaats deze in de ‘templates’ map van jouw Joomla installatie
3. Pas de templateDetails.xml aan
4. Bouw je structuur in index.php
5. Voeg de moduleposities toe in templateDetails.xml
6. Maak de site op in template.less
7. Test tussendoor
8. Voeg content, modules en extensies toe indien nodig

2. Pas de templateDetails.xml aan
a. Wijzig de infoarmtie bovenaan het document
b. Wijzig (als je wil) de naam van je template
<name>frontend</name>
a. Wijzig ‘frontend’ in de naam van de taalbestanden (ook die van de bestanden zelf in
de mappen language/en-GB en languages/nl-NL)
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_frontend.ini</language>
<language tag="en-GB">en-GB/en-GB.tpl_frontend.sys.ini</language>
<language tag="nl-NL">nl-NL/nl-NL.tpl_frontend.ini</language>
<language tag="nl-NL">nl-NL/nl-NL.tpl_frontend.sys.ini</language>
</languages>

3. Bouw je structuur op in index.php
• Bouw deze structuur op in je index.php bestand via het Bootstrap grid
• Voorbeeld
<div class=“header”>
<div class=“col-sm-6 col-sm-offset-1 col-md-5 col-md-offset-2”>
</div>
</div>
</div>
</div>

4. Voeg moduleposities toe
a. Voeg de module posities toe in je index.php
b. Voeg ze daarna ook toe aan je templateDetails.xml
<positions>
<position>navbar</position>
<position>leftsidebar</position>
<position>jouwpositie</position>
</positions>
c. Verwijder positions die je niet gebruikt

5. Maak de site op in template.less
• Plaats de opmaak code in het template.less bestand.
• Tip: Begin met vastleggen variabelen als kleuren & breakpoints.
//Breackpoints
@xs: ~"only screen and (min-wdith: 500px)";
@sm: ~"only screen and (min-width: 768px)";
@md: ~"only screen and (min-width: 992px)";
@lg: ~"only screen and (min-width: 1200px)";
• Tip: Werk van algemeen naar details

6. Test tussendoor
• Plaats (Upload) jouw templatemap naar de map templates in je Joomla site
• Ga in Joomla naar Extensies > Beheren > Ontdekken en installeer jouw
template
• Ga naar Extensies > Templates en stel jouw template in als standaard.
• Bekijk je wijzigingen in de frontend.

Tips
Gebruik Regular Labs ReReplacer om de voorkant van Joomla ook in bootstrap 3 te
krijgen
• Meer over bootstrap 3: https://getbootstrap.com/docs/3.3/
• Meer over less: http://lesscss.org/
• Meer over flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Template: https://github.com/conconnl/joomla-basictemplate

Bouw je eerste eigen Joomla! template

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Bouw je eerste eigen Joomla! template

Ähnlich wie Bouw je eerste eigen Joomla! template (20)

Bouw je eerste eigen Joomla! template

Hinweis der Redaktion