Contactformulier...74 Gebruikers...77 Login...78 Registratie...79 Gebruikersnaam vergeten en wachtwoord vergeten...81 Module stijlen bepalen en

Transcriptie

1 Inhoud Inhoud...1 De Basis Template bestanden...3 Basis Template Joomla 3 bestanden...4 templatedetails.xml...6 index.php...8 <body>...11 Wat te wijzigen?...14 Melding maken voor IE6 en IE Lettertype, stijl en -grootte...16 Lettertype (font-family)...16 Lettergrootte mobiele telefoons en tablets...19 Navigatie menu maken...21 Een grote header afbeelding of diashow maken...23 Een Bootstrap Navbar maken...29 Responsive Navbar...31 Een dropdown menu maken...34 Belangrijk! Bij het maken van de Joomla hoofd menu items met submenu-items moet het menu item een externe link zijn...35 Belangrijk! De instelling van de menu module moet zijn ingesteld op "Alle submenu items tonen"...35 Aanpassen sidebar breedte...36 Een border en boxshadow plaatsen om de pagina...39 CSS3 toepassen voor IE Stap 4: Installeer de aangepaste template...46 Stap 5: Uw template beheren...46 Template afbeeldingen maken...47 Uw Joomla 3 template testen...47 Technisch correcte website...47 Browser controle...47 Testen mobiele toestellen...48 CSS overschrijven van Bootstrap classes...48 Button voor print, en editor iconen...48 Print en popup venster...49 Tooltip...52 Gebruikersbeoordeling...54 Artikel details...55 Lees meer button...56 Ruimte tussen artikelen / rijen...58 Meer artikelen...58 Paginatie Algemeen...60 Paginatie artikelen...63 Enkele pagina en pagina opsplitsing...64 Enkele pagina...64 Pagina opsplitsing...65 Voorpagina / categorie blog...67 Gearchiveerde artikelen...70 Contact en contactformulier

2 Contactformulier...74 Gebruikers...77 Login...78 Registratie...79 Gebruikersnaam vergeten en wachtwoord vergeten...81 Module stijlen bepalen en wijzigen...86 Kruimelpad...88 Taalkeuze meertalige website...90 Zoek Module...92 Sidebar menu...96 Andere stijl opties...97 Tab menu voor de rechter of linker sidebar...97 Nav-list Nav-stacked nav-pills Speciale stijlen van de Basis Template Joomla Introductie CSS Border radius Box shadow Opacity Gradient / kleurverloop Responsive achtergrond afbeelding CSS3 PIE voor IE8 en IE CSS3 PIE (Progressive Internet Explorer) Belangrijk! PIE issues Firefox - Webdeveloper, Firebug and Color Zilla Notepad Xampp installatie en configuratie Voordat u begint Instructies uitschakelen Gebruikersaccountbeheer (UAC) Skype poorten configureren Xampp Vlideo tutorials (versie 1.8.1) Google webfonts Meertalige website Publiceer uw video op uw website Downloads Joomla Website html model voor Joomla Base template Joomla Video Tutorials

3 De Basis Template bestanden Op deze pagina bespreken we de inhoud van de Basis Template Joomla 3 bestanden. In de tutorials hierna zullen we een aantal van deze bestanden gaan aanpassen. Als voorbeeld hebben we Joomla 3 geïnstalleerd met de Nederlandse voorbeeld data, maar u kunt ook andere content hebben geïnstalleerd of ingevoerd. Standaard zal Joomla 3 de Protostar template instellen. De website naam hebben we "Base template Joomla 3" genoemd, maar u heeft uw website zeker een andere naam gegeven. Wanneer u de template wilt personaliseren installeer de basetemplate-joomla3.zip nu nog niet, maar neem eerst de informatie op deze pagina door. Pas zo nodig het templatedetails.xml 3

4 bestand aan aan uw gegevens, voordat u gaat installeren. Onder aan deze pagina staat een instructie. Wanneer u de Basis Template Joomla 3 heeft geïnstalleerd en als standaard template heeft geactiveerd ziet u de volgende pagina. Basis Template Joomla 3 bestanden 4

5 Hier boven ziet een screen print van de template mappen en bestanden. In de tabel hieronder ziet u de omschrijving van de bestanden. Daarna zullen we een aantal bestanden nader uitleggen en/of aanpassen. Bestand css/template.css css/template_ieold.css css/template_ie8 html/modules.php images/system/ Beschrijving Dit is het CSS bestand dat u kunt gebruiken voor de stijlen van uw template en eventueel de CSS Bootstrap bestanden kunt overschrijven. Dit css bestand wordt gebruikt om de website voor de oude Internet Explorer 6 en 7 niet weer te geven en in plaats daarvan een bericht te tonen. Dit css bestand is bedoeld voor specifieke Internet Explorer 8 stijlen. Dit is een script als aanvulling op de standaard Joomla module template in de templates/system/html/modules.php. De afbeeldingen in deze map overschrijven enkele standaard 5

6 Bestand Beschrijving afbeeldingen van Joomla uit de media/system/images. images/header.jpg Dit is de grote afbeelding uit deze template tutorial "Een grote afbeelding of diashow maken". images/logo.png Joomla logo In deze map zijn de PIE script bestanden geplaatst. PIE zorgt voor de js/pie... uitvoering van CSS3 declaraties in Internet Explorer 8, die standaard geen CSS3 ondersteunt. component.php Dit bestand overschrijft de component.php uit templates/system. index.php Basis template php bestand. template_preview.png Grote afbeelding van de template. template_thumbnail.png Kleine afbeelding van de template. templatedetails.xml Installatie en configuratie bestand van de template. templatedetails.xml Dit is het installatie en configuratiebestand van de template (doctype niet getoont). Het bevat informatie over de identiteit van de template, posities die worden gebruikt en parameters. De code ziet er als volgt uit. 1. <extension version="3" type="template" client="site"> 2. <name>basetemplate-joomla3</name> 3. <version>1.0</version> 4. <creationdate>2-2013</creationdate> 5. <author>joomla-css</author> <copyright>joomla CSS</copyright> 8. <description>base Template Joomla 3</description> 9. <files> 10. <filename>component.php</filename> 11. <filename>index.php</filename> 12. <filename>templatedetails.xml</filename> 13. <filename>template_preview.png</filename> 14. <filename>template_thumbnail.png</filename> 15. <folder>css</folder> 16. <folder>html</folder> 17. <folder>images</folder> 18. <folder>js</folder> 19. </files> 20. <positions> 21. <position>position-0</position> 22. <position>position-1</position> 23. <position>position-2</position> 24. <position>position-3</position> 25. <position>position-4</position> 26. <position>position-5</position> 27. <position>position-7</position> 6

7 28. <position>position-8</position> 29. <position>messageie</position> 30. <position>debug</position> 31. </positions> 32. </extension> U bent vrij om dit bestand aan te passen naar uw eigen wensen. Het beste kunt u dit doen voordat u de template installeert. <name> Wanneer u de naam van de template "basetemplate-joomla3" wilt wijzigen in een eigen naam kunt u dit op deze regel doen. Zorg er wel voor dat de zip bestandsnaam exact dezelfde naam moet hebben. Maak een nieuwe map aan met de naam die u uw template wilt geven. Gebruik exact deze naam voor deze regel. Zip de bestanden en het zip bestand neemt de haam aan van de map waarin u het zip bestand hebt gemaakt. In de naam mogen geen spaties worden opgenomen. <version> Het versienummer van de template. <creationdate> Datum waarop de template is gemaakt of aangepast. <author> Vul hier uw naam of bedrijfsnaam in. <author > Uw adres. <copyright> Wie het copyright heeft. <description> De omschrijving van de template. <files> <filename> Dit is een overzicht van de bestanden in de hoofdmap die zullen worden geïnstalleerd. Wanneer u bestanden toevoegt, moet u de bestandsnaam ook in het xml bestand toevoegen. <files> <folder> 7

8 Dit is een overzicht van de mappen in de hoofd map die zullen worden geïnstalleerd. Alle bestanden en sub mappen, die in de vermelde mappen aanwezig zijn, zullen worden geïnstalleerd. Wanneer u hoofd mappen toevoegt moet u de map namen ook in het xml bestand toevoegen. <positions> Hier staan de namen van de posities van de modules. Dit zegt niets over de locatie van de posities. De locatie wordt bepaald door het index.php bestand van de template. Zorg ervoor wanneer u posities in het index.php bestand toevoegt, dat u de namen van de posities ook in dit bestand toevoegt. index.php In het index.php bestand wordt de html structuur bepaald van uw template. Start php code Het startpunt van de template bevat enige php code. Deze code zorgt ervoor dat Joomla 3 de juiste functies uitvoert om de template te laten werken binnen Joomla 3. Dit moet u ongewijzigd laten, tenzij u precies weet wat u doet. 1. <?php defined('_jexec') or die; 2. $app = JFactory::getApplication(); 3. $doc = JFactory::getDocument(); 4. $sitename = $app->getcfg('sitename'); 5. $itemid = $app->input->getcmd('itemid', ''); 6.?> De php instructie van de laatste regel "$itemid" vraagt het itemid op van het actieve menu item. Deze id van het menu item wordt standaard toegevoegd aan het menu list item bijvoorbeeld <li class="item-101"... In de Basis Template Joomla 3 wordt "item-101" ook toegevoegd als een ID op detag. In dit voorbeeld:. Door deze toevoeging kunt u iedere pagina of elementen van de pagina in Joomla afzonderlijk stijlen als u dat zou willen. <doctype> html5 In het index.php bestand hoeft u de doctype code niet aan te passen. De standaard html5 doctype is vereist voor een Joomla 3 template. <head> In de head sectie komen verschillende onderdelen voor. <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Deze code zorgt ervoor dat de verschillende toestellen, zoals mobiele telefoons of desktop PC's, de pagina's op de juiste wijze weergeeft. Een mobiele telefoon heeft een veel kleinere viewport (bijvoorbeeld 360px) dan een desktop PC (bijvoorbeeld 1600px). Met deze meta 8

9 code zal de template op de breedte van de viewport van de gebruiker op dezelfde schaal wordt weergegeven als op andere toestellen. <jdoc:include type="head" /> Deze code zorgt ervoor dat alle meta gegevens door de template worden ingelezen, zoals de "meta content" en de "title" van de webpagina. Javascripts en CSS bestanden Deze coderegels zorgen ervoor dat de javascripts en css Bootstrap bestanden in de head sectie worden opgenomen. Andere css bestanden, zoals het template.css bestand en de css betanden, die onder condities worden ingeladen, zoals voor Internet Explorer 8 en 9, vallen hier niet onder. 1. // Add JavaScript Frameworks 2. JHtml::_('bootstrap.framework'); // Add Stylesheets 5. JHtmlBootstrap::loadCss(); // Load optional rtl Bootstrap css and Bootstrap bugfixes 8. JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction); De span class van het content gedeelte In het onderstaande php script wordt rekening gehouden met het wel of niet gebruiken van modules in de sidebars. Zo kunt u een pagina hebben zonder modules in de sidebars, of dat slechts 1 sidebar actief is met modules of beide sidebars in gebruik zijn. Wanneer er geen sidebars actief zijn, omdat op die pagna geen modules in de sidebar zijn toegewezen, heeft het content gedeelte de maximale breedte. U heeft in de vorige tutorial gelezen dat de som van de span nummers altijd 12 moet zijn. Als er geen sidebars actief zijn heeft de content div een class van span12. Wanneer er 1 sidebar actief is heeft die sidebar een class van span3 en dus heeft het content gedeelte dan een class van span9. Wanneer beide sidebars actief zijn met een class van span3 dan heeft het content gedeelte een class van span6 (span3, span6, span3). Om dit in de template te bereiken is de volgende php code opgesteld. 1. // Adjusting content width 2. if ($this->countmodules('position-7') && $this- >countmodules('position-8')) 3. { 4. $span = "span6"; 5. } 6. elseif ($this->countmodules('position-7') &&!$this- >countmodules('position-8')) 7. { 8. $span = "span9"; 9

10 9. } 10. elseif (!$this->countmodules('position-7') && $this- >countmodules('position-8')) 11. { 12. $span = "span9"; 13. } 14. else 15. { 16. $span = "span12"; 17. } In het php script hierboven staat: Wanneer er op position-7 (sidebar right) en position-8 (sidebar left) één of meer modules actief zijn, dan is de variabele $span gelijk aan span6. Wanneer dit niet zo is geldt: Wanneer er op position-7 één of meerdere modules actief zijn en op position-8 niet, dan is de variabele $span gelijk aan span9. wanneer dit niet zo is geldt: Wanneer er op position 7 geen modules actief zijn maar op positon-8 wel, dan is de variabele $span ook gelijk aan span9. In alle andere gevallen geldt voor de variabele $span = span12. De variabele $span staat in de template op regel 112 waar de content begint. Deze variabele is dus een class die wordt toegevoegd aan de div id content en is afhankelijk of er sidebars actief zijn op de pagina. 1. <div id="content" class="<?php echo $span;?>"> Google Webfonts De volgende coderegel maakt het mogeljk om Googe Webfonts te gebruiken. Een Google account is niet nodig. De Google Webfonts zijn te vinden op Er is een video tutorial beschikbaar op onze site over het gebruik van Google Webfonts (zie Videotutorials -> Google Webfonts). In deze template is voor alle heading elementen (h1 t/m h6) het Google Webfont Open Sans Condensed:700 actief (zie ook in het template.css bestand). 1. <link href=' rel='stylesheet' type='text/css' /> template.css en de conditionele scripts voor Internet Explorer Het template.css bestand wordt opzettelijk op een latere positie in de index.php geplaatst, om er zeker van te zijn, dat deze als laatste van alle css bestanden wordt ingelezen. Op deze wijze kunnen CSS declaraties van andere CSS bestanden worden overschreven. Alleen de conditionele IE bestanden volgen nog hierna. 10

11 Zoals we gewend zijn wijkt Internet Explorer af van veel andere browsers. Om deze reden is er voor alle versies eerder dan IE9 een javascript html5 actief. Verder is er een css bestand opgenomen speciaal voor IE8 en de oudere browsers IE6 en IE7. Wij vinden dat de oude browsers IE6 en IE7 niet meer ondersteund moeten worden. Nog geen 1% van alle gebruikers bezit nog één van deze oude browsers, terwijl u er veel energie in moet stoppen om voor deze browsers nog een acceptabele weergave te produceren. In de volgende tutorial kunt u met behulp van CSS de oude browsers voorzien van een melding, dat deze niet meer ondersteund worden. 1. <link href="/<?php echo $this->baseurl?>/templates/<?php echo $this->template;?>/css/template.css" rel="stylesheet" type="text/css" /> 2.  6.  11.  16.  <body> De body bestaat globaal uit de volgende hoofd elementen. 1. <div class="container"> <div class="header"> 4. <div class="header-inner"></div> 5. </div> <div class="container-content"> 8. <div class="navigation"></div> 9. <div class="row"> 10. <div id="sidebarleft" class="span3"></div> 11. <div id="content" class="<?php echo $span;?>"></div> 12. <div id="sidebarright" class="span3"></div> 13. </div> 11

12 14. </div> </div> <div class="footer"></div> 19. <div class="container"></div> <div class="message-ie"></div> De classes container, navigation, row en span[n] zijn Bootstrap classes. De css van deze classes is opgenomen in de Bootstrap css bestanden. De css declaraties voor deze structuur hoeft u dus niet op te stellen. Eigenlijk is uw template nu al goed ingedeeld en kunt u menu's, content en modules gaan maken. Deze structuur biedt u alle mogelijkheden om het html model te bouwen uit de vorige tutorial. PHP script voor de module posities De moduleposities zijn allen geplaatst in een php script. Dit script controleert of er modules zijn opgenomen op deze positie. Indien er geen modules in een bepaalde positie op een bepaalde pagina zijn geplaatst, komt deze ook niet terug in de html structuur. In onderstaand voorbeeld nemen we het script van position-0. De div met class clearfix zorgt ervoor dat de module die na deze module begint op een vrije "nieuwe regel" begint. 1. <?php if ($this->countmodules('position-0')):?> 2. <jdoc:include type="modules" name="position-0" style="none" 3. <div class="clearfix"></div> 4. <?php endif;?> Wat is de Joomla code voor een positie? De algemene code voor het plaatsen van een positie is gelijk aan die van Joomla 2.5: 1. <jdoc:include type="type-parameter" name="name-parameter" style="style-parameter" /> Type parameters Alle deze type parameters zijn al in de Basis Template Joomla 3 opgenomen. type="head", "component", "modules" of "message". De <jdoc:include type="head" /> laadt gegevens die in de <head> sectie terecht komen, zoals de meta content gegevens en titel. De "component" parameter wordt gebruikt voor het tonen van de artikelen / content. Deze code heeft geen andere parameters: <jdoc:include type="component" />. De "modules" parameter wordt gebruikt voor het tonen van de modules. 12

13 De "message" parameter is belangrijk om in uw template op te nemen. In de basetemplate is deze ook opgenomen. Deze parameter zorgt ervoor dat gebruikers systeem berichten kunnen zien, bijvoorbeeld als gebruikers zich op uw website registreren. Na het registratieproces wordt dan gemeld dat er een is toegezonden met een link om het registratieproces te voltooien. Dergelijke berichten ziet de gebruiker niet, als deze code niet in uw template is opgenomen. <jdoc:include type="message" /> Name parameter "name=". De namen van de posities dienen exact hetzelfde te zijn als die uit het templatedetails.xlm bestand". Deze parameter wordt alleen gebruikt bij modules. Style parameters Style parameters staan in de template, echter deze kunnen in Joomla 3 ook worden gekozen bij de module opties in de administrator. Bij het bespreken van de modules onder het menuitem Joomla 3 wordt hier nader op ingegaan. De volgende style elementen zijn standaard in Joomla 3 aanwezig: style="none", "html5", "table", "horz", "xhtml", "rounded" of "outline". none Bij deze stijl wordt er geen HTML code om de module geplaatst. In de basis template hebben de meeste posities style="none". html5 Deze stjil voegt de Bootstrap class span[n] toe aan de html structuur, waardoor u voor een individuele module de "width" kunt bepalen. Dit wordt ingesteld bij de module opties. table Deze stijl plaatst de module in een table. horz Deze stijl plaatst de module in een table, die weer in een table is geplaatst. xhtml Bij deze stijl wordt er om de module een <div> geplaatst (div.moduletable_suffix). rounded Bij deze stijl wordt er een structuur van 5 divs geplaatst om de module. Deze stijl is verouderd sinds CSS3 gangbaar is geworden met border-radius. outline Deze stijl laat de module positie zien op het frontend. Style parameters (van module.php uit de Basis Template Joomla 3) style="well", "specialgrey", "specialblue", "specialred" en "specialgold" 13

14 well Dit is een Bootstrap class, waarin de module is geplaatst in een lichtgrijze achtergrond. specialgrey, specialblue, specialred en specialgold Dit zijn custom modulestijlen van de template (alleen in de Basis Template Joomla 3) in diverse kleuren. Deze stijl wordt behandeld bij de Joomla 3 Module stijlen. Wat te wijzigen? U heeft veel informatie gekregen over de inhoud van de bestanden van de Basis Template Joomla 3. Voor deze fase van de tutorial wordt u geadviseert om alleen de gegevens van de template te personaliseren in templatedetails.xml. Dus name, version, creationdate, author, author , copyright en description. Wanneer u daarna de bestanden weer gaat zippen, vergeet dan niet om het zip bestand exact hetzelfde naam te geven als wat u bij name heeft ingevuld. Daarna kunt u de template installeren. Melding maken voor IE6 en IE7 Wanneer uw website wordt bekeken met Internet Explorer ouder dan versie 8 toon dan een bericht dat de website met deze browser niet meer kan worden bekeken. Internet Explorer 7 en eerdere versies zijn sterk verouderde browsers en worden nog maar zelden gebruikt. Zelfs Internet Explorer 8 voldoet eigenlijk niet meer aan de huidige standaards, echter het is nog steeds de standaard browser van Windows XP die nog volop wordt gebruikt. We gaan de content van de website voor de oudere Internet Explorer versies niet meer tonen. Voor deze browsers zal een bericht worden getoond aan de gebruiker om een andere modernere browser te gaan gebruiken. We doen dit met HTML, CSS en een Joomla module (Aangepaste HTML). Maak een nieuwe module aan en kies voor "Aangepaste HTML". Geef de module een titel, bijvoorbeeld "Bericht IE oud". Verberg de titel. Kies voor de positie "messageie". Ga naar het tabblad "Aangepaste invoer" en klik rechts onder op "Schakelen tekstverwerker" (u komt dan in de code view). Kopieer onderstaande code in dit tekstvak of wijzig de tekst naar uw eigen voorkeur. 1. <h1>uw Internet Explorer versie is verouderd.</h1> <h1>deze website kan niet met deze browser worden bekeken!</h1> <p>upgrade uw browser naar de laatste versie (Internet Explorer 8) of installeer een andere browser, zoals <a href=" target="_blank" title="download de Nederlandse Firefox browser">firefox</a>

15 13. of <a href=" target="_blank" title="download de Nederlandse Google Chrome browser">google Chrome</a>)</p> Open het bestand template_ieold.css en neem de volgende CSS declaraties op in het nog lege bestand 1. body { 2. background: none; 3. filter: none; 4. text-align: center 5. } /* Het is mogelijk dat u meer elementen moet opnemen, afhankelijk van de structuur van uw template */ 8. div.container, 9. div.footer { 10. display: none; 11. } div.message-ie { 14. display: block; 15. padding: 40px 0 0 0; 16. width: 600px; 17. margin: 0 auto 0 auto; 18. } We bereiken hiermee dat de gehele content en footer van de webpagina niet zal worden getoond in Ineternet Explorer 7 of eerdere versies. Uitsluitend de inhoud van de div met de class "message-ie" zal worden getoond, tegen een witte achtergrond. De gebruiker van Internet Explorer 7 of van eerdere versies krijgt de volgende pagina te zien. Dit bericht zal niet worden getoond in alle andere browsers. 15

16 Het is belangrijk dat u het resultaat test met bijvoorbeeld IEtester of Internet Explorer 10 (zie het laatste item van deze tutorial in de linker kolom->uw template testen). Lettertype, stijl en -grootte Bootstrap en de Basis Template Joomla 3 hebben lettertypes, letterstijlen en lettergrootten ingesteld. Het kan gewenst zijn om deze instellingen te overschrijven met uw eigen voorkeuren. In de Bootstrap CSS en de Basis Template Joomla 3 zijn lettertypes, letterstijlen en lettergrootten ingesteld. Lettertype (font-family) Standaard lettertypes van Bootstrap 1. body { 2. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 3. } h1, h2, h3, h4, h5, h6 { 6. font-family: inherit; 7. font-weight: bold; 8. } pre { 11. font-family: Monaco, Menlo, Consolas, "Courier New", monospace; 12. } input, button, select, textarea { 15. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 16. } navbar-search.search-query { 19. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 20. } Wat hier opvalt is de keuze voor het font Helvitica Neue als basisfont, dat zowel bij Windows, Mac desktop PC's en vele mobiele apparaten niet standaard is geïnstalleerd. Wanneer je de webpagina's overal hetzelfde font wilt laten zien gebruik dan een websafe font als Arial en Verdana. Google Webfonts Een goed alternatief voor de basisfonts Arial en Verdana is het gebruik van Google Webfonts. De Google Webfonts zijn te vinden op Er is een video tutorial beschikbaar over het gebruik van Google Webfonts (zie Joomla Videotutorials -> 16

17 Google Webfonts). In de Basis Template Joomla3 is voor alle heading elementen (h1 t/m h6) het Google Webfont Open Sans Condensed:700 ingesteld. Lettertypes van de basetemplate-joomla3 opgenomen in het template.css bestand 1. body { 2. font-family: Verdana, Arial, sans-serif; 3. } h1, h2, h3, h4, h5, h6 { 6. font-family: 'Open Sans Condensed',sans-serif; 7. } input, button, select, textarea { 10. font-family: Arial, Helvetica, sans-serif; 11. } Bootstrap Lettergrootte en regelhoogte Standaard in Bootstrap zijn de lettergrootten (font-size, en line-height) gedefiniëerd. De belangrijkste zijn hieronder weergegeven. 1. body { 2. font-size: 14px; 3. line-height: 20px; 4. } button, input, select, textarea { 7. font-size: 100%; 8. } h1 { 11. font-size: 36px; 12. line-height: 40px; 13. } h2 { 16. font-size: 30px; 17. line-height: 40px; 18. } h3 { 21. font-size: 24px; 22. line-height: 40px; 23. } h4 { 26. font-size: 18px; 27. line-height: 20px; 17

18 28. } h5 { 31. font-size: 14px; 32. line-height: 20px; 33. } h6 { 36. font-size: 12px; 37. line-height: 20px; 38. } legend { 41. font-size: 21px; 42. line-height: 40px; 43. } label, input, button, select, textarea { 46. font-size: 14px; 47. font-weight: normal; 48. line-height: 20px; 49. } select, textarea, 52. input[type="text"], input[type="password"], input[type="datetime"], 53. input[type="datetime-local"], input[type="date"], input[type="month"], 54. input[type="time"], input[type="week"], input[type="number"], input[type=" "], 55. input[type="url"], input[type="search"], input[type="tel"], input[type="color"], 56..uneditable-input { 57. font-size: 14px; 58. line-height: 20px; 59. } btn { 62. font-size: 14px; 63. line-height: 20px; 64. } Lettergrootte en regelhoogte van de basetemplate-joomla3 Voor de basetemplate-joomla3 zij de lettergroottes van de headings standaard iets kleiner gemaakt en overschreven in template.css. 1. h1 { 2. font-size: 30px; 18

19 3. line-height: 34px; 4. } h2 { 7. font-size: 26px; 8. line-height: 30px; 9. } h3 { 12. font-size: 22px; 13. line-height: 26px; 14. } h4 { 17. font-size: 18px; 18. line-height: 20px; 19. } h5 { 22. font-size: 14px; 23. line-height: 20px; 24. } h6 { 27. font-size: 12px; 28. line-height: 20px; 29. } Lettergrootte mobiele telefoons en tablets De moderne smart mobiele telefoons en tablets hebben beeldschermen met een veel hogere dpi (dots per inch), dan de desktop beeldschermen. Als een mobiele telefoon een dpi heeft van 280 en een desktop beeldscherm 96dpi dan wordt de lettergroote ongeveer 2 tot 3 x zo klein weergegeven. Voor gebruikers met scherpe ogen is dat geen probleem en bovendien hebben de mobiele apparaten de mogelijkheid om te zoomen. Hieronder is op ware grootte het beeldscherm van een mobiele telefoon weergegeven, met een basis lettergrootte van 14 pixels. 19

20 Van dezelfde pagina is het lettertype vergroot naar 24 pixels en line-height van 30px en ziet er nu als volgt uit. Dit is al een stuk beter leesbaar. Wanneer de werkelijke verhouding van de font-size wordt genomen van 14px (96dpi) naar 38px (280dpi) dan wordt de letter weliswaar evengroot weergegeven op de desktop als op de mobiele telefoon echter dat is niet meer werkbaar. Het vorige voorbeeld is dan een redelijk haalbare instelling van de font-size. Het is mogelijk om voor mobiele apparaten uit te gaan van een andere lettergrootte met behulp van een mediaquery van bijvoorbeeld tot en met 979 pixels. Er zijn echter tablets met een beeldscherm van 1280 pixels breed en dus dit is maar een gedeeltelijke oplossing. U moet nog wel nagaan of het noodzakelijk is om de lettergroottes van bijvoorbeeld de menu's aan te passen voor de presentatie op mobiele apparaten. Zo heeft een list-item standaard een line-height van 20px. Ook deze moet worden verhoogd naar 30px. Voor de template.css kunt u de onderstaande css opnemen als u voor mobiele telefoons een groter lettertype wilt. Er zijn echter nog veel meer aanpassingen nodig voor deze mediaquery, wanneer u dit wilt toepassen. Dit is afhankelijk van welke elementen u in uw website zijn opgenomen. Hier hebben we alleen als demonstatie de basismethode weergegeven. Het is meestal verstandig om deze aanpassing niet door te voeren of in ieder geval pas nadat u uw website helemaal hebt ingericht. CSS 20

21 (max-width: 979px) { 2. body { 3. font-size: 24px; 4. line-height: 30px; 5. } li { 8. line-height: 30px; 9. } 10. } Navigatie menu maken Maak een navigatie menu met behulp van Bootstrap classes. In Joomla worden deze classes benoemd bij de Geavanceerde Module Opties -> Menu class achtervoegsel. In het HTML model uit "Stap 1 Maak een Bootstrap HTML ontwerp", hebben we gekozen voor een tab menu, dat met Bootstrap classes werd opgebouwd. In Joomla 3 is dit menu eenvoudig te maken door de betreffende classes te benoemen in de geavanceerde module opties. In de module geavanceerde opties van het hoofdmenu is bij Menu Class Achtervoegsel "[spatie]nav-pills" ingevuld. Dit moeten we wijzigen in de class voor een tab menu. De noodzakelijke spatie die voorafgaat aan de class naam nav-pills of nav-tabs is een Joomla bug. Mogelijk wordt deze in toekomstige versies hersteld. 1. Ga naar Extensies->Modulebeheer->Hoofdmenu. 2. Kies voor het tabblad "Opties" en ga naar "Geavanceerde Opties". 3. Op de regel "Menu class achtervoegsel" staat mogelijk nu "[spatie] nav-pills", als u de Nederlandse voorbeeld data hebt geïnstalleerd. 4. Wijzig dit in [spatie]nav-tabs. 5. Kies voor opslaan. U hoeft geen enkele CSS wijziging door te voeren om van een nav-pills een nav-tab menu te maken. De website is nu voorzien van het tab menu. De css en scripts voor dit menu worden door Bootstrap toegewezen aan het tab menu. Het wordt anders als u in het navbar menu, tab-menu of pills-menu subitems heeft (dropdownmenu). Dit is (nog) niet aanwezig in Joomla 3. U zult dan een module menu 21

22 override moeten maken en javascript moeten toevoegen. Dit wordt behandeld bij de tutorial Een dropdownmenu maken. Op de website van Twitter Bootstrap worden de diverse menu's behandeld, die u op dezelfde wijze kunt toepassen als nav-pills en nav-tabs (zie Zo kunt u onder meer de classes gebruiken voor een menu in een sidebar met de Menu Class Achtervoegsel: "[spatie]navstacked" of "[spatie]nav-list". Uw menu responsive maken Als voorbeeld hebben we meer menu-items opgenomen dan alleen het Home menu item. Wanneer we de viewport smaller maken zien we het menu als volgt wordt weergegeven. Op zichzelf hoeft dat geen probleem te zijn, echter beter zou zijn, dat bij een bepaalde viewport, de menu-items onder elkaar komen te staan. Welke viewport dat is, is afhankelijk van de breedte van het totale menu zelf. U kunt dit vaststellen met de handige extensie voor Firefox, de webdeveloper. In de video tutorial over Firefox en extensies kunt u hiervoor de werkwijze vinden. In het voorbeeld hierboven staan de menu-items op één lijn bij minimaal 662px (geldt alleen voor dit voorbeeld). Bij 661px verschuift het menu-item Contact naar de 2e regel. We willen dus bij een viewport van maximaal 661px alle menu-items onder elkaar hebben. We doen dit met een media query en plaatsen dit in het template.css bestand. Met behulp van Firebug (zie video tutorial over Firefox) bekijken we eerst de Bootstrap stijlen van de list items en links van het menu. 1..nav-tabs > li,.nav-pills > li { 2. float: left; 3. } nav-tabs >.active > a,.nav-tabs >.active > a:hover { 6. border-color: #DDDDDD #DDDDDD transparent; 7. border-style: solid; 8. border-width: 1px; 9. } 22

23 De list-items hebben een css declaratie van float: left, we wijzigen dit in een media query tot en met 661px in float: none. Verder hebben de actieve link items een css declaratie border: 1px #dddddd solid. Die border willen we verwijderen door te kiezen voor border: none. De css media query wordt dan als volgt. (max-width: 661px) { 2..nav-tabs > li { 3. float: none; 4. } 5..nav-tabs >.active > a,.nav-tabs >.active > a:hover { 6. border: none; 7. } 8. } Zo kunt u uw eigen media query opstellen. Het menu ziet er bij een viewport van 661px er als volgt uit. U kunt dezelfde methode toepassen voor bijvoorbeeld het nav-pills menu. Een grote header afbeelding of diashow maken Het plaatsen van een grote header afbeelding of dia show op uw webpagina is gemakkelijker dan ooit in Joomla 3 met Bootstrap classes en de Basis Template Joomla 3. In het html model van deze tutorial Stap 1 is een grote afbeelding geplaatst onder het navigatie menu in de header. We gaan dit ook in de basetemplate-joomla 3 toepassen. In de 23

24 template index.php is hiervoor een module positie "position-5" beschikbaar. Zo ziet de code structuur van de header eruit van de index.php zonder aanpassingen. 1.  2. <div class="header"> 3. <div class="header-inner"> 4. <?php if ($this->countmodules('position-0')):?> 5. <div class="pos0"> 6. <jdoc:include type="modules" name="position-0" style="none" /> 7. <div class="clearfix"></div> 8. </div> 9. <?php endif;?> 10. <?php if ($this->countmodules('position-4')):?> 11. <div class="pos4"> 12. <jdoc:include type="modules" name="position-4" style="none" /> 13. <div class="clearfix"></div> 14. </div> 15. <?php endif;?> 16. <?php if ($this->countmodules('position-5')):?> 17. <div class="bigimage"> 18. <jdoc:include type="modules" name="position-5" style="none" /> 19. <div class="clearfix"></div> 20. </div> 21. <?php endif;?> 22. <div class="clearfix"></div> 23. </div> 24. </div> Zorg ervoor dat de afbeelding die u wilt gebruiken minstens 1170px breed is. In dit voorbeeld gebruiken we de header.jpg afbeelding uit de map images van de template. 1. Ga naar Extensies->Modulebeheer en kies voor "Nieuw". 2. Selecteer "Aangepaste HTML". 3. Geef de module een titel, bijvoorbeeld "Header image". 4. Bij "Toon titel" klik op "Verberg". 5. Selecteer "positon-5" bij "Positie". 6. Ga naar het tabblad "Aangepaste invoer" en plaats de afbeelding met de editor knop onder het invoerveld en voeg de afbeelding toe. Vul geen afmetingen in alleen een beschrijving van de afbeelding. 7. Controleer de code, dat er geen width of height in de code is verwerkt, zoals onderstaand voorbeeld. 1. <p><img src="/templates/basetemplate-joomla3/images/header.jpg" alt="" /></p> 24

25 Wijzig de paragraaf tags in div tags, omdat in de Bootstrap CSS de p tag een bottom margin heeft van 10px en hier is geen bottom margin gewenst. De code wordt dan: 1. <div><img src="/templates/basetemplate-joomla3/images/header.jpg" alt="" /></div> Kies voor Opslaan en bekijk het resultaat op uw webpagina. Door het plaatsen van de module met de afbeelding op position-5 komt het navigatie menu onder de afbeelding. We kunnen dit later nog aanpassen. De afbeelding is geplaatst en deze is ook "responsive". Wanneer de viewport kleiner maken, zal de afbeelding eveneens worden meeverkleind. De afbeelding kan worden gestijld met de Bootstrap image classes "img-rounded", "imgpolaroid" en "img-circle" (img-circle is een bijzondere vorm van de class img-rounded). U kunt zelf experimenteren welke class u wilt gebruiken. 1. <div><img class="img-polaroid img-circle" src="/templates/basetemplate-joomla3/images/header.jpg" alt="" /></div> In het html model staat het tab menu boven de header image. In de basetemplate-joomla 3 staat het menu eronder. U kunt op meerdere manieren het menu boven de afbeelding plaatsen. Bijvoorbeeld u verplaatst de coderegel van het navigatie menu (position-1) naar direct boven de positie van de header image (position-5). De code van de header van de template index.php komt er dan als volgt uit te zien. 1.  2. <div class="header"> 3. <div class="header-inner"> 4. <?php if ($this->countmodules('position-0')):?> 5. <div class="pos0"> 25

26 6. <jdoc:include type="modules" name="position-0" style="none" /> 7. <div class="clearfix"></div> 8. </div> 9. <?php endif;?> 10. <?php if ($this->countmodules('position-4')):?> 11. <div class="pos4"> 12. <jdoc:include type="modules" name="position-4" style="none" /> 13. <div class="clearfix"></div> 14. </div> 15. <?php endif;?> 16. <?php if ($this->countmodules('position-1')):?> 17. <div class="navigation"> 18. <jdoc:include type="modules" name="position-1" style="none" /> 19. <div class="clearfix"></div> 20. </div> 21. <?php endif;?> 22. <?php if ($this->countmodules('position-5')):?> 23. <div class="bigimage"> 24. <jdoc:include type="modules" name="position-5" style="none" /> 25. <div class="clearfix"></div> 26. </div> 27. <?php endif;?> 28. <div class="clearfix"></div> 29. </div> 30. </div> U kunt ook een nieuwe positie aanmaken, die nog niet in gebruik is, bijvoorbeeld "position- 6". In plaats van verplaatsen kopieert u de code van position-1 naar boven position-5 en wijzigt postion-1 in position-6 (vergeet niet om ook de countmodule code te wijzigen van 1 in 6). Hiermee laat u de bestaande navigatie op position-1 ongewijzigd. Vergeet dan niet om ook aan het templatedetails.xml bestand deze nieuwe positie toe te voegen. Onze voorkeur gaat uit naar het toevoegen van een nieuwe position-6. We voegen deze position-6 toe aan het templatedetails.xml bestand. We herbenoemen de module instelling van het hoofdmenu naar position-6 en wijzigen de code van header de template index.php als volgt. 1.  2. <div class="header"> 3. <div class="header-inner"> 4. <?php if ($this->countmodules('position-0')):?> 5. <div class="pos0"> 6. <jdoc:include type="modules" name="position-0" style="none" /> 7. <div class="clearfix"></div> 26

27 8. </div> 9. <?php endif;?> 10. <?php if ($this->countmodules('position-4')):?> 11. <div class="pos4"> 12. <jdoc:include type="modules" name="position-4" style="none" /> 13. <div class="clearfix"></div> 14. </div> 15. <?php endif;?> 16. <?php if ($this->countmodules('position-6')):?> 17. <div class="navigation"> 18. <jdoc:include type="modules" name="position-6" style="none" /> 19. <div class="clearfix"></div> 20. </div> 21. <?php endif;?> 22. <?php if ($this->countmodules('position-5')):?> 23. <div class="bigimage"> 24. <jdoc:include type="modules" name="position-5" style="none" /> 25. <div class="clearfix"></div> 26. </div> 27. <?php endif;?> 28. <div class="clearfix"></div> 29. </div> 30. </div> De positions van het templatedetails.xml bestand zien er als volgt uit. 1. <positions> 2. <position>position-0</position> 3. <position>position-1</position> 4. <position>position-2</position> 5. <position>position-3</position> 6. <position>position-4</position> 7. <position>position-5</position> 8. <position>position-6</position> 9. <position>position-7</position> 10. <position>position-8</position> 11. <position>messageie</position> 12. <position>debug</position> 13. </positions> Door deze wijzigingen ziet de pagina er als volgt uit. 27

28 Marge Nu begint het aardig op het html model te lijken echter het kruimelpad staat tegen de onderzijde van de header image aangeplakt. Hier moet wat ruimte komen. Dit doen we door de div class van de header-image te voorzien van een bottom marge. We nemen de volgende css declaratie op in het template.css bestand. 1. div.bigimage { 2. margin-bottom: 20px; 3. } Na het toepassen van deze declaratie ziet de header van de pagina er als volgt uit. 28

29 Dia show De werkwijze voor een diashow is hetzelfde als voor de header image. U kunt hiervoor het beste een extensie voor Joomla 3 gebruiken. Een goede extensie is de gratis (na registratie) te downloaden Dj-imageslider van U volgt de instructies van de documentatie van de extensie en plaatst de module van dj-imagelsider op position-6. Dat is alles. De afbeeldingen van de image slider zijn "responsive", dus verkleinen mee met de viewport. Content indeling Het html model, dat we onder stap 1 hebben gemaakt, bestaat uit de header, die we nu gemaakt hebben, en een 4 koloms indeling (2 sidebars, 2 artikel kolommen) voor de content eronder. Dit wordt verder toegelicht via het menu Content en componenten stijlen- >Voorpagina / categorieblog. In de volgende tutorial gaan we in plaats van een tab menu een Navbar maken met de Bootstrap structuur en classes. Een Bootstrap Navbar maken In deze tutorial gaan we een responsive Bootstrap Navbar maken met de Basis Template voor Joomla 3. We nemen de Bootstrap Navbar html code als uitgangspunt (zie Twitter Bootstrap De html structuur van een navbar ziet er als volgt uit. 1. <div class="navbar"> 2. <div class="navbar-inner"> 3. <a class="brand" href="#">title</a> 4. <ul class="nav"> 5. <li class="active"><a href="#">home</a></li> 6. <li><a href="#">link</a></li> 7. <li><a href="#">link</a></li> 8. </ul> 9. </div> 10. </div> Voor de Navbar maken we een nieuwe positie aan, position-9. Dit betekent ook een aanvulling van het templatedetailsxml document met position-9. De bovenstaande structuur moeten we geschikt maken voor de basetemplate-joomla3: 1.  2. <?php if ($this->countmodules('position-9')):?> 3. <div class="navbar"> 4. <div class="navbar-inner"> 29

30 5. <a class="brand" href="#"><?php echo $sitename?></a> 6. <jdoc:include type="modules" name="position-9" style="none" /> 7. </div> 8. </div> 9. <?php endif;?> Deze code plaatsen we in de index.php direct onder de div met class container en boven de header. 1. <body> 2. <div class="container"> 3.  4. <?php if ($this->countmodules('position-9')):?> 5. <div class="navbar"> 6. <div class="navbar-inner"> 7. <a class="brand" href="#"><?php echo $sitename?></a> 8. <jdoc:include type="modules" name="position-9" style="none" /> 9. </div> 10. </div> 11. <?php endif;?>  14. <div class="header"> 15. <div class="header-inner"> Vervolgens gaan we naar Extensies->Module beheer en selecteer de "Hoofdmenu" module. Deze geven we nu de position-9. Verder verwijderen we onder geavanceerde opties het Menu Class Achtervoegsel nav-tabs. De pagina ziet er nu als volgt uit. 30

31 Responsive Navbar U heeft nu een Navbar gemaakt zonder enige aanvullende CSS op te stellen, echter de Navbar is niet "responsive". Gelukkig heeft Twitter Bootstrap ook een structuur bedacht voor een "Responsive" Nav Bar. Onderstaande code kunt u vervangen voor de hierboven gemaakte navbar code. 1. <body> 2. <div class="container">  5. <?php if ($this->countmodules('position-9')):?> 6. <div class="navbar"> 7. <div class="navbar-inner"> 8. <div class="container"> 9. <a class="btn btn-navbar" data-toggle="collapse" 10. data-target=".nav-collapse"> 11. <span class="icon-bar"></span> 12. <span class="icon-bar"></span> 13. <span class="icon-bar"></span> 14. </a> 15. <a class="brand" href="#"><?php echo $sitename?></a> 16. <div class="nav-collapse collapse"> 17. <jdoc:include type="modules" name="position-9" style="none" /> 18. </div> 19. </div> 20. </div> 21. </div> 22. <?php endif;?>  25. <div class="header"> 26. <div class="header-inner"> Na toepassing van deze aangepaste structuur voor de responsive Nabar in het index.php bestand, ziet de pagina er bij een viewport kleiner dan 980px als volgt uit. 31

32 Het menu is nu verscholen achter de "toggle" button rechts. Door erop te klikken komt het menu tevoorschijn. 32

33 Er zijn nog varianten van de Navbar mogelijk door classes toe te voegen aan de bovenste coderegel, bijvoorbeeld een Navbar met een zwarte achtergrond (navbar-inverse). 1. <div class="navbar navbar-inverse"> Printscreen van de navbar-inverse Of een Nabar over de volle breedte van de viewport die zichtbaar blijft bij het scrollen naar beneden (navbar-fixed-top). 1. <div class="navbar navbar-fixed-top"> Printscreen van de navbar-fixed-top 33

34 Voor de navbar-fixed-top moeten we een kleine correctie toepassen voor de body paddingtop. Door de CSS declaraties van de fixed navbar valt deze nu over de Header image heen. We passen de vogende CSS declaratie aan in de template.css 1. body { 2. padding-top: 60px; 3. padding-bottom: 40px; 4. } Printscreen De classes kunnen ook in combinatie met elkaar worden gebruikt, "navbar-inverse navbarfixed-top". In de volgende tutorial maken we een template override voor het menu om een dropdown menu mogelijk te maken. Een dropdown menu maken In deze tutorial gaan we een dropdown menu maken met behulp van Bootstrap classes, javascript en de Basis Template Joomla 3 In de vorige tutorial hebben we een navbar gemaakt. We gaan nu weer verder met het tabs menu. Joomla 3 voorziet standaard (nog) niet in het maken van Bootstrap submenu's. In de brondocumenten van Joomla ontbreken bepaalde classes en elementen om dit mogelijk te maken. Een eenvoudige oplossing hiervoor is om van een javascript gebruik te maken, dat tot voor 2 subniveaus geschikt is. Kopieer onderstaand script aan het eind van de template index.php document direct boven de eind </body> tag. 34

35 1. <script type="text/javascript"> 2. (function($){ 3. $(document).ready(function(){ 4. $('.parent').addclass('dropdown'); 5. $('.parent > a').addclass('dropdown-toggle'); 6. $('.parent > a').attr('data-toggle', 'dropdown'); 7. $('.parent > a').append('<b class="caret"></b>'); 8. $('.parent > ul').addclass('dropdown-menu'); 9. $('.nav-child.parent').removeclass('dropdown'); 10. $('.nav-child.parent').addclass('dropdown-submenu'); 11. $('.dropdown-submenu > a').removeattr('class'); 12. $('.dropdown-submenu > a').removeattr('data-toggle', 'dropdown'); 13. $('.dropdown-submenu > a > b').remove(); 14. }); 15. })(jquery); 16. </script> Dit script zorgt ervoor dat de benodigde classes en html code aan het Joomla menu wordt toegevoegd, waardoor de CSS van Bootstrap wordt uitgevoerd. Belangrijk! Bij het maken van de Joomla hoofd menu items met submenuitems moet het menu item een externe link zijn. Het hoofd menu-item (in onderstaand voorbeeld "Lists" en "User") met submenu's moet gemaakt zijn met een externe link met als link een # teken. Het hoofd menu item mag niet verwijzen naar een artikel of blogpagina, anders werkt het dropdown menu niet. Voor het onderliggende submenu item met weer submenu-items mag de link wel naar een artikel of blogpagina wijzen, maar mag ook een externe link zijn. Belangrijk! De instelling van de menu module moet zijn ingesteld op "Alle submenu items tonen" Dit kunt u als volgt instellen: Extensies->Modulebeheer->Hoofdmenu->Opties->Toon Submenuitems->Ja. Wanner het script op de goede plaats staat en de submenu's in de Joomla administrator op de juiste wijze zijn ingevoerd is het dropdown menu operationeel. Het script werkt voor alle Bootstrap Menu's, zoals nav-tabs, nav-pills, navbar, nav-list en navstacked. 35

36 Aanpassen sidebar breedte Pas de breedte van de Bootstrap sidebar met de class span aan, wanneer deze te smal is voor de inhoud van de sidebar voor de Basis Template Joomla 3. Zoals we in "Stap 1: Maak een Bootstrap HTML ontwerp" hebben aangegeven, hebben de kolommen van de webpagina bij verschillende viewports een andere breedte. De totale breedte van de website wordt bepaald door de class "container" en de kolommen door de class span1 t/m span12. Hieronder is een overzicht weergegeven van de breedte (width) van de website (container) en de kolommen (span1 t/m span12) bij de verschillende viewports. min. 768px span[n] width max. 767px min.980px min. 1200px max 979px span1 auto 42px 60px 70px span2 auto 104px 140px 170px span3 auto 166px 220px 270px span4 auto 228px 300px 370px span5 auto 290px 380px 470px span6 auto 352px 460px 570px span7 auto 414px 540px 670px span8 auto 476px 620px 770px span9 auta 538px 700px 870px span10 auto 600px 780px 970px span11 auto 662px 860px 1070px span12 auto 724px 940px 1170px container 100% 724px 940px 1170px Voor de Basis Template Joomla 3 wordt de sidebar breedte bepaald door de class "span3". In de tabel is te vinden dat de waarden van span3 minimaal 166px en maximaal 270px bedraagt. 36

37 Wij vinden de breedte van 166px bij een viewport van minimaal 768px tot en met 979px een beetje te smal. Vooral de headings van sommige modules vallen snel buiten de kolom. In de afbeelding hieronder is dat het geval voor de Login Module. Naast de smalle sidebar is de blog pagina ook nog over 2 kolommen verdeeld. De class span6 binnen de blog pagina hebben een relatieve breedte omdat deze binnen de class.row-fluid vallen (width: %). Deze blog kolommen hebben ook te weinig ruimte om de content behoorlijk te tonen bij dezelfde viewport We willen voor deze media query een sidebar (span3) van 200px. Als we dat wijzigen heeft dat gevolgen voor de andere elementen van de pagina. De sidebars nemen in breedte toe. Met een beetje rekenwerk kunnen we alle nieuwe span breedtes bepalen. Gerekend met 2 sidebars is nemen de span's toe met ( = 34) x 2 = 68px. Dit moeten we in mindering brengen van de content breedte span6: =284px. 37

38 Wanneer er maar één sidebar in gebruik is geldt de span9 voor de contentbreedte. Deze wordt dan =504px. Verder willen we voor deze media query de kolommen van de blog content over de volle breedte tonen, dus niet over 2 kolommen. Dus de declaratie.row-fluid.span6 wordt dan width: auto. U kunt het resultaat met de Firefox Webdeveloper Resize testen. We nemen deze declaraties op in template.css (min-width: 768px) and (max-width: 979px) { 2..span3 { 3. width: 200px; 4. } span6 { 7. width: 284px; 8. } span9 { 11. width: 504px; 12. } row-fluid.span6 { 15. width: auto; 16. } 17. } Printscreen bij 2 sidebars 38

39 Printscreen bij 1 sidebar Een border en boxshadow plaatsen om de pagina In deze tutorial plaatsen we een border met box-shadow rond de pagina van de website. Hiervoor passen we de index.php en de template.css aan van de Basis Template Joomla 3. index.php Allereerst plaatsen we een nieuwe ID "wrapper" in de buitenste div met de class container. 1. <body> 2. <div id="wrapper" class="container"> </div><-- End Container --> <div class="footer"></div> 9. <div class="container"></div> <div class="message-ie"></div> 12. </body> Deze ID is nodig om deze div met de class container uniek te maken. We kunnen de class container niet gebruiken, omdat er meerdere div's met de class container in de template voorkomen. 39

40 template.css We plaatsen eerst een border rond de div#wrapper. 1. #wrapper { 2. border: 1px #e4e4e4 solid; 3. } De pagina ziet er nu als volgt uit. Er is een border geplaatst rondom echter hier is goed te zien dat de header afbeelding aan de rechterzijde buiten de begrenzing van de div valt. Dit effect treedt op door de padding van de class img-polaroid op de afbeelding. Deze class plaatst een padding van 4px en een border van 1px rondom de afbeelding. Totaal wordt de afbeelding dus 10px groter en springt daarmee buiten de breedte van de div. Om dit te corrigeren voegen we de volgende css declaratie toe aan de div.bigimage. 1. div.bigimage { 2. margin-bottom: 20px; /* Deze declaratie was al eerder ingevuld */ 3. padding-right: 10px; 4. } We maken hiermee de ruimte voor de breedte van de afbeelding 10px kleiner, waardoor deze nu bij alle viewports precies past. Na toepassen van deze declaratie ziet de website er als volgt uit. 40

41 De border "plakt" tegen de rand van de #wrapper aan, dus we moeten ook nog wat padding toevoegen. 1. #wrapper { 2. border: 1px #e4e4e4 solid; 3. padding: 20px; 4. } De pagina ziet er nu als volgt uit. Nu is de border "los" en voegen we de declaraties toe van border-radius en box-shadow. 1. #wrapper { 2. border: 1px #e4e4e4 solid; 3. padding: 20px; 41

42 4. border-radius: 4px; 5. box-shadow: 0 0 6px #ccc; 6. } De pagina ziet er nu als volgt uit. Het is ook nog mogelijk om een achtergrondkleur voor de body in te stellen en de #wrapper achtergrond wit te houden. 1. body { 2. background-color: #f4f4f4; 3. } #wrapper { 6. border: 1px #e4e4e4 solid; 7. padding: 20px; 8. border-radius: 4px; 9. box-shadow: 0 0 6px #ccc; 10. background-color: #fff; 11. } Printscreen 42

43 Correctie voor kleinere viewports Voor kleiner viewports is de border en achtergrond kleur van de body minder zinvol. De viewport is al kleiner en dan gaat er ook nog 40px af die de border en padding inneemt en van de achtergrondkleur is slechts een randje zichtbaar. Daarom corrigeren we de border en achtergrondkleur als de viewport kleiner dan of gelijk aan 767px. In ons voorbeeld willen we de viewport nemen, waarbij het horizontale tab-menu verspringt naar een verticaal menu (zie de pagina navigatie menu's maken). Die viewport was 661px. We voegen de volgende declaraties toe aan de reeds bestaande css. Zorg ervoor dat de media query CSS na de stijlen komen in het template.css bestand, die voor alle viewports gelden. Ook volgorde van de media queries zelf is belangrijk bij elkaar overschrijvende stijlen. (max-width: 661px) { 2..nav-tabs > li { 3. float: none; 4. } nav-tabs >.active > a,.nav-tabs >.active > a:hover { 7. border: none; 8. } body { 11. background-color: #fff; 12. } #wrapper { 15. padding: 0; 16. border: none; 17. box-shadow: none; 18. border-radius: 0; 19. } 43

44 20. } De pagina op een viewport van 661px of minder ziet er als volgt uit zonder achtergrondkleur en border. In de volgende tutorial kunt u tools vinden om CSS3 declaraties voor Internet Explorer 8 toe te passen. CSS3 toepassen voor IE8 Internet Explorer 8 ondersteunt standaard geen CSS3. In de Basis Template Joomla 3 zijn PIE scripts opgenomen, die het mogelijk maken om ook voor IE8 CSS3 stijlen toe te passen. De pagina ziet er zonder gebruik van PIE scripts in IE8 als volgt uit. 44

45 De pagina layout verschilt niet veel met bijvoorbeeld Firefox, echter er zijn geen CSS3 stijlen doorgevoerd, zoals de ronde hoeken van de bigimage. Dit effect was afkomstig van de CSS3 stijl border-radius van de class img-circle. In de map "js" van de Basis Template Joomla 3 zijn PIE scripts (versie 2, beta1) opgenomen, die het mogelijk maken om ook voor IE8 CSS3 stijlen toe te passen, zoals border-radius. U kunt de website over PIE vinden via de volgende url Wanneer we de border-radius willen toepassen voor IE8 op de bigimage, voegen we de declaratie "behavior" toe aan de CSS declaraties met een absoluut pad naar het PIE.php bestand. Een relatief pad werkt niet in Joomla. We voegen de onderstaande declaratie toe aan het template_ie8.css document (Note: wanneer u de afbeelding niet meer ziet na toepassen van onderstaande CSS lees dan verder bij PIE problemen.). Pas de url aan voor uw eigen website en template. Dit kan ook de localhost zijn voor Xampp. 1..img-circle { 2. behavior: url( 3. } U moet voor iedere CSS3 declaratie de behavior regel aangeven. U kunt niet met één declaratie de PIE scripts voor de gehele website activeren. Wees echter zuinig met deze declaratie en pas deze toe voor alleen de essentiële stijlen, omdat het de performance van de website negatief beïnvloed. Na toepassen van de CSS ziet de pagina er als volgt uit. 45

46 Meer over CSS3 stijlen met de PIE scripts bij het hoofdstuk Joomla CSS3 stijlen->css3 PIE voor IE8 en IE9. Stap 4: Installeer de aangepaste template Zip de bestanden en installeer de Basis Template Joomla 3, nadat alle aanpassingen zijn doorgevoerd. De naam van het zip bestand moet gelijk zijn aan de naam die in het templatedetails.xml bestand is ingevuld. Installeer de template op de wijze zoals u dat bent gewend in Joomla. 1. Ga naar Extensies->Extensiebeheer 2. Blader naar het zip bestand. 3. Kies voor "Uploaden en Installeren". 4. Ga daarna naar Extensies->Templatebeheer. 5. Stel uw nieuwe template in als standaard template. Stap 5: Uw template beheren De template kunt u via het backend van uw website beheren. U kunt via deze functie het index.php en css bestanden later nog aanpassen. 1. Ga naar Extensies->Templatebeheer. 2. Kies in de linker kolom voor "Templates". 3. U komt op een pagina met een overzicht van de geïnstalleerde templates. 4. Kies voor "uw template - gegevens en bestanden". 5. U komt op de pagina met de bron php en css bestanden. Door op een bestandsnaam te klikken komt u in de Editor en kunt u wijzigingen aanbrengen. 46

47 Template afbeeldingen maken Wanneer de website is voorzien van modules en content kan er een screenprint van worden gemaakt. Deze screenprint moet worden uitgesneden, verkleind en opgeslagen worden om in Joomla te kunnen gebruiken. Hiervoor heeft u een fotoberwerkingsprogramma, zoals Photoshop of vergelijkbaar voor nodig. De "template_thumbnail.png" heeft een formaat van 206 x 150 pixels. De "template_preview.png" heeft een formaat van 640 x (ca.) 400 pixels. Beide bestanden worden geplaatst in de hoofdmap van de template en overschrijven de bestaande "blanco "template afbeeldingen. Uw Joomla 3 template testen Voor het testen van uw Joomla website en template zijn er diverse tools beschikbaar, zoals de W3c validator, diverse desktop browsers en mobile device simulators. Zijn uw website en template technisch correct uitgevoerd? Is uw website toegankelijk voor de meest gebruikte moderne browsers en Internet Explorer 8, 9 en 10? Technisch correcte website De technische uitvoering kunt u controleren met de website tools van W3C. W3C staat voor het World Website Consortium en heeft een aantal tools beschikbaar om uw website te controleren. HTML markup validatie CSS validatie Deze twee tools geven u per website pagina een resultaat. U moet dan wel handmatig alle pagina's van uw website controleren. Browser controle Naast de technische validatie is het belangrijk dat uw website toegankelijk is voor veel gebruikte browsers en de lay-out overeenkomstig is. Internet Explorer 8, 9 en 10 Mozilla Firefox Opera Safari Google Chrome Het enige wat u hoeft te doen is de browsers installeren op uw systeem en de pagina's van uw website te controleren op functionaliteit en op lay-out. 47

48 Alleen de versies van Internet Explorer kunt u niet als een "stand alone" browser downloaden en installeren. Hiervoor kunt u een programma gebruiken (IE tester) dat over de IE8 en 9 versies beschikt. Ga naar de website van IE tester. Heeft u Internet Explorer 10 op uw systeem dan kunt u gebruik maken van de webdeveloper functies. U kunt uw website in de compabiliteit mode bekijken van Internet Explorer 7 tot en met 10 (zie Testen mobiele toestellen Er zijn mobiel emulators beschikbaar, die u kunt installeren op uw PC, kunt gebruiken via een webpagina of extensies van een browser. Iphone Simulator/ Opera Mobile Emulator Google Chrome Ripple Emulator Deze simulators en emulators geven u een goed beeld hoe de website op een mobiel toestel wordt getoond. Het is echter belangrijk om ook op "echte" mobiele toestellen te testen. CSS overschrijven van Bootstrap classes Joomla 3 componenten hebben hun eigen stijlen. In deze tutorial laten we Joomla en Bootstrap classes met de gebruikte CSS zien en hoe deze kunnen worden overschreven. In de broncode documenten van Joomla zijn vele Bootstrap classes opgenomen. Het is daarom van belang dat u de hoofdstukken over het gebruik van Bootstrap classes heeft gelezen. Wanneer u de stijl voor een component wilt aanpassen is het noodzakelijk dat u de HTML structuur van die component kent. U kunt het beste gebruik maken van Firefox Firebug om de structuur, classes en toegepaste CSS te bekijken. Op deze website kunt u onder Joomla Videotutorials zien hoe u Firebug gebruikt. Button voor print, en editor iconen De ruimte van de button voor de print, en editor iconen en de tekst kan te klein zijn of zelfs ontbreken bij een bepaalde viewport. Om deze reden voegen we padding toe. U kunt de print en iconen op de pagina zien als deze zijn geactiveerd. 1. Ga naar Inhoud->Artikelbeheer. 2. Klik in het topmenu op "Opties". U komt dan standaard in de opties voor Artikelen terecht. 3. Zoek naar Toon iconen, Toon afdruk icoon, Toon icoon. Deze moeten op "Ja" staan. 4. Kies voor "Opslaan en Sluiten". Indien nog niets zichtbaar is, dan overschrijft het menu-item mogelijk de algemene opties. 48

49 1. Ga naar Menu->Hoofdmenu. 2. Klik op de startpagina link ("Home") of het menu item dat u wilt aanpassen. 3. Klik op "Geavanceerde opties->artikel opties". 4. Zoek naar Toon iconen, Toon afdruk icoon, Toon icoon. Zet deze op: "Gebruik Algemeen". Met deze instelling worden de hierboven aangegeven Algemene opties voor Artikelen aangehouden. U ziet nu op de pagina de button voor de print en iconen staan. De ruimte tussen het icoon en de tekst kan te klein zijn of zelfs ontbreken bij een bepaalde viewport. De button zit dan tegen de tekst "aangeplakt". Padding toevoegen in uw template.css 1..btn-group { 2. padding: px 20px; 3. } Met deze eenvoudige aanpassing wordt voorkomen dat bij welke viewport dan ook de tekst tegen de button aanloopt. Deze CSS declaratie moet u dan opnemen in uw template.css Printscreen Print en popup venster De stijling van het print en popup venster aanpassen. Stijl deze vensters met een witte achtergrond, padding en positioneer het afdruk icoon en de venster sluiten tekst. 49

50 Het Print en popup venster wordt zichtbaar als u op één van de iconen heeft geklikt. De template van dit venster is het component.php bestand uit uw geïnstalleerde Basis Joomla 3 template. De component.php zorgt ervoor dat de Bootstrap en template stijlen worden geactiveerd. Wanneer u een achtergrondkleur of -afbeelding gebruikt op uw webpagina dan zal deze ook zichtbaar zijn in het popup venster. Om ervoor te zorgen dat u een witte achtergrondkleur heeft zonder achtergrondafbeelding en de content niet tegen de rand van het vensterscherm staat, kunt u de volgende css in uw template.css opnemen. 1. body.contentpane { 2. background: none; 3. background-color: #fff; 4. padding: 20px; 5. } Wanneer u de Basis Joomla 3 Template niet gebruikt kan het bestand compnent.php ontbreken. Printscreen popup venster De afdruk pagina zal er het zelfde uitzien als uw webpagina, echter zonder achtergrondafbeeling of achtergrondkleur, wanneer u bovenstaande css declaratie heeft toegepast. De iconen met de tekst "Afdrukken" kan tegen de content tekst staan "aangeplakt", net als bij de button voor de en print iconen van de tutorial over de button. Om enige 50

51 ruimte rond het afdruk icoon en tekst te maken, kunt u de volgende css in uw template.css opnemen. 1. body.contentpane div.pull-right a { 2. display: block; 3. padding: px 30px; 4. } Printscreen popup venster Het popup venster is kleiner dan de content van het venster (400 x 350 pixels). Niet alle formulier velden zijn meteen zichtbaar. Dit wordt bepaald door het php script components/com_content/helpers/icon.php (regel 90). Aanpassen van dit brondocument is niet aan te bevelen, omdat bij een update van Joomla dit bestand mogelijk wordt overschreven. Het venster is door de gebruiker groter te maken. Verder staat er een link "Venster Sluiten", dat eigenlijk rechts zou moeten staan. Dat is consistent met de andere Joomla stijlen. Om dit te bereiken kunt u de volgende CSS aan uw template.css toevoegen. 1. div.mailto-close { 2. float: right; 3. } 51

52 Tooltip Tooltip stijlen aanpassen met bijvoorbeeld een witte achtergrond, andere border kleur en andere tekst grootte. De Tooltip wordt onder meer gebruikt bij labels van formuliervelden, zoals het contactformulier of het registratieformulier van de login component. Voorbeeld Tooltip van het contactformulier Standaard heeft de tooltip een zwarte achtergrond, witte letters en een pijltje aan de rand van de tooltip. De onderstaande CSS declaraties zijn te vinden in media/jui/bootstrap.css. 1..tooltip-inner { 2. max-width: 200px; 3. padding: 8px; 4. color: #ffffff; 5. text-align: center; 6. text-decoration: none; 7. background-color: #000000; 8. -webkit-border-radius: 4px; 9. -moz-border-radius: 4px; 10. border-radius: 4px; 11. } tooltip.in { 14. opacity: 0.8; 15. filter: alpha(opacity=80); 16. } tooltip.top.tooltip-arrow { 19. border-top-color: #000000; 20. } tooltip.right.tooltip-arrow { 23. border-right-color: #000000; 52

53 24. } tooltip.left.tooltip-arrow { 27. border-left-color: #000000; 28. } tooltip.bottom.tooltip-arrow { 31. border-bottom-color: #000000; 32. } Wanneer u bijvoorbeeld een witte achtergrond met zwarte letters wilt en een grijze border en pijltje rond de tooltip, wordt de CSS van enkele declaraties aangepast (plaatsen in template.css). Daarnaast kunt u ook nog de tekst grootte van de titel van de tooltip aanpassen. 1. /* Achtergrond kleur wit, zwarte tekst en een grijze border */ 2..tooltip-inner { 3. color: #000; 4. background-color: #fff; 5. border: 1px #ccc solid; 6. } /* titel */ 9..tooltip-inner strong { 10. font-size: 13px; 11. } /* Transparantie achtergrond kleur */ 14..tooltip.in { 15. opacity: 1; 16. } /* Kleur van het pijltje */ 19..tooltip.top.tooltip-arrow { 20. border-top-color: #ccc; 21. } tooltip.right.tooltip-arrow { 24. border-right-color: #ccc; 25. } tooltip.left.tooltip-arrow { 28. border-left-color: #ccc; 29. } tooltip.bottom.tooltip-arrow { 32. border-bottom-color: #ccc; 33. } 53

54 Gebruikersbeoordeling In deze tutorial kunt u de gebruikersbeoordeling activeren en stijlen voor de Basis Template Joomla 3. De gebruikersbeoordeling te activeren: 1. Ga naar Inhoud->Artikelen; 2. Klik in het topmenu op "Opties"; 3. U komt dan in de algemene standaard opties voor Artikelen terecht.zoek naar Toon beoordelen". Deze moet op "Toon" staan; 4. Kies voor "Opslaan en Sluiten". Er zijn nu 5 sterren en een selectie scherm om te stemmen zichtbaar op een artikel pagina. Indien nog niets zichtbaar is. 1. Ga naar Menu->Hoofdmenu en klik op de startpagina link of link waarvoor u de beoordeling wilt instellen; 2. Klik op "Geavanceerde opties"; 3. Zoek naar "Toon beoordelen" en zet deze op: "Gebruik Algemeen". Met deze instelling worden de hierboven aangegeven algemene opties voor Artikelen aangehouden. Op de artikel pagina is, zonder dat er nog is gestemd, het volgende zichtbaar (Basis Template Joomla 3). Op een blogpagina zijn alleen de sterren zichtbaar (beoordelingsresultaat). Indien er is gestemd dan wordt de lichtgrijze ster gewijzigd in een gouden ster. De afbeeldingen van de sterren staan in de Basis Template Joomla 3 op de volgende locatie. 54

55 templates/basetemplate-joomla3/images/system/rating_star_blank.png (lichtgrijze ster) templates/basetemplate-joomla3/images/system/rating_star.png (gouden ster) Om de sterren iets meer onder padding te geven kunt u de volgende CSS toepassen in het template.css bestand. 1. div.content_rating { 2. padding: 0 0 4px 0; 3. } Artikel details Deze tutorial laat u zien hoe u de artikel details / informatie kunt activeren en stijlen voor de Basis Template Joomla 3. De artikel details / informatie bestaan uit de volgende onderdelen: Auteur Categorie Aanmaakdatum Aanpassingsdatum Publicatiedatum Hits (het aantal keren dat de pagina is opgevraagd). Daarnaast kan worden gekozen om de informatie boven of onder het artikel te plaatsen en de informatie te splitsen. Om de artikel details te activeren: 1. Ga naar Inhoud->Artikelen; 2. Klik in het topmenu op "Opties". U komt dan standaard in de opties voor Artikelen terecht; 3. Zoek naar "Toon auteur, (optioneel link auteur), Toon categorie (optioneel link categorie), Toon aanmaakdatum, Toon aanpassingsdatum, Toon publicatiedatum en Toon hits" en selecteer of u de informatie wilt tonen of niet; 4. Kies voor de optie "Plaatsing artikel informatie" boven, onder of verdelen; 5. Kies voor "Opslaan en Sluiten". Indien nog niets, of een gedeelte van de elementen, zichtbaar is. 55

56 1. Ga naar Menu->Hoofdmenu en klik op de startpagina link of link waarvoor u de artikel details wilt instellen; 2. Klik op "Geavanceerde opties->artikel opties"; 3. Zoek naar dezelfde opties als hierboven genoemd en zet allen op: "Gebruik Algemeen". Met deze instelling worden de hierboven aangegeven algemene opties voor Artikelen aangehouden. Indien u de heading "Gegevens" niet wilt tonen en de gegevens niet wilt laten inspringen kunt u de volgende CSS toepassen. 1. dt.article-info-term { 2. display: none; 3. } dl.article-info dd { 6. margin-left: 0; 7. } Lees meer button In deze tutorial stijlen we de "Lees meer" button op blog pagina's. De grijze button kan ook in kleur worden weergegeven. De standaard "Lees meer" button ziet er als volgt uit. 56

57 De button is gestijld met de class "btn" van Bootstrap. Andere kleuren zijn ook mogelijk door de CSS van de class btn alleen voor de lees meer button te overschrijven. Hieronder is de kleurstelling weergegeven, zoals dat voor de class btn-primary geldt (blauwe button). 1. p.readmore.btn { 2. color: #ffffff; 3. text-shadow: 0-1px 0 rgba(0, 0, 0, 0.25); 4. background-color: #006dcc; 5. background-image: -moz-linear-gradient(top, #0088cc, #0044cc); 6. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); 7. background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); 8. background-image: -o-linear-gradient(top, #0088cc, #0044cc); 9. background-image: linear-gradient(to bottom, #0088cc, #0044cc); 10. background-repeat: repeat-x; 11. filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ff0088cc', endcolorstr='#ff0044cc', GradientType=0); 12. border-color: #0044cc #0044cc #002a80; 13. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 14. filter: progid:dximagetransform.microsoft.gradient(enabled = false); 15. } p.readmore.btn:hover { 18. color: #ffffff; 19. background-color: #0044cc; 20. } p.readmore.btn.active { 23. color: rgba(255, 255, 255, 0.75); 24. } p.readmore.btn:active, 27. p.readmore.btn.active { 28. background-color: # \9; 29. } p.readmore a.icon-chevron-right { 32. background-image: url(../../../media/jui/img/glyphiconshalflings-white.png); 33. } De kleuren die voor de gradient worden gebruikt zijn #0088cc en #0044cc. 57

58 De button ziet er dan als volgt uit. U kunt zelf andere kleurencombinaties voor de gradient kiezen met de CSS gradient generator van Color Zilla (extensie van Firefox, zie Videotutorial Firefox). Ruimte tussen artikelen / rijen De ruimte tussen artikelen op een blogpagina werkt in Joomla 3 anders dan in Joomla 2.5. Bepaalde classes zijn niet meer in de brondocumenten aanwezig. In deze tutorial wordt getoond hoe u in Joomla 3 deze ruimte kunt bepalen. In Joomla 2.5 werd de ruimte tussen artikelen en rijen op een blogpagina ingesteld met de classes "item-separator" en "row-separator". In Joomla 3 zijn deze classes niet meer aanwezig. Om een artikel of rij van artikelen meer ruimte te geven moet gebruik worden gemaakt van de class "item" (enkel artikel) en de class "items-row" (rij van artikelen). U kunt zowel marge als padding gebruiken. 1. div.item { 2. margin: px 0; 3. } div.items-row { 6. margin: px 0; 7. } Indien de layout van de blogpagina is ingesteld met één of meer "leading" artikelen over de volle breedte van de pagina, kan gebruik worden gemaakt van de class "leading-[n]", waarbij [n] staat voor het aantal leidende artikelen. Met de onderstaande CSS declaratie worden voor alle leidende artikelen de marge in één keer toegewezen. 1. [class*="leading-"] { 2. margin: px 0; 3. } Meer artikelen In deze tutorial stijlen we de "Meer artikelen" links op een blog pagina. Deze worden getoond als er meer artikelen aanwezig zijn dan op de pagina getoond worden. 58

59 De standaard Bootstrap stijl voor de "Meer artikelen" links ziet er als volgt uit. De "Meer artikelen" links kunnen ook naast elkaar worden gestijld. Plaats deze CSS in uw template.css indien u deze stijl wenst. 1..items-more.nav-stacked > li { 2. display: inline-block; 3. margin: 0 10px 10px 0; 4. } Om de links van de "Meer artikelen" te centreren op de pagina voeg dan de volgende css declaratie toe. 1..items-more ol { 2. text-align: center; 3. } U kunt deze stijlen ook toepassen vanaf een bepaalde viewport (in dit voorbeeld vanaf 768px). Bij de kleinere viewports (767px of minder) zullen de "Meer artikelen" dan de layout aannemen van de standaard Bootstrap stijl. In onderstaand voorbeeld zullen de "Meer artikelen" links vanaf een viewport van 768 pixels gecentreerd naast elkaar staan. (min-width: 768px) { 2..items-more ol { 3. text-align: center; 4. } items-more.nav-stacked > li { 7. display: inline-block; 8. margin: 0 10px 10px 0; 9. } 10. } 59

60 Paginatie Algemeen In deze tutorial gaan we de algemene paginatie stijlen. Deze paginatie komt voor bij speciale artikelen en categorie blog pagina's, categorie lijst pagina's en bij de zoekresultaten lijst. De standaard algemene paginatie ziet er als volgt uit. Bij kleinere viewports loopt de paginatie over in het volgende element. Dit komt omdat de class "pagination" in Bootstrap een absolute hoogte heeft van 40px. Dit kunnen we overschrijven met height: auto in het template.css bestand. Note! In Bootstrap versie van Joomla 3 is deze height: 40px reeds verwijderd. 1..pagination { 2. height: auto; 3. } pagination ul { 6. border-radius: 0; 7. box-shadow: none; 8. } De paginatie staat nu vrij. De paginatie kan compacter worden weergegeven, door gebruikmaking van icoontjes, zoals bij de Protostar template. 60

61 De Protostar template maakt gebruik van een template override "pagination.php". In dit script wordt verwezen naar icons, die niet standaard in Bootstrap zijn geplaatst. We kunnen dit bestand gebruiken en aanpassen. Kopieer dit bestand van: templates/protostar/html/pagination.php naar: templates/basetemplate-joomla3/html/pagination.php Open het bestand en vervang de volgende regels. 1. Regel 153: 2. $display = '<i class="icon-first"></i>'; 3. in: 4. $display = '<i class="icon-fast-backward"></i>'; Regel 159: 8. $display = '<i class="icon-previous"></i>'; 9. in: 10. $display = '<i class="icon-backward"></i>'; Regel 165: 14. $display = '<i class="icon-next"></i>'; 15. in: 16. $display = '<i class="icon-forward"></i>'; Regel 171: 20. $display = '<i class="icon-last"></i>'; 21. in: 22. $display = '<i class="icon-fast-forward"></i>'; Regel 197: 26. return '<li class="disabled"><a><i class="iconfirst"></i></a></li>'; 27. in: 28. return '<li class="disabled"><a><i class="icon-fastbackward"></i></a></li>'; Regel 203: 32. return '<li class="disabled"><a><i class="iconprevious"></i></a></li>'; 33. in: 34. return '<li class="disabled"><a><i class="iconbackward"></i></a></li>'; 61

62 Regel 209: 38. return '<li class="disabled"><a><i class="iconnext"></i></a></li>'; 39. in: 40. return '<li class="disabled"><a><i class="iconforward"></i></a></li>'; Regel 215: 44. return '<li class="disabled"><a><i class="iconlast"></i></a></li>'; 45. in: 46. return '<li class="disabled"><a><i class="icon-fastforward"></i></a></li>'; Neem daarnaast de volgende CSS op in het template.css bestand. 1. ul.pagination-list li a [class*="icon-"] { 2. opacity: 0.3; 3. } ul.pagination-list li a:hover [class*="icon-"] { 6. opacity: 0.5; 7. } Printscreen na aanpassingen Paginatie centreren op de pagina Voeg de onderstaande css declaraties toe in het template.css bestand om de paginatie te centreren. 1..pagination p.pull-right { 2. float: none; 3. text-align: center; 4. } pagination ul { 7. display: inherit; 8. text-align: center; 9. } pagination a, 62

63 12..pagination span { 13. float: none; 14. display: inline-block; 15. } Paginatie artikelen In deze tutorial stijlen we de paginatie van artikelen, die onderling zijn verbonden door dezelfde categorie. Om de paginatie te tonen stel Joomla dan als volgt in. 1. Ga naar Inhoud->Artikelen; 2. Klik in het topmenu op "Opties". U komt dan standaard in de opties voor Artikelen terecht; 3. Zoek naar "Toon navigatie". Deze moeten op "Toon" staan; 4. Kies voor "Opslaan en Sluiten". Indien nog geen artikel paginatie zichtbaar is op de frontend webpagina: 1. Ga naar Menu->Hoofdmenu en klik op de categorie blog menu item of menu item voor een Enkel artikel, afhankelijk van de situatie; 2. Klik op "Geavanceerde opties"; 3. Zoek naar "Toon navigatie" en zet deze op: "Gebruik Algemeen". 4. Kies voor "Opslaan en Sluiten". Met deze instelling worden de hierboven aangegeven algemene opties voor Artikelen aangehouden. Zorg dat bij het betreffende artikel ook deze optie op "Gebruik Algemeen staat". De artikel paginatie ziet er standaard als volgt uit. Bij het eerste artikel uit de categorie is alleen de rechter button zichtbaar en bij het laatste artikel uit de categorie alleen de eerste button. Om de buttons naast elkaar en links te laten lijnen pas dan de volgende css toe: 1. ul.pager { 2. text-align: left; 3. /*text-align: center;*/ 4. /*text-align: right;*/ ul.pager li.previous a, 7. ul.pager li.next a { 63

64 8. float: none; 9. display: inline-block; 10. margin-right: 20px; 11. /*margin-left: 20px;*/ 12. } Wanneer u de buttons wilt centeren of rechts wilt laten lijnen gebruik dan bij ul.pager de textalign: center resp. text-align: right. En kies bij rechts lijnen voor margin-left: 20px bij de CSS van ul.pager li.privious a, en ul.pager li.next a. Enkele pagina en pagina opsplitsing In deze tutorial stijlen we de elementen van een enkele pagina en de pagina opsplitsing. Enkele pagina Een enkele pagina ziet er in de Basis Template Joomla 3 er als volgt uit. 64

65 Deze pagina behoeft geen verdere aanpassing met CSS. Pagina opsplitsing Bij een pagina opsplitsing wordt een pagina verdeeld in meerdere deelpagina's door gebruik te maken van de Page break functie. Standaard wordt rechtsboven in de content van het artikel een pagina index en direct onder de content nog eens een extra paginatie getoond. Paginatie enkel artikel verbergen De paginatie direct onder de content is bedoeld om door de sub pagina's te navigeren en de paginatie daaronder is de paginatie om naar het volgende artikel te gaan in dezelfde categorie (zie Paginatie Enkel artikel). Dit kan verwarrend zijn voor de gebruiker. U kunt hier bijvoorbeeld de paginatie van een enkel artikel (de onderste paginatie) uit zetten door bij het menu-item naar dit artikel bij geavanceerde opties "Toon paginatie" op "Verberg" te zetten. Indien het menu-item een categorie blog betreft, worden alle paginaties van de individuele artikelen verborgen. Er bestaat de mogelijkheid om alleen bij een artikel opsplitsing bij geavanceerde opties de "Toon Paginatie" te verbergen en het menu item blogpagina bij artikel opties in te stellen "Gebruik artikel instellingen". 65

66 Paginatie pagina splitsing verbergen (niet aanbevolen) Indien u de navigatie van de pagina opsplitsing wilt verbergen lukt dit niet met Joomla instellingen, maar moet u CSS gebruiken. 1. div.pager { 2. display: none; 3. } De paginaindex een andere positie geven De pagina index bestaat uit een vermelding van het aantal deelpagina's (Pagina 1 van 2) en een aantal links naar de vervolg pagina's rechtsboven in de content. Wilt u deze bij elkaar plaatsen boven de pagina en de pagina vermelding los maken van de content dan kunt u de volgende CSS toepassen. 1. div.pull-right.article-index { 66

67 2. float: none; 3. width: 30%; 4. min-width: 220px; 5. } div.pagenavcounter { 8. margin-bottom: 20px; 9. } Print screen Om de pagina index onder de content te plaatsen is een template override noodzakelijk. Voorpagina / categorie blog In deze tutorial behandelen we de stijlen van de blog pagina (speciale en categorie artikelen) bij het toepassen van meerdere content kolommen. De basis instellingen voor een blog pagina kunt u vinden onder: 1. Inhoud->Artikelen->Opties (menu bovenin); 2. Aan de rechterzijde bovenin het scherm vindt u de tabbladen: Artikelen, Bewerkingsweergave, Categorie, Categorieën, Weergave blog / speciale artikelen, Lijstweergave, Gedeelde opties, Integratie en Rechten. Kies voor Weergave blog / speciale artikelen; Hier kunt u de standaard layout van uw blogpagina's configureren. # Hoofdartikelen: Kies het aantal artikelen dat u over de volle breedte wilt tonen. # Intro artikelen: Kies het aantal artikelen dat u daaronder wilt tonen, eventueel in kolommen. # Kolommen: Kies het aantal kolommen dat u voor de Intro-artikelen wilt instellen. # Links: Kies het aantal links dat u naar volgende niet getoonde artikelen wilt instellen. In het voorbeeld hebben we de volgende standaard configuratie aangehouden. 67

68 # Hoofdartikelen: 1. # Intro artikelen: 4. # Kolommen: 2. # Links: 4. Volgorde bij meerdere kolommen: Naar beneden. Deze instellingen kunnen door het menu item onder Geavanceerde Opties worden overschreven. In het voorbeeld laten we deze velden leeg. De pagina ziet er als volgt uit. De kolommen worden volledig gestijld door de Bootstrap classes en CSS. 68

69 Verschillende tekst lengtes per kolom Wanneer de lengte van de content per artikel sterk verschilt, zoals in bovenstaand voorbeeld Artikel 7 en 5, ontstaat er een groot "gat", in dit geval bij artikel 5. Hier is geen CSS oplossing voor. Wat u kunt doen om dit te voorkomen is een lees meer link plaatsen in Artikel 7, ter hoogte van het einde van de content van artikel 5. Het html model uit "Uw eigen Joomla 3 template maken -> Stap1: Maak een Bootstrap HTML ontwerp" Voor wie deze tutorial heeft gevolgd (zie Uw eigen Joomla 3 template maken -> Stap 1: Maak een Bootstrap HTML ontwerp) is een html model gemaakt, dat in Basis Template Joomla 3 kan worden overgenomen. Indien u een dergelijke layout voor uw blog pagina wilt maken volg dan onderstaande instellingen. De configuratie is als volgt. Het is een categorie blog pagina. # Hoofdartikelen: 0. # Intro artikelen: 3. 69

70 # Kolommen: 3. # Links: 0. Alle drie artikelen zijn uitgevoerd met een "lees meer" link op ongeveer dezelfde tekst lengte. Artikel details (Artikel informatie) is gedeactiveerd. Print en icoontjes zijn gedeactiveerd. Alle modules op de posities 7 en 8 zijn gedeactiveerd voor deze pagina. Gearchiveerde artikelen In deze tutorial kijken we naar de stijlen van de gearchiveerde artikelen. Het is niet noodzakelijk om voor deze artikelen aanvullende stijlen op te nemen. De gearchiveerde artikelen kunnen worden getoond via een menu-item (dit is niet de module gearchiveerde artikelen). Deze component toont een filter en een lijst van artikelen met introtekst. De lengte van de introtekst kan worden bepaald onder de geavanceerde opties van het menu item "Limiet introtekst". Standaard staat deze op 100 tekens. 70

71 Er zijn geen aanvullende stijlen nodig voor deze pagina. Contact en contactformulier In deze tutorial maken we een uitgebreid en beperkt contactformulier met contactgegevens en passen we enkele Bootstrap stijlen aan. Via een menu-item kunnen contact gegevens en het contact formulier van één contact persoon tonen. Hiervoor is het nodig dat u de component Contactpersonen heeft ingevuld voor minimaal één contactpersoon. Om alle gegevens van een contact te tonen kunnen we Joomla als volgt instellen. 1. Ga naar Componenten->Contactpersonen; 2. Kies "Opties" in de menubalk; U komt op een pagina met 8 tabbladen: Contactpersoon, Iconen, Categorie, Categorieën, Lijstweergave, Formulier, Integratie, Rechten. Onder ieder tabblad vindt u veel opties, die aan of uit gezet kunnen worden. In het voorbeeld zijn deze zoveel mogelijk op "ja" of "toon" gezet.zorg ervoor dat dezefde opties onder het menu item 71

72 voor de contactpersoon en de opties van de contactpersoon zelf op "Gebruik Algemeen" staan; 3. In het eerste tabblad Contactpersoon zijn onder "Weergave" 3 mogelijkheden om de contactgegevens en formulier te presenteren: Sliders, Tabs en Direct. Kies de presentatie die u het meest aanspreekt. In ons voorbeeld gebruiken we "Direct". 72

73 73

74 De presentatie van de contactgegevens zijn een beetje rommelig, echter het vergt een grote CSS ingreep, om deze consistenter te maken. We gaan hier niet verder op in, omdat deze gegevens zelden worden getoond. Contactformulier Wanneer u alleen een contactformulier wilt tonen, zet u alle opties van de Contactpersoon uit, behalve voor "Weergave" zet u op "Direct". U ziet nu alleen het contactformulier op de webpagina. De h3 koppen "Contactpersoon" en "Contactformulier" voegen hier niets toe. Om deze niet te tonen is de eenvoudigste oplossing om CSS toe te passen, die u kunt opnemen in het template.css bestand. 1. div.contact h3 { 2. display: none; 74

75 3. } In plaats van deze koppen gaan we naar het menu item van dit contactformulier- >Geavanceerde Opties->Paginaweergave opties. Als voorbeeld vullen we bij "Browser paginatitel" "Contact" in en bij "Paginakop" "Neem contact op met de webmaster". CSS aanpassingen Contactformulier Het formulier is ruim opgezet. Dit geldt voor alle formulieren van Joomla 3. Wanneer u een compactere versie wilt moet u Bootstrap declaraties overschrijven. Dit zijn de originele Bootstrap declaraties. 1. legend { 2. -moz-border-bottom-colors: none; 3. -moz-border-left-colors: none; 4. -moz-border-right-colors: none; 75

76 5. -moz-border-top-colors: none; 6. border-color: -moz-use-text-color -moz-use-text-color #E5E5E5; 7. border-image: none; 8. border-style: none none solid; 9. border-width: 0 0 1px; 10. color: #333333; 11. display: block; 12. font-size: 21px; 13. line-height: 40px; 14. margin-bottom: 20px; 15. padding: 0; 16. width: 100%; 17. } form-horizontal.control-label { 20. float: left; 21. padding-top: 5px; 22. text-align: right; 23. width: 140px; 24. } form-horizontal.control-group { 27. margin-bottom: 20px; 28. } form-horizontal.form-actions { 31. padding-left: 160px; 32. } form-actions { 35. background-color: #F5F5F5; 36. border-top: 1px solid #E5E5E5; 37. margin-bottom: 20px; 38. margin-top: 20px; 39. padding: 19px 20px 20px; 40. } We kiezen nu voor een compactere weergave. We maken de stijlen specifiek voor dit formulier, zonder andere formulieren te beïnvloeden door het toevoegen van de class contact. Voeg onderstaande declaraties to aan uw template.css bestand, wanneer u een compactere weergave van het formulier wenst. 1. div.contact legend { 2. font-size: 14px; 3. line-height: 20px; 4. margin-bottom: 10px; 5. padding: 0 0 5px 0; 6. } 76

77 7. 8. div.contact.form-horizontal.control-label { 9. padding-right: 5px; 10. text-align: left; 11. width: 180px; 12. } div.contact.form-horizontal.control-group { 15. margin-bottom: 10px; 16. } div.contact.form-horizontal.form-actions { 19. padding-left: 0; 20. } div.contact.form-actions { 23. background: none; 24. border-top: none; 25. margin-bottom: 10px; 26. margin-top: 10px; 27. padding: 0; 28. } Gebruikers 77

78 In deze tutorial stijlen we diverse gebruikersfuncties, zoals het login formulier, gebruikersregistratie en gebruikersprofiel. Login Via een menu item kan een login scherm worden getoond in de content. Dit is niet de login module. Indien u geen afbeelding of login tekst wilt of deze wilt wijzigen 1. Ga naar het menu-item voor dit inlogscherm en kies voor Geavanceerde opties; 2. Zet de "Inlogbeschrijving" op "Verberg" en kies bij de Inlog afbeelding op "Wissen"; 3. Doe dit eventueel ook voor de "Uitlog tekst" en "Uitlog afbeelding". 4. U kunt eventueel een andere heading boven de pagina plaatsen via de menu optie- >Geavanceerd->Paginaweergave opties. 78

79 Registratie Bezoekers kunnen zich op uw website registreren via diverse functies. Via een aangemaakt menu item->registratieformulier; Via de links bij het loginformulier (zowel module als component) "Nog geen Account" of "Registreer". Het registratieformulier ziet er standaard als volgt uit. 79

80 We kunnen dit formulier, net als het contact formulier, compacter weergeven. We maken het formulier uniek door de toevoeging van de class registration. 1. div.registration legend { 2. margin-bottom: 10px; 3. padding: 0 0 5px 0; 4. } div.registration.form-horizontal.control-label { 7. padding-right: 5px; 8. text-align: left; 9. width: 180px; 10. } div.registration.form-horizontal.control-group { 13. margin-bottom: 10px; 14. } 80

81 div.registration.form-horizontal.form-actions { 17. padding-left: 0; 18. } div.registration.form-actions { 21. background: none; 22. border-top: none; 23. margin-bottom: 10px; 24. margin-top: 10px; 25. padding: 0; 26. } Print screen Gebruikersnaam vergeten en wachtwoord vergeten Aangepaste CSS 1. div.remind.form-actions, 2. div.reset.form-actions { 3. background: none; 4. border-top: none; 5. margin-bottom: 10px; 6. margin-top: 10px; 7. padding: 0; 81

82 8. } div.remind.form-horizontal.control-group, 11. div.reset.form-horizontal.control-group { 12. margin-bottom: 10px; 13. } div.remind.form-horizontal.control-label, 16. div.reset.form-horizontal.control-label { 17. padding-right: 5px; 18. text-align: left; 19. width: 180px; 20. } Gebruikersprofiel Wanneer u gebruikers toestaat hun profiel in te zien en aan te passen, ziet het formulier er standaard als volgt uit. 82

83 De linkerkolom is slechts gedeeltelijk leesbaar bij grotere viewports. De Bootstrap CSS declaraties zijn: 1..dl-horizontal dt { 2. float: left; 3. width: 120px; 4. clear: left; 5. text-align: right; 6. overflow: hidden; 7. text-overflow: ellipsis; 8. white-space: nowrap; 9. } dl-horizontal dd { 12. margin-left: 130px; 13. } De linkerkolom (.dl-horizontal dt) en rechterkolom (.dl-horizontal dd) willen we onder elkaar plaatsen, zodat er maximale ruimte is voor de tekst. 1. div.profile.dl-horizontal dt { 2. float: none; 3. width: auto; 4. text-align: left; 5. white-space: normal; 6. } div.profile.dl-horizontal dd { 83

84 9. margin: px 0; 10. } Bewerk gebruikers profiel Het scherm voor het bewerken van het gebruikers profiel lijkt op een contact of registratie formulier. We passen hier dezelfde stijlen toe en maken deze geldig voor alleen deze formulieren met de class profile. Daarnaast verbergen we de tekst "Optioneel" in het formulier. Deze tekst staat in geen enkel ander formulier en is naar ons idee geen noodzakelijke vermelding. 1. div.profile-edit legend { 84

85 2. margin-bottom: 10px; 3. padding: 0 0 5px 0; 4. } div.profile-edit.form-horizontal.control-label { 7. padding-right: 5px; 8. text-align: left; 9. width: 180px; 10. } div.profile-edit.form-horizontal.control-group { 13. margin-bottom: 10px; 14. } div.profile-edit.form-horizontal.form-actions { 17. padding-left: 0; 18. } div.profile-edit.form-actions { 21. background: none; 22. border-top: none; 23. margin-bottom: 10px; 24. margin-top: 10px; 25. padding: 0; 26. } div.profile-edit.optional { 29. display: none; 30. } 85

86 Module stijlen bepalen en wijzigen In Joomla 3 kunt u module stijlen wijzigen in het index.php bestand van uw actieve template, maar ook bij geavanceerde module opties. In het index.php bestand van de template wordt een positie als volgt aangegeven: 1. <jdoc:include type="modules" name="naam positie" style="stijl" /> 86

87 U vindt meer informatie over het gebruik van de attributen type, name, style op pagina: Uw eigen Joomla 3 template maken -> Stap 3: De Basis Template aanpassen -> De Basis Template bestanden -> Hoofdstuk: Wat is de Joomla code voor een positie?. In dit onderdeel gaat het vooral om het attribuut "style" van de modules. Nieuw in Joomla 3 is dat de "style", zoals dat is aangegeven in de index.php, kan worden overschreven bij de module opties. Als voorbeeld nemen we hier de style="well". In de Basis Template Joomla 3 is in het index.php bestand deze module stijl toegepast op position-7 en position-8. U kunt natuurlijk het index.php bestand aanpassen en de style attribuut wijzigen, maar dus ook overschrijven bij module opties. 1. <jdoc:include type="modules" name="position-7" style="well" /> U kunt deze stijl van bijvoorbeeld de "Laatste Nieuws" module, geplaatst op position-7 of position 8, overschrijven bij: Extensies->Modulebeheer->Laatste Nieuws->Opties->Geavanceerde opties.->modulestijl. Standaard is deze ingesteld op "Overgenomen" van de template index.php. In dit voorbeeld is dat "well", een Bootstrap stijl. De stijlen zijn gedefinieerd in de bestanden: template/system/html/module.php (standaard Joomla module stijlen) en template/basetemplate-joomla3/html/modules.php (aanvullende module stijlen, waaronder de stijl "well"). Meer informatie over de stijl "well" kunt u vinden op de Bootstrap website (zie Deze stijl plaatst een grijze achtergrond met afgeronde hoeken rond de module. In ons voorbeeld ziet bijvoorbeeld de module Laatste Nieuws er standaard als volgt uit. Wanneer u in Joomla onder de geavanceerde opties de module stijl wijzigt in "none", krijgt u dit te zien. 87

88 Bij style="none" wordt geen enkele stijl toegepast en wordt de module heading niet getoond, ook al staat deze bij de module opties op "Toon". Bij de stijl "xhtml" wordt er HTML code om de module heen geplaatst, een div met de class "moduletable" met een optionele "moduleclass suffix" en een module titel h3. U kunt zelf de andere stijlen uitproberen via de moduleopties. In de Basis Template Joomla 3 zijn nog een aantal speciale stijlen opgenomen: specialgrey, specialblue, specialred, specialgold. Deze stijlen worden beheerd in het template bestand html -> modules.php. U kunt deze stijl voor de module als volgt instellen. 1. Ga naar Extensies->Modulebeheer->Kies de menu module die u wilt aanpassen- >Opties->Geavanceerde opties. 2. Selecteer Modulestijl ->specialgrey of specialblue of specialred of specialgold. 3. Vul niets in bij Module Class Achtervoegsel. Als voorbeeld laten we hier de specialblue stijl zien bij deze module. U kunt zelf de andere special stijlen uitproberen. Kruimelpad Stijl de kruimelpad module met een icoontje via een template override of alleen met CSS. Standaard ziet het kruimelpad er als volgt uit. In de CSS ontbreekt het incoontje op de beginpositie voor "Home". Het icoontje is wel als class opgenomen in de structuur. 1. ul.breadcrumb li.active span.divider icon-location hastooltip U bevindt zich hier: li a.pathway Home

89 13. span.divider img /media/system/images/arrow.png li a.pathway Lists span.divider img /media/system/images/arrow.png li span De class die we hier bedoelen is span.icon-location. In de Bootstrap CSS bestanden komt de class icon-location helemaal niet voor. Wel is in de CSS van Bootstrap icon-home opgenomen. U heeft nu 2 opties: 1. u maakt een template override of 2. u neemt aangepaste CSS op in uw template.css bestand. Template override 1. Maak een nieuwe map mod_breadcrumbs aan in: templates/uwtemplatemaphtml/; 2. Kopieer default.php in de map modules/mod_breadcrumbs/tmpl/ naar templates/uwtemplatemaphtml/mod_breadcrumbs; 3. Open het kopie bestand default.php in uw templatemap en zoek naar icon-location (regel 20). Wijzig icon-location in icon-home en sla het bestand op. Wij raden u aan om zo min mogelijk gebruik te maken van template overrides, zeker nu Joomla 3 nog vaak de bron documenten aanpast. Bij iedere update moet u dan uw template override mogelijk ook aanpassen. CSS U kunt ook, in plaats van een template override, de volgende CSS declaratie opnemen in uw template.css bestand. 1..icon-location { 2. background-position: 0-24px; 3. } 89

90 Wijzigen achtergrondkleur De lichtgrijze achtergrondkleur kunt u wijzigen voor de class "breadcrumb". 1..breadcrumb { 2. /* Vul voor de standaard waarde #F5F5F5 een andere kleur in */ 3. background-color: #F5F5F5; /* Geen achtergrond + correctie voor margins en padding */ 6. background: none; 7. margin: px 0; 8. padding: 0; 9. } Ander scheidingsteken Standaard is het scheidingsteken een afbeelding arrow.png uit de map /media/system/images/. Deze afbeelding kunt u overschrijven door een eigen afbeelding met dezelfde naam te plaatsen in de uw template map -> images -> system. Als voorbeeld hebben we hier de Bootstrap icon-arrow-right uitgesneden uit de afbeelding glyphicons-halflings.png (media/jui/img). IE8 fix Voor IE8 is het noodzakelijk om voor de list-items van het kruimelpad een display: inline toe te passen, om de items naast elkaar weer te geven. Deze CSS kunt u opnemen in het IE6 CSS bestand. 1. /* IE8 fix - Bootstrap override*/ 2..breadcrumb li { 3. display: inline; 4. } Taalkeuze meertalige website Volg eerst de Video tutorial van deze website (zie Joomla Video Tutorials -> Meertalige website). Deze tutorial is gebaseerd op Joomla 2.5, maar werkt in Joomla 3 precies hetzelfde. Pas daarna stijlen toe voor de taal vlaggen. Wanneer u de tutorial op een correcte wijze heeft uitgevoerd kunt u nog de vlaggen stijlen met CSS. De vereenvoudigde html structuur is als volgt. 90

91 1. div.languages 2. div.mod-languages 3. ul.lang-inline 4. li.lang-active a img 5. li a img De vlaggen groter maken met CSS De vlaggen hebben standaard een afmeting van 18 x 12 pixels. Wanneer we bijvoorbeeld de vlaggen 21 x 14 pixels (de verhouding moet blijven kloppen) nemen we de volgende CSS op in template.css. 1. div.mod-languages ul li a img { 2. width: 21px; 3. height: 14px; 4. } Vlaggen afbeeldingen overschrijven Wanneer u de vlaggen groter maakt worden de afbeeldingen vager. U kunt ook nieuwe afbeeldingen plaatsen, die de bestaande afbeeldingen overschrijven. Maak in de map templates -> uw template map -> images een nieuwe map aan mod_languages. Plaats in deze map de vlagafbeeldingen (gif) met exact dezelfde naam. Wij hebben afbeeldingen gemaakt van 36 x 24 pixels (en.gif en nl.gif). Border rond de vlaggen met hover en active status 1. div.mod-languages ul li a img { 2. border: 1px #ccc solid; 3. padding: 1px; 4. } div.mod-languages ul li:hover a img, 7. div.mod-languages ul li.lang-active a img { 8. border: 1px #333 solid; 9. padding: 1px; 10. } De vlaggen rechts laten lijnen op de pagina 1. div.mod-languages ul { 2. text-align: right; 3. } 91

92 Zoek Module In deze tutorial stijlen we de zoek module en de slim zoeken module. Daarnaast stijlen we de zoek resultaten pagina. Er zijn 2 zoek componenten en modules in Joomla. De "gewone" zoekmachine en de "Slim zoeken" module. Module zoeken 1. Activeer de module zoeken of indien geen module aanwezig is maak een nieuwe module zoeken: Extensies->Modulebeheer->Nieuw->Zoeken; 2. Geef de module een titel en plaats deze op bijvoorbeeld position-4 (basetemplate Joomla 3) of een andere positie van uw keuze. In ons voorbeeld is er al een module geplaatst op position-4, de taalselectie met vlaggen. Indien u een meertalige website maakt, hebben we nu dus 2 modules op position-4; 3. In ons voorbeeld hebben we de zoekmodule volgens de standaard opties ingesteld, behalve: Zoekknop: Ja, Positie knop: rechts, Zoekknop afbeelding: Nee, Knoptekst: Zoek. 4. Sla de wijzigingen op. Om de zoekmodule en de taalkeuze module op één lijn te krijgen passen we de volgende CSS toe. 1. div.mod-languages, 2. div.search { 3. float: right; 4. } div.search { 7. margin-right: 15px; 8. } 92

93 Module Slim Zoeken Om deze module te kunnen gebruiken moet u eerst de content van de website indexeren. Components->Slim zoeken->indexeren (links boven in het scherm). Voor andere opties raadpleeg de Joomla documentatie over dit onderwerp. We depubliceren de zoekmodule en plaatsen op position-4 de Slim zoeken module. Deze module heeft een andere HTML structuur dan de gewone zoekmodule. Om het zoekvenster ook rechts naast de vlaggen te plaatsen, passen we de volgende CSS toe. 1. div.mod-languages, 2. form.form-search { 3. float: right; 4. } form.form-search { 7. margin-right: 15px; 8. } Zoekresultaten pagina De zoekresultaten pagina van de slim zoeken module ziet er meteen goed gestijld uit. 93

94 Zoekresultaten pagina van de "gewone" zoekmodule 94

95 Hier is door Joomla duidelijk minder aandacht aan besteed. De resultaten "plakken" aan elkaar en per resultaat is geen achtergrondkleur verschil en daardoor moeilijker leesbaar. De structuur van een zoekrsultaat is: 1. dl.search-results 2. dt.result-title 1. a Article dd.result-category 4. span.small (Newsflash) 5. dd.result-text 6. span.highlight Lorem 7. ipsum dolor sit amet dd.result-created Gemaakt op... We kunnen met CSS de lijst verbeteren door: meer ruimte tussen de individuele zoekresultaten; meer ruimte tussen de titel en content; kleinere letter voor result-created. 1. dl.search-results dt.result-title { 2. margin: 15px 0 5px 0; 3. padding: 5px 0; 4. border-top: 1px #ddd solid; 5. } dl.search-results dd.result-created { 8. font-size: 11px; 9. } 95

96 Sidebar menu Deze tutorial behandeld het plaatsen van een responsive menu in een sidebar van de Basis Template Joomla 3. U heeft meerdere opties om dit menu te stijlen met Bootstrap classes of uw eigen stijlen. Standaard is de menu stijl van een sidebar "well". Dit is een Bootstrap stijl, die er als volgt uitziet. 96

97 Het menu heeft sub-items en als u de menu override heeft toegepast in de Basetemplate Joomla 3 dan zien de subitems er als volgt uit. Andere stijl opties Met behulp van Bootstrap zijn nog andere stijlen toe te passen zonder dat u CSS nodig heeft. Zie voor meer informatie over de toepassingen. Tab menu voor de rechter of linker sidebar De Bootstrap structuur voor dit menu ziet er als volgt uit. 97

98 1. div.tabbable tabs-left 2. ul.nav.nav-tabs Voor een rechter tab menu wijzigt u het woord left in right. Om deze structuur te maken moet de Module Class Achtervoegsel instellen met een tabbable tabs-left of tabbable tabs-right en een Menu Class achtervoegsel met een nav-tabs (het achtervoegsel nav is al standaard aanwezig). 1. Ga naar Extensies->Modulebeheer->Kies de menu module die u wilt aanpassen- >Opties->Geavanceerde opties; 2. Kies Modulestijl -> xhtml; 3. Vul in bij Menu Class Achtervoegsel->[spatie]nav-tabs; 4. Vul in bij Module Class Achtervoegsel->[spatie]tabbable tabs-left. De spatie is nodig om de achtervoegsels goed in te stellen (wordt mogelijk nog door Joomla gecorrigeerd). 98

99 Om het menu over de volle breedte van de sidebar te tonen en de tabs ook bij kleinere viewports goed te tonen passen we de volgende CSS toe, die u kunt opnemen in het template.css bestand. 1..tabs-left.nav-tabs, 2..tabs-right.nav-tabs { 3. float: none; 4. margin-right: 0; 5. margin-left: 0; 6. } tabs-left >.nav-tabs >.active a, 9..tabs-left >.nav-tabs >.active a:hover { 10. border: 1px #ddd solid; 11. border-right: none; 12. } tabs-right >.nav-tabs >.active a, 15..tabs-right >.nav-tabs >.active a:hover { 16. border: 1px #ddd solid; 17. border-left: none; 18. } 99

100 Nav-list Een ander menu type is de nav-list. De Bootstrap structuur hiervoor is: 1. ul.nav.nav-list 2. li a Bij een nav list stelt u de geavanceerde opties van de menu module als volgt in. 1. Kies Modulestijl -> xhtml; 2. Vul in bij Menu Class Achtervoegsel->[spatie]nav-list; 3. Vul in bij Module Class Achtervoegsel niets in. De spatie is nodig om de achtervoegsels goed in te stellen (wordt mogelijk nog door Joomla gecorrigeerd). Wanneer er nog andere modules onder staan kan er een bottom marge worden ingesteld voor dit menu (geldt voor de basetemplate joomla 3). 100

101 1. div#sidebarleft div.moduletable 2. div#sidebarright div.moduletable { 3. margin-bottom: 20px; 4. } Nav-stacked nav-pills Een ander Bootstrap menu type is de nav-stacked nav-pills menu. De Bootstrap structuur is als volgt: 1. ul.nav.nav-pills.nav-stacked Bij een nav-stacked nav-pills stelt u de geavanceerde opties van de menu module als volgt in. 1. Kies Modulestijl -> xhtml; 2. Vul in bij Menu Class Achtervoegsel->[spatie]nav-pills nav-stacked; 3. Vul in bij Module Class Achtervoegsel niets in. De spatie is nodig om de achtervoegsels goed in te stellen (wordt mogelijk nog door Joomla gecorrigeerd). Speciale stijlen van de Basis Template Joomla 3 In de Basis Teamplate Joomla 3 zijn nog 4 speciale stijlen opgenomen (zie Module Stijlen): specialgrey, specialblue, specialred en specialgold. U stelt de geavanceerde opties van de menu module als volgt in. 1. Kies Modulestijl ->specialgrey, specialblue, specialred of specialgold; 2. Vul niets in bij Menu Class Achtervoegsel; 3. Vul niets in bij Module Class Achtervoegsel. 101

102 De CSS voor deze stijlen zijn te vinden in het template.css bestand van de Basis Template Joomla 3. Achtereenvolgens worden de speciale modules getoond, specialgrey, specialblue, specialred en specialgold. Introductie CSS3 Joomla 3 met Bootstrap maakt gebruik van CSS3. De belangrijkste CSS3 declaraties zijn in deze tutorial opgenomen met voorbeelden hoe deze worden toegepast. Meer informatie over CSS3 kunt u vinden op de CSS3 introductie pagina van W3Schools en een overzicht van de browsers die CSS3 ondersteunen: W3schools CSS3 Browser support CSS3. De belangrijkste CSS3 stijlen, die Bootstrap gebruikt en door moderne browsers worden ondersteund (IE9 (gedeeltelijk), IE10, Firefox, Google Chrome, Safari, Opera) worden in deze tutorial besproken: border-radius, box-shadow, opacity, 102

103 (Gradient) background, responsive achtergrond afbeelding. Voor IE8 en IE9 (de niet standaard ondersteunde stijlen) kunt u de PIE scripts activeren. Zie dit hoofdstuk -> CSS3 PIE voor IE8 en IE9. Border radius De border radius voegt afgeronde hoeken toe aan een element. Deze CSS3 declaratie wordt veel toegepast in Joomla 3 Bootstrap. Op deze pagina een tutorial. Voor gedetailleerde informatie zie W3C Border radius. 1. border-radius: 1-4 waarden in px of %; De border-radius bestaat uit 4 waarden, voor elke hoek een waarde in de volgorde: top links, top rechts, onder rechts en onder links in pixels of %. Pixelwaarden worden beter ondersteund door browsers van mobiele apparaten dan %, U wordt aangeraden om pixels te gebruiken. Standaard waarde van de border-radius is 0. Voorbeeld 1. class of element { 2. border-radius: 40px 30px 0 20px; 3. } Border radius wordt meestal toegepast met 4 gelijke waarden, bijvoorbeeld 20px. De verkorte schrijfwijze is dan: 1. class of element { 2. border-radius: 20px; 3. } Browser support Border radius wordt door de moderne browsers van mobiele telefoons, tablets en Win/Mac PC's browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 9 en 10) ondersteund. IE8 wordt niet ondersteund. Voor IE8 en IE9 (de niet standaard ondersteunde stijlen) kunt u de PIE scripts activeren. Zie dit hoofdstuk -> CSS3 PIE voor IE8 en IE9. 103

104 Box shadow De box shadow declaratie voegt een schaduw toe aan een element. Deze CSS3 declaratie wordt veel toegepast in Joomla 3 Bootstrap. Op deze pagina een tutorial. Voor gedetailleerde informatie zie W3C box-shadow. 1. box-shadow: h-shadow v-shadow blur spread color inset; De box-shadow bestaat uit maximaal 6 waarden. h-shadow Vereiste waarde. Het aantal pixels van de schaduw in horizontale richting. Een positieve waarde geeft een schadow naar rechts, een negatieve waarde naar links. v-shadow Vereiste waarde. Het aantal pixels van de schaduw in verticale richting. Een positieve waarde geeft een schadow naar beneden, een negatieve waarde naar boven. blur Optionele waarde. Het aantal pixels dat de schaduw wordt vervaagd. Negatieve waarden zijn niet toegestaan. Als de waarde 0 is wordt de schaduw niet vervaagd, maar scherp weergegeven. De blur waarde voegt pixels toe aan de grootte van de schaduw. spread Optionele waarde. Het aantal pixels van de schadow, dat wordt vergroot bij een positieve waarde of verkleind bij een negatieve waarde. color Optionele waarde. De kleur van de schaduw. Deze waarde kan worden aangegeven als: hexadecimale waarden, bijvoorbeeld #000 voor zwart; RGB kleuren, bijvoorbeeld: rgb(0,0,0) voor zwart; RGBA kleuren (kleur en de transparantie waarde van de kleur), bijvoorbeeld: rgba(0,0,0,0.2) voor 20% transparantie van zwart. Om kleuren te selecteren maak dan gebruik van de Color Zilla Kleurenkiezer extensie voor Firefox (zie videotutorial over Firefox). inset Standaard is de schaduw naar buiten gericht, inset richt de schaduw naar binnen. Standaard waarde 104

105 Standaard waarde van de box-shadow is "none". Voorbeelden Een scherpe schaduw (zonder blur effect) van 5px naar rechts en beneden 1. class of element { 2. box-shadow: 5px 5px rgba(0,0,0,0.2); 3. } Een vervagende schaduw van 5px naar rechts en beneden (grootte van de schadow is dan 10px 1. class of element { 2. box-shadow: 5px 5px 5px rgba(0,0,0,0.2); 3. } Een vervagende schaduw van 5px rondom Bij het gebruik van schaduwen kan het effect worden verhoogd door ook een border te plaatsen, die de overgang van het element naar schaduw accentueert. 1. class of element { 2. box-shadow: 0 0 5px 4px rgba(0,0,0,0.2); 3. border: 1px rgba(0,0,0,0.1) solid; 4. } 5. Een vervagende schaduw rondom van 5px en een spread van 4px (totaal 9px) in combinatie met een border radius Bij het gebruik van schaduwen kan het effect worden verhoogd door ook een border te plaatsen, die de overgang van element naar schaduw accentueert. 1. class of element { 2. box-shadow: 0 0 5px 4px rgba(0,0,0,0.2); 3. border: 1px rgba(0,0,0,0.1) solid; 4. border-radius: 10px; 5. }

106 Een vervagende schaduw van 9px naar binnen gericht in combinatie met een border radius 1. class of element { 2. box-shadow: 0 0 5px 4px rgba(0,0,0,0.2) inset; 3. border: 1px rgba(0,0,0,0.1) solid; 4. border-radius: 10px; 5. } Twee vervagende schaduwen, één naar binnen en één naar buiten gericht in combinatie met een border radius 1. class of element { 2. box-shadow: 0 0 5px 4px rgba(0,0,0,0.2) inset, 0 0 5px 4px rgba(0,0,0,0.2); 3. border: 1px rgba(0,0,0,0.1) solid; 4. border-radius: 10px; 5. } Browser support Box shadow Box shadow wordt door de moderne browsers van mobiele telefoons, tablets en Win/Mac PC's browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 9 en 10) ondersteund. IE8 wordt niet ondersteund. Voor IE8 en IE9 (de niet standaard ondersteunde stijlen) kunt u de PIE scripts activeren. Zie dit hoofdstuk -> CSS3 PIE voor IE8 en IE9. Browser support RGB en RGBA colors RGB kleuren worden door de moderne browsers van mobiele telefoons, tablets en Win/Mac PC's browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 9 en 10) ondersteund. Ook IE8 ondersteunt de rgb kleurnotatie. RGBA, kleuren met transparantie, worden door de moderne browsers van mobiele telefoons, tablets en Win/Mac PC's browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 9 en 10) ondersteund. IE8 ondersteunt dit niet. Voor IE8 en IE9 (de niet standaard ondersteunde stijlen) kunt u de PIE scripts activeren. Zie dit hoofdstuk -> CSS3 PIE voor IE8 en IE9. Opacity De CSS opacity eigenschap maakt een element en alles in het element transparant. Deze eigenschap wordt ook in Joomla 3 Bootstrap toegepast. Hier volgt een tutorial. Voor gedetailleerde informatie zie W3C.Transparency. 1. opacity: value; 106

107 Value: De opacity kan een waarde hebben van 0 (volledig transparant) tot en met 1 (standaard waarde: niet transparant). Toepassingen Achtrgrondkleur 1. element of class { 2. background-color: #ff0000; /* Rood */ 3. opacity: 0.2; /* Transparantie 20% */ 4. } Achtrgrondkleur opacity hover effect Hover de muis over het rode blok. 1. element of class { 2. background-color: #ff0000; 3. opacity: 1; element of class:hover { 6. background-color: #ff0000; 7. opacity: 0.2; 8. } Achtergrond afbeelding met hover effect De opacity kan ook worden toegepast op afbeeldingen (img) en andere elementen. 1. element of class { 2. background: url(images/sampledata/fruitshop/apple.jpg) 0 0 norepeat; 3. opacity: 1; element of class:hover { 6. background: url(images/sampledata/fruitshop/apple.jpg) 0 0 norepeat; 7. opacity: 0.5; 8. } Browser support 107

108 Opacity wordt door de moderne browsers van mobiele telefoons, tablets en Win/Mac PC's browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 9 en 10) ondersteund. Voor IE8 wordt een filter gebruikt voor opacity. De opacity eigenschap wordt bij IE8 ook ondersteund met PIE scripts. Zie dit hoofdstuk -> CSS3 PIE voor IE8 en IE9. 1. class of element } 2. filter: alpha(opacity=50); /* IE8 filter opacity 50% */ 3. } Gradient / kleurverloop De gradient eigenschap voegt een kleurverloop toe aan de achtergrond van een element. Joomla 3 Bootstrap maakt hier veel gebruik van. Hier een tutorial. Dit is wel de meest inconsistent CSS3 eigenschap, die voor bijna iedere browser om een andere declaratie vraagt. Daarom maken we gebruik van de Gradient Generator van Color Zilla, een extensie van Firefox (zie Videotutorial tutorial Firefox). Er zijn 2 verschillende soorten gradients: lineaire gradient: Dit geeft een rechtlijnig kleurverloop. Dit kan zijn van de top naar de bodem of van links naar rechts of diagonaal. radial gradient: Dit geeft een cirkelvormig kleurverloop. De W3C CSS selector/declaratie 1. /* Linear gradient */ 2. background: linear-gradient(to direction, color percentage,color percentage); /* radial gradient */ 5. background: radial-gradient(ellipse at center, color percentage, color percentage; De bovenstaande standaard declaratie van W3C werkt in bijna geen enkele browser. Bijvoorbeeld voor Firefox moeten we de prefix -moz- en voor Safari en Chrome -webkittoevoegen. Ook de opbouw en schrijfwijze van de declaratie zelf is verschillend in browsers. Voorbeeld gemaakt met de Color Zilla Gradient Generator Een lineaire gradient van links naar rechts. De declaraties zijn gekopieerd uit de Color Zilla extensie van Firefox. Zie hiervoor ook de video tutorial. 1. element or class { 2. /* Firefox 6+ */ 3. background: -moz-linear-gradient(left, rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%);

109 5. /* Chrome,Safari4+ */ 6. background: -webkit-gradient(linear, left top, right top, colorstop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome10+,Safari5.1+ */ 9. background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera */ 12. background: -o-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE9 */ 15. background:url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wii APgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEw MCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSY XRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdG VkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHg ypsixmdaliib5mj0imcuipgogicagphn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0i IzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiI HN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3 JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZml sbd0idxjskcnncmfklxvjz2ctz2vuzxjhdgvkksiglz4kpc9zdmc+); 16. filter: none; /* IE10 */ 19. background: -ms-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */ 22. background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); 23. } /* IE8 opnemen in het aparte CSS bestand voor IE8 */ 26. element or class { 27. filter: progid:dximagetransform.microsoft.gradient ( startcolorstr='#1e5799', endcolorstr='#7db9e8',gradienttype=1 ); 28. } Browser support voor Internet Explorer 8 en 9 Internet Explorer 8 hanteert een geheel andere code met gebruik van een filter. Internet Explorer 9 gebruikt een data image (svg), waarbij het filter, dat nodig is voor IE8, voor IE9 weer uitgeschakeld moet worden. Indien u geen gebruikt maakt van het PIE script moet u dus voor IE8 en IE9 deze instructies volgen. Wanneer u wel gebruikt maakt van PIE kunt u het hoofdstuk ->CSS3 PIE voor IE8 en IE9 volgen. 109

110 Responsive achtergrond afbeelding Met deze CSS technieken kunt u een achtergrond afbeelding responsive maken. De achtergrond afbeelding verkleint of vergroot afhankelijk van de grootte van het element. Hier volgt een tutorial. "Seamless" (doorlopende) achtergrond afbeelding Dit is een relatief kleine achtergrond afbeelding die in horizontale en/of vertikale richting wordt herhaald. Vaak is dit een bepaald patroon. Er is een grote keuze aan patroon achtergrond afbeeldingen gratis te downloaden van het internet, bijvoorbeeld of Voorbeeld van een seamless achtergrond afbeelding CSS We hebben de achtergtond afbeelding geplaatst in het html model (zie Uw eigen Joomla 3 template maken->stap 1 Maak een Bootstrap HTML ontwerp) en aangevuld met onderstaande CSS. 1. body { 2. padding-top: 10px; 3. padding-bottom: 40px; 4. background: url(../images/seamless-grass.jpg) top center repeat; 5. } div#wrapper.container { 8. border: 1px #e4e4e4 solid; 9. padding: 20px; 10. border-radius: 4px; 11. box-shadow: px #000; 110

111 12. background-color: #fff; 13. opacity: 0.9; 14. } PC desktop printscreen (1600px) Mobiele telefoon viewport 340px "Fixed" achtergrond afbeelding 111

112 Wanneer de afbeelding een vaste hoogte en breedte heeft, die horizontaal of verticaal niet kan worden herhaald, kan de fixed achtergrond afbeelding methode worden gebruikt. Hier is een afbeelding gebruikt van 1920 x 1152 pixels. CSS 1. body { 2. padding-top: 10px; 3. padding-bottom: 40px; 4. background: url(../images/fixed-bg.jpg) top center no-repeat fixed; 5. -webkit-background-size: cover; /* Safari en Chrome */ 6. -moz-background-size: cover; /* Old Firefox */ 7. -o-background-size: cover; /* Opera */ 8. background-size: cover; /* W3C */ 9. } div#wrapper.container { 12. border: 1px #e4e4e4 solid; 13. padding: 20px; 14. border-radius: 4px; 15. box-shadow: px #000; 16. background-color: #fff; 17. opacity: 0.8; 18. } De CSS declaratie background-size: cover zorgt ervoor dat de achtergrond afbeelding altijd het beeldscherm of element bedekt (covered), echter proportioneel wordt verkleind op de kortste afmeting (hoogte of breedte), waardoor de afbeelding niet helemaal wordt getoond bij andere verhoudingen van het beeldscherm of element dan de verhouding breedte/hoogte van de afbeelding zelf. PC desktop printscreen (1600px x 900px) 112

113 De afbeelding is in de breedte volledig zichtbaar, de onderzijde van de foto is afgesneden. Mobiele telefoon printscreen (480px x 850px) De afbeelding is in de hoogte volledig zichtbaar en gecentreerd, waardoor een groot deel van de linker en rechterzijde is afgesneden. Browser support De meeste browsers ondersteunen de background-size: cover declaratie inclusief Internet Explorer 9 en 10. Internet Explorer 8 ondersteunt background-size niet. U kunt dan kiezen om een op maat gemaakte achtergrond afbeelding voor IE8 te maken of het PIE script toe te passen zie dit hoofdstuk CSS3 PIE voor IE8 en IE9. CSS3 PIE voor IE8 en IE9 Gebruik het PIE script voor IE8 en IE9 CSS3 stijlen. Internet Explorer 8 ondersteunt standaard geen CSS3, Internet Explorer 9 ondersteunt wel CSS3 behalve de gradient achtergrond. CSS3 selector IE8 IE9 border-radius box-shadow opacity multiple background gradient U heeft de keuze om het gebrek aan CSS3 ondersteuning voor IE8 en gedeeltelijk IE9 te accepteren. IE8 is alweer een verouderde browser voor Windows XP. De gebruikers van IE8 hebben immers de keuze om een andere moderne browser te installeren, bijvoorbeeld Firefox of Chrome, die CSS3 wel ondersteunen. Velen hebben dit ook gedaan. Het aantal gebruikers van IE8 ligt wereldwijd al onder de 10% (zie Browser trends mei 2013). Indien u toch nog de Internet Explorer 8 gebruikers tevreden wilt stellen kunt u PIE scripts gebruiken. 113

114 CSS3 PIE (Progressive Internet Explorer) PIE maakt gebruik van scripts, die alleen door Internet Explorer worden uitgevoerd. PIE wordt geactiveerd door een "behavior" CSS selector te gebruiken. Het is aan te raden om voor IE8 en enkele IE9 CSS3 declaraties een apart CSS bestand te gebruiken. In de Basis Joomla 3 Template is een apart CSS bestand opgenomen voor Internet Explorer 8 en 9. De PIE scripts (versie 2, beta1) bevinden zich in de map "js" van de Basis Template Joomla 3 (zie ook de website van PIE De activiteiten rond het PIE project liggen stil op dit moment. Het is de vraag of deze beta1 versie ooit nog zal worden geupdated. Hoe werkt PIE? Wanneer we een CSS3 selector willen toepassen voor IE8, voegen we de selector "behavior" toe aan de CSS declaraties met een absoluut pad naar het PIE.php bestand. Een relatief pad werkt niet in Joomla. Pas de url aan voor uw eigen website en template. Dit kan ook de localhost zijn voor Xampp. 1. element of class { 2. behavior: url( 3. } U moet voor iedere CSS3 declaratie de behavior selector aangeven. U kunt niet met één selector de PIE scripts voor de gehele website activeren. Wees echter zuinig met deze selector en pas deze toe voor alleen de essentiële stijlen, omdat het de performance van de website negatief beïnvloed. Voorbeeld In de template tutorial "Uw eigen Joomla 3 template maken -> Stap3: De basis Template aanpassen ->Een grote header afbeelding of diashow maken" hebben we voor de grote afbeelding 2 Bootstrap classes "img-polaroid" en "img-circle" toegepast. De bijbehorende Bootstrap CSS is als volgt: 1..img-circle { 2. -webkit-border-radius: 500px; 3. -moz-border-radius: 500px; 4. border-radius: 500px; 5. } img-polaroid { 8. padding: 4px; 9. background-color: #fff; 10. border: 1px solid #ccc; 11. border: 1px solid rgba(0, 0, 0, 0.2); 12. -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 13. -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 14. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 114

115 15. } De CSS3 selectors border-radius en box-shadow worden wel door IE9 onderseund, maar niet voor IE8. In het template_ie8.css nemen we de volgende selector op: 1..img-circle, 2..img-polaroid { 3. behavior: url( 4. } Pas deze selector aan naar uw eigen domein en het pad naar uw actieve template. Belangrijk! PIE issues De PIE scripts kennen een aantal problemen. Lees hier over op de website van PIE. Eén van de problemen is het gebruik van een achtergrondkleur of -afbeelding op het directe voorouder of parent element. In het voorbeeld van hierboven uit de template tutorial is het directe voorouder / parent element een div met class "bigimage". Op deze div is in de tutorial geen CSS achtergrond declaratie opgenomen. Hadden we bijvoorbeeld een background-color: #fff; voor de div "bigimage" meegegeven, dan zou de afbeelding worden verborgen achter de div bigimage. Om de afbeelding weer zichtbaar te maken moet voor het element, waarop de CSS3 selector wordt toegepast (in de voorbeeld de img met de classes "img-circle" en "imgpolaroid") een CSS declaratie position: relative worden opgenomen. We voegen de volgende declaraties toe aan het template_ie8.css bestand. 1. img-circle, 2. img-polaroid { 3. position: relative; 4. } Nu zal de afbeelding wel zichtbaar zijn inclusief de ronde hoeken en de box shadow in IE8. PIE ondersteunt alleen de "short hand" schrijfwijze In Bootstrap worden over het algemeen de short hand declaraties toegepast. Voorbeelden van de short hand schrijfwijze zijn: 1. img-circle, 2. element or class { 3. border-radius: 10px; 4. border-radius: 10px 4px 5px 10px; 5. box-shadow: 5px 7px 5px rgba(0,0,0,0.2); 6. background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); 7. behavior: url( 8. } 115

116 De volgende schrijfwijze wordt niet ondersteund door PIE: 1. img-circle, 2. element or class { 3. border-top-left-radius: 4px; 4. } Background Bij backgrounds gebruikt PIE een andere declaratie dan "background". Background gradients 1. img-circle, 2. element or class { 3. /* W3C schrijfwijze */ 4. background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* PIE schrijfwijze voor IE8 en IE9 */ 7. -pie-background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); 8. behavior: url( 9. } Voor uitgebreide informatie verwijzen wij u naar de PIE website. Firefox - Webdeveloper, Firebug and Color Zilla Firefox heeft add ons voor website ontwikkeling beschikbaar. In de video tutorials wordt uitgelegd hoe Firefox en add ons worden geïnstalleerd en hoe u deze kunt gebruiken. De video's kunt u ook downloaden van de downloads pagina. Internationale download pagina van Firefox Webdeveloper toolbar Firebug 116

117 Collor Zilla Notepad++ In de video tutorial wordt uitgelegd hoe u Notepad++ kunt installeren en configureren, welke plugins u kunt gebruiken en hoe auto-aanvullen u helpt bij het schrijven van HTML en CSS. De video kunt u ook downloaden van de downloads pagina. Download Notepadd++ Xampp installatie en configuratie Met Xampp kunt u een Joomla website laten draaien op uw PC, zonder dat u over een webhost beschikt. Zo kunt u off line een website ontwikkelen en testen. Voordat u begint Voordat u Xampp download en installeert moet u eerst Microsoft Visual C SP1 Redistributable Package (x86) installeren op uw Windews systeem. Daarna moet u de UAC (User Account Control / Gebruikersaccountbeheer) uitschakelen als u Windows Vista, 7 of 8 gebruikt. Na de installatie van Xampp kunt u desgewenst Gebruikersaccountbeheer weer inschakelen. Aanbevolen wordt om Gebruikersbeheer niet in te schakelen na de installatie, echter dit is een minder veilige instelling voor Windows. Zorg ervoor dat uw Firewall is ingeschakeld en u over goede antivirus software beschikt. Instructies uitschakelen Gebruikersaccountbeheer (UAC) Windows Vista 1. Ga naar Start en klik op het Configuratiescherm. 2. Klik dan op het kopje "Gebruikersaccounts en ouderlijk toezicht". 3. Klik vervolgens in het nieuwe scherm op "Gebruikersaccounts". 117

118 4. Eenmaal in het venster klik dan op "Gebruikersaccountbeheer in- of uitschakelen". 5. Geef toestemming om door te gaan en u komt dan in het volgende venster. 6. Schakel hier dan het vinkje uit voor "Gebruiker Gebruikersaccountbeheer (UAC) om uw computer beter te beveiligen". 7. Klik op OK en start de computer opnieuw op. Gebruikersaccountbeheer is nu uitgeschakeld. Windows 7 1. Ga naar Start en klik op het Configuratiescherm. 2. Klik dan op het kopje "Gebruikersaccounts en ouderlijk toezicht". 118

119 3. Klik vervolgens in het nieuwe scherm op het kopje "Gebruikersaccounts". 4. In het nieuwe venster klik dan op "Instellingen voor Gebruikersaccounts wijzigen". 119

120 5. Schuif de balk helemaal naar beneden om Gebruikersaccountbeheer volledig uit te schakelen. 6. Klik op OK en start de computer opnieuw op. Gebruikersaccountbeheer is nu uitgeschakeld. Windows 8 1. Ga via Start / Configuratiescherm. 2. Kijk rechtsboven bij weergeven op: (als er er staat) "categorie" klik op de pijltjes rechts daarvan en vink dan aan "Grote pictogrammen". 3. Sluit Configuratiescherm. 4. Ga via Start / Configuratiescherm / GebruikersAccounts. 120

121 5. Klik op Instellingen voor Gebruikersaccountbeheer wijzigen. 6. Zet het schuifje helemaal naar beneden en klik op de OK knop. 7. De Gebruikersaccountbeheer melding komt dan in beeld. klik op Doorgaan. 8. Start de PC opnieuw op. Gebruikersaccountbeheer is nu uitgeschakeld. Skype poorten configureren Indien u Skype gebruikt moet u controleren of de poorten 80 en 443 zijn uitgeschakeld voor binnenkomende verbindingen. Deze poorten moeten gereserveerd worden voor de Apache server van Xampp. 1. Open Skype en ga naar het menu Extra->Instellingen. 2. In het nieuw geopende scherm klik in de linkerkolom op Geavanceerde instellingen- >Verbinding. 3. Vul het vakje GeBruik poort in een getal boven de 1024, als dat leeg is. 4. Ontvink de regel Poort 80 en 443 gebruiken als alternatief voor inkomende verbindingen. 121

122 Xampp Vlideo tutorials (versie 1.8.1) Belangrijk! De versie van de video (1.8.1) is niet de laattse versie van Xampp. Dat is ook niet nodig. Het gaat om de PHP en MySQL versie die in Xampp wordt gebruikt. Versie sluit prima aan op de praktijk bij webhosts. De configuratie van de nieuwere versies wijkt af van de in de video getoonde versie Download Xampp versie van Sourceforge. De video's kunt u ook downloaden van de downloads pagina. Link naar Apachefriends: Belangrijk voor Win8 gebruikers! De Xampp ControlPanel moet als administrator worden uitgevoerd. Google webfonts Met Google Webfonts kunt u andere lettertypes in uw website gebruiken dan de gebruikelijke websafe fonts als Arial en Verdana. 122

123 De video kunt u ook downloaden van de downloads pagina. Website Google Webfonts Meertalige website Deze video tutorials tonen hoe u een meertalige website kunt instellen (Joomla 2.5 / 3, Basis Template Joomla 3). Andere templates kunnen hiervan afwijken De video's kunt u ook downloaden van de downloads pagina. Publiceer uw video op uw website Publiceer uw eigen video, gemaakt met uw mobiele telefoon, tablet of camera, op uw eigen website. U moet deze video eerst geschikt maken voor het web met een video conversie programma. Publiceren van uw HTML5 video op uw webpagina De Basis Template Joomla 3, die u van deze website kunt downloaden, is gebaseerd op HTML5 (doctype). Dit is belangrijk voor het plaatsen van HTML5 video's, die niet in een HTML4 doctype werken. U was misschien gewend om uw video's te plaatsen in een Flash player, echter Flash werkt meestal niet op mobiele apparaten. We gebruiken nog wel de Flash player, als "fall back" wanneer een browser geen HTML5 video kan afspelen, zoals Internet Explorer 8. Video formaten Voor web publicatie gebruiken we een MP4 video (met de H.264 codec), Webm video (met de Vp8 codec) en een Flash player met een MP4 video, ook met de H.264 codec. Ook wordt vaak een ogg video formaat genoemd, echter dit is naar ons oordeel niet nodig omdat de 2 eerder genoemde formaten en een Flash player ondersteuning geven aan de meest voorkomende browsers (zie W3Schoools browser ondersteuning HTML5 video). Conversie van video formaten 123

124 Wanneer u een video heeft gemaakt, gedownload of verkregen in MP4 of in een ander formaat, bijvoorbeeld AVI, MPG of WMV, dan kunt u dit bestand converteren naar een veel kleiner bestand, dat geschikt is voor publicatie op uw webpagina, als MP4 met de H.264 codec en naar Webm met de Vp8 codec. In de onderstaande video tutorial converteren we de originele MP4 video van ruim 51 Mb met de Free Studio van DVDVideoSoft. Download "Free Studio" van DVDVideoSoft Download Free Studio Free Studio is een gratis video conversie programma om uw originele video's geschikt te maken voor publicatie op uw website. Volg onderstaande video tutorial. De video kunt u ook downloaden van de downloads pagina. Invoegen van de geconverteerde video's op uw webpagina Wij raden u aan voor het plaatsen van een video op uw webpagina in Joomla om de JCE editor te gebruiken (gratis) en een (betaalde) extensie de JCE Media Manager. Wellicht gebruikt u een andere tekstverwerker, maar wij hebben met JCE goede ervaringen. Met de TinyMCE standaard tekstverwerker van Joomla hebben we geen goede ervaringen met HTML5 video. In dit voorbeeld plaatsen we de Firebug video, die ook te vinden is bij de Joomla Video Tutorials op deze website. 1. Ga nu naar het artikel, waar u de video wilt plaatsen en open dit artikel. 2. Zet uw muis cursor op de plaats waar u de video wilt invoegen en klik op het icoon "Invoegen/bewerken media". Een popup scherm verschijnt. 3. Selecteer bij type HTML5 video. 124

125 4. Selecteer de video uit de map waar deze is opgeslagen. De editor plaatst automatisch het formaat van de video. In dit voorbeeld 608 x 342 pixels. 5. Ga naar het tabblad Media Opties. 6. Selecteer (optioneel) een poster van de video (de afbeelding die zichtbaar is als de video wordt getoond op de pagina, voordat de video wordt afgespeeld). In dit voorbeeld laten we dit leeg. 7. Vul bij Bron het pad in naar het webm bestand, in dit voorbeeld images/video/firebug.webm. 8. Op de regel Fallback vult u het pad naar de mp4 video in. 125

126 9. U kunt nog kiezen uit andere opties, maar de bovenstaande opties moeten minstens zijn ingevuld. Kies voor Invoegen. Uw video is nu op uw pagina geplaatst. Sla het artikel op en bekijk het resultaat op uw pagina. De HTML code 1. <p> <video controls="controls" width="608" height="342"> <source src="/images/video/firebug.mp4" type="video/mp4" /> <source src="/images/video/firebug.webm" type="video/webm" /> <object type="application/x-shockwave-flash" data="media/jce/mediaplayer/mediaplayer.swf" width="608" height="342"> <param name="flashvars" value="src= alse&controlbarautohide=false" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="opaque" /> <param name="movie" value="media/jce/mediaplayer/mediaplayer.swf" /> </object> </video> </p> De code bevat een HTML5 video tag <video>, waarin de 2 video's zijn geplaatst (<source>), maar ook een <object> met de Flash player van JCE als Fallback. Verder plaatst de JCE editor standaard een <p> tag rond de video tag. Omdat we nog CSS moeten toepassen, wijzigen we de <p> tag in een div met een class videobox met de code editor (boven de icon balk van de tekstverwerker vindt u de Toggle Editor link van JCE, waarmee u in de code view terecht komt). 1. <div class="videobox"> <video controls="controls" width="608" height="342"> <source src="/images/video/firebug.mp4" type="video/mp4" /> <source src="/images/video/firebug.webm" type="video/webm" />

127 9. <object type="application/x-shockwave-flash" data="media/jce/mediaplayer/mediaplayer.swf" width="608" height="342"> <param name="flashvars" value="src= alse&controlbarautohide=false" /> <param name="allowfullscreen" value="true" /> <param name="wmode" value="opaque" /> <param name="movie" value="media/jce/mediaplayer/mediaplayer.swf" /> </object> </video> </div> De video stijlen en responsive maken De video wordt responsive door de <video> tag een width:100% te geven en een height: auto. De width van de video wordt dan bepaald door het element waar de video in is geplaatst. In dit voorbeeld is dat de div met class videobox. Is de box 200px breed dan zal de video het formaat aanpassen om binnen deze box te blijven. De hoogte van de video past zich automatisch aan. De videobox zelf mag niet breder zijn dan de maximale breedte van de video (video wordt mogelijk onscherp bij een breedte groter dan het formaat van de video zelf) + eventuele padding en borders die op de video tag zijn toegepast. In dit voorbeeld is dat 4 pixels padding en 1 pixel border aan alle zijden. We moeten dus voor links en rechts 5+5=10px optellen bij de breedte. De maximale width voor de videobox wordt dan =618 pixels. De padding en border zijn toegepast op de video tag en niet op de videobox omdat er tussen de <video> tag en de videobox nog ruimte bestaat, die niet kan worden beïnvloed met CSS. De margin op de videobox en de padding en border op de video tag zijn optioneel. 1..videobox { 2. max-width: 618px; 3. margin: 15px 0; 4. } video { 7. border: 1px solid #c8c8c8; 8. padding: 4px; 9. width: 100%; 10. height: auto; 11. } De gestijlde video ziet er als volgt uit. 127

128 IE8 Wanneer we de video bekijken in IE8 zien we een grote zwarte band aan beide zijden van de video. IE8 gebruikt de Flashplayer <object> en niet de HTML5 video. De zwarte band wordt veroorzaakt door de bedieningsbalk aan de onderzijde van de video. Bij de HTM5 video is dat een "overlay", maar bij de Flashplayer is deze geïntegreerd in het formaat van de video. De moeten de height van de <object> container verhogen met de hoogte van de bediendingsbalk. In de JCE editor is deze 35 pixels. Ons advies is om dit met CSS te corrigeren en niet in de broncode van het object te doen. De hoogte van de video is 342px. Dit verhogen we naar =377 pixels. Verder herkent IE8 wel de video tag (omdat Bootstrap een HTML5 javascript bestand voor oudere IE browsers heeft opgenomen) en zal IE8 dus ook de CSS van de video tag uitvoeren. Dit is ongewenst, omdat we juist nu de stijlen willen toepassen op de <object> container. De CSS van de <video> tag moeten we dus "resetten" voor IE8. In het template_ie8.css bestand van de Basis Template Joomla 3 nemen we de volgende CSS declaraties op: 1. /* Resetten van de stijlen toegepast op de videotag, die niet van toepassing zijn voor IE8 */ 2. video { 3. border: none; 4. padding: 0; 5. width: auto; 6. height: auto; 7. }

Nog meer weergeven