Aanpassen layout Joomla module

Het aanpassen van de layout van een Joomla module lijkt een eenvoudige zaak met Firebug. Maar bij aanpassen van de css file behorende bij de module, is de kans groot dat ook de layout van andere modules aangepast worden terwijl dat mogelijk niet te bedoeling is. Dat is zeker het geval als de css verwijzingen verstopt zitten in bijvoorbeeld een style.css file of template.css file. Als de module een eigen css file heeft, dan is het inderdaad niet moeilijk om de layout aan te passen.

De makkelijkste manier
Het makkelijkste lijkt mij op dit moment om in “advanced options” binnen modulebeheer (binnen Joomla administrator) de “Module Class Suffix” aan te passen.
Dat gaat als volgt:
Ga naar modulebeheer in Joomla en open de module waarvoor de layout aangepast moet worden.
Open de stylesheet waarnaar deze module verwijst (via Filezilla en Notepad+)
Kijk via Firebug welke layout verwijzing aangepast moet worden
Ga terug naar de geopende stylesheet (css file) en zoek via “search” naar de verwijzing
Kopieer de div class en plaats die daar direct onder; Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable h3.mod-title {
color: #800040;}

Nu passen we de tweede verwijzing aan en maken een nieuwe div class. Bijvoorbeeld:

#footer .moduletable h3.mod-title {
color: #800040;}

#footer .moduletable2 h3.mod-title {
color: #FFFFFF;}

We schakelen weer terug naar de geopende module in modulebeheer en plaatsen aan de rechterkant onder “advanced options” in de “Module Class Suffix” de div class: moduletable2 en slaan de module op. Zie afbeelding:

Resultaat is dat de header van de bewuste module een h3 grootte hebben (dat hadden ze al) en dat de kleur is veranderd naar wit. Nu is het makkelijk om voor elke module de header aan te passen in wit.
Tot zover. Wilt u ook de layout van uw Joomla website laten aanpassen? Vraag info@dewebmeester.nl naar mogelijkheden.
Groeten!

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.

Een joomla module binnen een joomla artikel

Dit zou heel veel mogelijk maken: het direct publiceren van een Joomla module binnen een Joomla artikel. Waarom? Omdat elke joomla template begrensd is door de de beschikbare ‘module posities’. Naast module posities is er nog ruimte voor artikelen. Deze ruimte heet ‘content’ en is geen module positie. Door deze ruimte toch te gebruiken om modules te plaatsen, kun je menu’s, flash modules, sliders, fotoalbums, en alles dat je via een module kunt publiceren, heel makkelijk weergeven binnen een artikel zonder dat je daar een dure ‘editor’ voor nodig hebt. Hierbij hoe je dit kunt oplossen en een voorbeeld:

1. Maak een module aan of installeer die. (Hoe je dit doet vind je in andere hoofdstukken)
2. Maak een nieuwe module positie aan (klikken op nieuwe module en onder scroll menu ‘positie’ gewoon klikken op een beschikbare positie – niet belangrijk welke – en vervolgens een nieuwe naam typen: handmatig. Wel even onthouden welke naam dit is.) Ik heb in mijn voorbeeld de positie ‘video’ aangemaakt.
3. Maak een nieuw artikel aan of open een bestaand artikel.
4. Plaats binnen dit artikel de volgende code (hoeft niet in html code, gewoon binnen artikel plaatsen): {loadposition video} Let op: ‘video’ is mijn voorbeeld. Dit moet de naam zijn an de zelfbedachte module positie.
5. Sla op en vervolgens wordt binnen het artikel de module getoond op de plaats waar deze code gedropt is.

Niet moeilijk toch?

Vragen toesturen naar vraag@dewebmeester.nl