zondag 13 februari 2011

Module positie toevoegen aan Joomla template

Ik heb er weer helemaal zin in: Ik ga enkele mogelijkheden beschrijven die het mogelijk maken om elke html/css webpagina om te zetten in een bruikbaar Joomla template. Voordelen: Joomla is HET open source management system voor Joomla websites en omdat dit het meest uitgebreide CMS is ter wereld, is het gewoon rechtvaardig om een mogelijkheid te kennen om een "gewone" HTML pagina te importeren in dit CMS. Dat zal het gemakkelijk maken om één of meerdere van de duizenden (gratis) beschikbare Joomla componenten en modules te integreren in een HTML website, gebruikersaccounts aan te maken en te beheren, artikelen en andere inhoud online bij te houden, enzovoorts, enzovoorts.

In deze bijdrage het onderwerp:

Module posities. Voorbeeld: aanpassing van de purity_ii template van Joomlart


Module posities staan genoemd in de templatedetails.xml file die onderdeel uitmaakt van de gebruikte joomla template. Deze file is the vinden in de folder 'templates' en dan natuurlijk binnen de subfolder van de betreffende template. Om een modulepositie toe te voegen of te verwijderen hoef je alleen aanpassingen te maken binnen het rijtje. In mijn voorbeeld: ik wil een modulepositie toevoegen met naam "bottombar" en voeg de regel <position>bottombar</position> toe aan het rijtje.

"positions>

<position>hornav</position>

<position>breadcrumbs</position>

<position>bottombar</position>


<position>banner</position>

<position>left</position>

<position>right</position>

<position>top</position>

<position>user1</position>

<position>user2</position>

Etc./>

Vervolgens plaats je binnen de index.php de code <jdoc:include type="modules" name="<naam van modulepositie>"/> op de plaats waar de module binnen de template zou moeten verschijnen en vervang je <naam van modulepositie> door de naam van de modulepositie precies zoals je die hebt beschreven in het bovengenoemde rijtje. Nu kan dit overigens wel eens tot problemen leiden omdat de nieuwe design (joomla templates) niet allemaal zo standaard zijn. Oftewel: de index.php file van een joomla site heeft mogelijk helemaal geen HTML tags zoals je gewend bent. Ga in dat geval op zoek de .php file die beschrijft welke modules op elke positie geladen moeten worden. Die .php file zit waarschijnlijk in de /templates folder. In mijn geval was het de file joomla2/templates/purity_ii/layouts/header.php waarin ik de jdoc:include betreffende "bottombar" heb geplaatst (lijkt niet logisch om een 'bottombar' te plaatsen in header.php maar in footer.php bleek de module niet te werken zoals behoort.) Resultaat: er verschijnt binnen mijn site een mooi menu helemaal beneden op het scherm die mooi meescrollt binnen de pagina (www.decmsmeester.nl/joomla2) op een nieuwe positie die ik 'bottombar' heb genoemd.

Zo leren we langzaam hoe een Joomla template is opgebouwd. We moeten proberen zoveel mogelijk zaken te ontdekken. Het zijn allemaal puzzelstukjes die ons zullen helpen om uiteindelijk zelf een Joomla template te maken of om van een bestaande HTML pagina om te zetten naar een Joomla template. In deze aflevering leerden we om een modulepositie te definieren en om te bepalen op welke plaats binnen een (html)pagina de module moet verschijnen.

7 opmerkingen:

  1. De tekst tot aan vervolgens is te volgen, daarna word het er niet duidelijk op. Het lukt me niet om dit aan te passen. Jammer dat er op het internet over dit onderwerp zo weinig te vinden is. Ook jammer dat er geen templates te vinden zijn die een module positie header hebben.

    BeantwoordenVerwijderen
  2. Beste Fred,
    Bedankt voor je reactie. Op zich is e rop internet heel veel informatie over te vinden maar meestal in het Engels. Dit blog onderwerp ben ik gestart om eigen bevindingen op een rij te zetten. Helaas niet een complete cursus. Je bent gestrand bij index.php volgens mij. Je zult via ftp programma (filezilla) je index.php file moeten opzoeken die behoort bij je standaard template in Joomla (folder /templates), die openen in notepad+, de code toevoegen:
    <jdoc:include type=”modules” name=””/>
    op de plaats waar de module binnen de template zou moeten verschijnen. En verder jezelf de tijd gunnen om te leren. Je kunt natuurlijk ook je html design aan me toesturen en dan bouw ik die om tot een Joomla ontwerp voor je. Kosten zijn 99 Euro ex BTW (bij gebruik standaard html / css design). Blijf vrage opsturen. Groeten namens www.dewebmeester.nl
    Meindert

    BeantwoordenVerwijderen
  3. Hallo Meindert,

    Ik heb de module toegepast. Werk super. Dank je wel. Maar nu de volgende uitdaging.
    Ik wil graag de afbeelding bewerken die ik in die module heb staan. Ik wil graag dat de header zich aanpast aan de pagina. Dus als ik op een kleiner scherm kijk of ik minimaliseer de pagina dan wil ik graag dat de header zich aan past. kan jij mij helpen?

    Grt Marjon

    BeantwoordenVerwijderen
  4. Ja, ik kan je wel helpen maar: het is niet verstandig om de hele Joomla pagina "responsive" te maken en niet alleen een module? En wat voor module betreft het? Een html module? Welke Joomla versie? Kijk in ieder geval even naar de component "Joomla Mobile", binnen dit blog is daar al aandacht aan gegeven. www.projektduga.nl is een voorbeeld van een Joomla 2.5 website die responsive is gemaakt met deze component.
    Hartelijke groeten en succes ermee en bedankt voor het reageren. Hoop weer van je te horen.

    BeantwoordenVerwijderen
  5. Hallo Mindert,

    Het is me inmiddels gelukt om het beide responsive te maken.
    De optie responsive zat in de template die ik heb gemaakt in artisteer 4. De module heb ik los daarvan responsive gemaakt.
    Dank je wel voor je snelle reactie. Mocht ik nog vragen hebben weet ik waar ik moet zijn ;)

    Grt Marjon

    BeantwoordenVerwijderen
  6. Hallo Meindert,

    In mijn template zitten de juiste posities gedefinieerd. Daar hoef ik niks aan te veranderen. Wat ik wel weer veranderen is het "gedrag" binnen die positie/module. Zo wil ik een aantal social media buttons (via een simple image holder) in dezelfde positie plaatsen. To zo ver niks aan de hand. Echter, de buttons worden onder elkaar gezet en ik wil ze graag naast elkaar hebben. Ik heb alleen geen idee waar en hoe ik dat kan definiëren.

    Ik hoop dat je snapt wat ik bedoel.

    Gr.
    Erwin

    BeantwoordenVerwijderen
  7. Stuur de url even op naar deze websiten De layout is of op te maken binnen de module zelf of anders in de css file.

    BeantwoordenVerwijderen