Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bouw je eerste eigen Joomla! template

287 views

Published on

In deze presentatie (mei 2019) wordt uitgelegd hoe je je eigen template maakt voor Joomla 3. Op basis van het de Joomla Basistemplate (https://github.com/conconnl/joomla-basictemplate) leer je welke bestanden je aan moet passen en hoe.

Published in: Education
  • Be the first to comment

Bouw je eerste eigen Joomla! template

  1. 1. Bouw je eigen Joomla! template Zonder kennis van PHP of JavaScript 17 mei 2019 Bouw je eigen Joomla template
  2. 2. Voorstellen Rachel Walraven Eigen bedrijf sinds 2002 Zing in een popkoor Actief in de community Bouw eigen templates sinds altijd Start webdesign in 1998 17 mei 2019 Bouw je eigen Joomla template
  3. 3. 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? 17 mei 2019 Bouw je eigen Joomla template
  4. 4. 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 17 mei 2019 Bouw je eigen Joomla template
  5. 5. 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… 17 mei 2019 Bouw je eigen Joomla template
  6. 6. Stukje theorie • Basis is Bootstrap 3 (voor de structuur) • Opmaak in LESS (voor de opmaak) • Joomla codes (voor de posities van content) 17 mei 2019 Bouw je eigen Joomla template
  7. 7. 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) 17 mei 2019 Bouw je eigen Joomla template
  8. 8. Bootstrap syntax voorbeeld <div class=“container”> <div class=“row”> <div class=“col-sm-6 col-md-3”></div> <div class=“col-sm-6 col-md-3”></div> <div class=“col-sm-6 col-md-3”></div> <div class=“col-sm-6 col-md-3”></div> </div> </div> 17 mei 2019 Bouw je eigen Joomla template
  9. 9. 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) 17 mei 2019 Bouw je eigen Joomla template
  10. 10. Bootstrap voorbeeld 17 mei 2019 Bouw je eigen Joomla template <div class=“header”> <div class=“container”> <div class=“row”> <div class=“col-sm-5 col-sm-offset-2”> <p>Tekst in het blok</p> </div> </div> </div> </div>
  11. 11. Less • Less (Leaner Style Sheets) is een extensie op CSS. • Less maakt gebruik van • Variabelen • Mixins • Nesting • En meer 17 mei 2019 Bouw je eigen Joomla template
  12. 12. 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;} 17 mei 2019 Bouw je eigen Joomla template
  13. 13. 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;} 17 mei 2019 Bouw je eigen Joomla template
  14. 14. 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 17 mei 2019 Bouw je eigen Joomla template
  15. 15. 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; ?> 17 mei 2019 Bouw je eigen Joomla template
  16. 16. Tijd om wat te doen 17 mei 2019 Bouw je eigen Joomla template
  17. 17. 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 17 mei 2019 Bouw je eigen Joomla template
  18. 18. 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> 17 mei 2019 Bouw je eigen Joomla template
  19. 19. 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=“container”> <div class=“row”> <div class=“col-sm-6 col-sm-offset-1 col-md-5 col-md-offset-2”> </div> </div> </div> </div> 17 mei 2019 Bouw je eigen Joomla template
  20. 20. 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 17 mei 2019 Bouw je eigen Joomla template
  21. 21. 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 17 mei 2019 Bouw je eigen Joomla template
  22. 22. 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. 17 mei 2019 Bouw je eigen Joomla template
  23. 23. 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 17 mei 2019 Bouw je eigen Joomla template

×