Vervolg: opmaken Joomla template van joomlaxtc. Plaatsen van html blokken.

In mijn vorige blogpost over dit thema heb ik aandacht gegeven aan de module blokken op de voorpagina van template “Motif” van http://www.joomlaxtc.com. Vandaag ga ik proberen om via het invoegen van html blokken formulieren te plaatsen binnen dit design. Ik gebruik daartoe de nieuwe website van een nieuw concept van dewebmeester.nl: Gratis test hosting via www.123web.be (ja ook in Belgie is dewebmeester.nl actief en daar heten we natuurlijk dewebmeester.be). Ik wil dat de bezoeker aan 123web.be makkelijk zichzelf kan aanmelden voor deze gratis hosting. Over het hoe en waarom van gratis hosting ga ik een extra blog post schrijven.

Doel: via html een formulier plaatsen binnen een Joomla template.

Uitwerking: dit blijkt prima te werken via artikelbeheer. Ik kies een artikel uit of maak een nieuw artikel aan en kies na het openen van het artikel in een editor voor “toggle editor” zodat de html code van het artikel getoond wordt. Vervolgens plak ik gewoon het hele html formulier (encrypted javascript formulier) binnen deze code en sla het artikel op. Het resultaat is heel erg goed. De css van de template wordt netjes overgenomen zodat het formulier automatisch past binnen de layout van de template. Het resultaat is te bekijken via: http://123web.be/index.php/gratis-hosting

Conclusie: het is niet altijd nodig om externe modules of componenten te installeren. Vaak kunnen wensen worden uitgewerkt door de code van de applicatie direct te plaatsen binnen dit design. Dit zal overigens niet het geval zijn voor elk Joomla design. Voor dit “bootstrapped” geoptimaliseerde design van Joomlaxtc geldt dit blijkbaar wel.

Visualisering van de structuur van het Open Source Content Management Systeem Joomla!. Gebruikt voor toelichting bij het artikel van joomla. Zelgemaakte afbeelding (Photo credit: Wikipedia)

Hier een afbeelding van een standaard opbouw van een Joomla website. In dit voorbeeld heb ik “inhoud” gebruikt om binnen “template” een formulier zichtbaar te maken op “website”. Dat kan ook via “Component” (formulieren component) of “Module” of “Mambot” (antieke term voor moderne term “Plugin”).

Aanvulling: formulier functionaliteit wordt uitgeschakeld door Joomla editor (JCE) en door Joomla 3.0; de oplossing

Excuses: het verhaal hierboven klinkt te makkelijk. Ja het klopt, het formulier werd mooi weergegeven volgens de css (style sheet) van het Joomla template. Maar dat betekent niet dat het formulier ook werkt. Zoals zo vaak bij invoegen van code (javascript of anders) via de editor (content, artikel of module), wordt de code gestript na klikken op “opslaan” en soms is dit niet zichtbaar (zoals in dit geval).

Oplossing: een oplossing is om een extra module te installeren die is ontworpen om deze code te behouden. Voorbeelden zijn te vinden via deze link:

http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules

Ik gebruik voor mijn formulier de “Flexi Custom Code“, installeer de module en plaats het formulier script binnen deze module. Maar: ik wil dit formulier binnen een artikel tonen! Geen probleem. Daarvoor dient “Modules Anywhere” van “NoNumber” waarmee in “no time” elke module binnen elk willekeurig artikel geplaatst kan worden. Ik doe dat ook en het lijkt te werken. Kijk hier voor het formulier (waarmee gratis hosting van dewebmeester.nl besteld kan worden):

http://123web.be/index.php/gratis-hosting

Related articles

• PSD to joomla the most sought after among the clients (teacherlingo.com)
• Design Inspiration: A-T-O-M | Responsive Multipurpose Joomla Theme (designshack.net)
• Joomla Hosting Reviews Announces Redesigned Responsive Website (prweb.com)
• The New Joomla 2.5 to 3 Pre-update Check (ostraining.com)

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!

Template chooser, picker, selector binnen Joomla 2.5

Resultaat van deze dag is te bekijken op http://decmsmeester.nl/joomla2.5/

Nou, vandaag ben ik weer druk geweest met het oplossen van raadsels en na zo’n dag is het verstandig om bevindingen op te schrijven in een blogpost. Ik ben niet de enige met deze wens:
– Een Joomla website waarbinnen verschillende designs / templates zijn geinstalleerd en waarbij de bezoeker zelf kan kiezen tussen deze designs.
Na bladeren op Google lijken vele anderen met deze wens rond te lopen. Toch lijken weinigen hierin echt wat gerealiseerd te hebben.

Waarom?
Omdat ik websites verkoop en elke bezoeker aan mijn website(s) deze gelegenheid wil bieden. De toekomstige klant kan zo "live" en online een design bekijken en uitproberen.

Probleem?
Ja. Het lijkt makkelijk. Ik kan bijvoorbeeld een tien- twintigtal Joomla installaties plaatsen op de server en binnen elke installatie een nieuwe website plaatsen met elke een origineel design en layout. Maar: dat neemt serverruimte in beslag, dat neem database ruimte in beslag en boven alles: de bezoeker moet wel erg veel geduld hebben want elke keer als hij een ander design wil bekijken moet hij wachten totdat de hele website geladen is. Dat is traag. Te traag.

Oplossing?
Mogelijk. Na een dagje werken heb ik in ieder geval een paar antwoorden. De rest laat ik aan u over. Ik ben begonnen met de Joomla extensie "Template Selector" (deze link zou u direct naar deze extensie moeten leiden.) Het betreft een module en een plugin en beiden moeten geactiveerd worden. Als alleen de module gepubliceerd wordt en de plugin niet geactiveerd, dan wordt de template selecter wel zichtbaar (wel leuk, bezoeker ziet in ieder geval screenshots van de templates en dat biedt een miniatuur template gallery!) maar bij klikken op "switch", gebeurt er niets. Maar bij activeren van de plugin, zie je niet alleen de geinstalleerde templates maar is het dus ook mogelijk te "switchen". Het werkt. Ben ik nu klaar? Nee, nog lang niet.

Problemen en oplossingen
Ik wil dat de bezoeker kan kiezen uit tenminste 100 designs. Dan moet ik dus eerst 100 Joomla templates installeren. Dat is niet een probleem. Binnen de module Template Selector, klik ik aan welke van die 100 designs zichtbaar en verkiesbaar moeten worden. Ik kies ze allemaal. Vervolgens naar de frontend (voorpagina) en ik kies een willekeurig design. Daarbij zal ik direct ontdekken dat ik naast "Stijl" (css, style, kleuren, fonts) ook rekening moet houden met "Structuur" (layout, module posities). Het eerste (stijl) lijkt niet het probleem. Dat werkt prima. Maar bij kiezen voor een andere template, wordt de structuur door elkaar gegooid. Meest makkelijke oplossing: alleen templates installeren die allemaal de zelfde structuur hebben. Bijvoorbeeld: ik gebruik alleen templates van DiaBloDesign ; Die zijn allemaal volgens hetzelfde concept opgemaakt. Hetzelfde geldt voor een webbedrijfje als "Globbersthemes". Ook bedenk ik me dat het bekende software programma Artisteer altijd dezelfde structuur produceert en ik besluit daar wat mee te werken.

Ik probeer het met Artisteer versie 3.1 ; Nieuw design, exporteren als Joomla 1.7 design met standaard module posities (position-1, position-2….etc.), installeren als nieuwe template en binnen de module "Template Selector" aangeven dat ook dit design erbij hoort. Naar voorpagina, kiezen voor dit design en klikken op "switch" en……een totaal andere structuur……..; Natuurlijk, ik was tenslotte al begonnen met designs van DiaBloDesign en enkelen van Template Monster ("Architect" en "Traveller"). Die werkten redelijk. Artisteer templates lijken toch anders in elkaar te zitten.

Even een stapje terug: De eerste twee templates waren van Template Monster. Die switchen redelijk goed. Daarna installeer ik drie templates van DiaBloDesign en die tonen redelijk goed maar het topmenu ontbreekt. Vreemd. Nee, toch niet. Template Monster templates plaatsen main menu op positie "navigation" en die ontbreekt binnen DiaBloDesigns en ook binnen de Artisteer designs. Oplossing: main menu module kopieren en publiceren op positie "position-1". Dat werkt natuurlijk alleen als "position-1" op de juiste plaats aanwezig is binnen de nieuwe designs en niet aanwezig is binnen de al geinstalleerde templates. Dat is (vreemd genoeg) het geval. Indien "position-1" ook aanwezig is binnen de templates die ook "navigation" hebben, dan zou het resultaat zijn dat er twee main menu’s getoond worden. Dat kan eventueel opgelost worden door "Advance Module Manager" te installeren van "No Number" en daarin te kiezen dat deze extra main menu module niet getoond moet worden binnen bepaalde templates.

Dit verhaal wordt vervolgd want op dit moment heb ik "slechts" 8 templates naar tevredenheid geinstalleerd binnen de Template Selector en ik ga voor die 100. Nu maar hopen dat ik hierdoor klant krijg……..

Logo verplaatsen binnen Joomla template

Dit is zo basaal en simpel dat het bijna schaamteloos is om daar een blogpost over te schrijven. Maar ik heb dan wel mooie titels (dewebmeester.nl / Spiderman Webdesign / Master of Science / Ir. en nog een aantal) maar soms ben ook ik gewoon veel teveel tijd kwijt met de meest onbenullige zaken. Om dat te voorkomen een blogpost:
Doel: het logo moet enkele centimeters omhoog worden geplaatst
Normale werkwijze: Firebug en opzoeken welke css files er aangepast moeten worden
Probleem: er blijkt geen enkele css verwijzing te zijn die positie van logo bepaalt. Het logo zit ergens gevangen binnen een vast kader binnen de html.
Oplossing: logo verwijderen. Ja, daarmee is hij toch ook verplaatst? En vervolgens een nieuwe module aanmaken: modules —–> nieuw —–> aangepaste html —–> naam logo, titel niet tonen, afbeelding uploaden (logo bestand) en opslaan binnen modulepositie die wel de juiste plaats weergeeft. En natuurlijk opslaan. Gelukt.
Advies: voortaan altijd een logo binnen een aangepaste html module plaatsen. Dat maakt verhuizen en aanpassen makkelijk.
Groeten!

Het grote probleem: tekst vinden en aanpassen binnen website files (met name .php)

Tja, het lijkt zo makkelijk: een tekst aanpassen binnen een website. Dat is het ook, als je maar weet in welke file of op welke plaats die tekst te vinden is. Met Firebug lijken we heel erg geholpen te zijn. Maar helaas, dat geldt eigenlijk alleen voor de .css files want daarvan wordt inderdaad heel duidelijk aangegeven in welke file de gezochte code te vinden is. Heel handig maar niet genoeg.

Het voorbeeld probleem waar ik nu mee zit: binnen een Joomla template inclusief Virtuamrt wil de klant enkele teksten aangepast hebben. Dat bied ik standaard aan en kost me nog altijd veel te veel tijd. Dus: als eerste wil ik vragen of iemand van mijn lezers mogelijk een eenvoudige addon weet die aangeeft binnen welke file op de server een bepaalde tekst te vinden is. Tot dan toe werk ik voornamelijk via de offline methode:

Stap 1: ik download de complete map / folder waarvan ik verdenk dat daar ergens de tekst tussen zou moeten staan
Stap 2: ik open alle files van een bepaalde extensie (meestal .php) uit die folder met EditPadPro, open search panel en laat programma naar de tekst zoeken. In veel gevallen ben ik dan geholpen. Veel werk, beetje omslachtig en je moet dus wel de beschikking hebben over EditPadPro.

Stap 3: Soms (nog veel te vaak) lukt het toch niet. Dan ga ik naar phpmyadmin, log in, ga naar betreffende database en start een search opdracht. Ook dat lost een aantal problemen op.
Stap 4: ik ben bang dat ik een slapeloze nacht ga beleven. Op dit moment probeer ik “Old price” en “Discount” binnen een Joomla /Virtuemart installatie aan te passen en de tekst blijft onvindbaar. Ben nu gestart me het programma “FilterFTP” waarmee je online op de server kan zoeken. Maar als eerste lijkt het programma alleen aan te bieden om binnen filenamen te zoeken en dat heb ik niet nodig. Ik wil in die files, in de code en in de tekst zoeken.

Stap 5: terug naar EditPadPro. Ik maak een FTP server connectie en links zie ik netjes alle files en folders binnen de server. Als ik met rechtermuis op folder klik en klik op “open” wordt in rap tempo alle files binnen deze folder geopend waarna ik kan gaan zoeken binnen de files. Dat scheelt aleer de stap van downloaden maar daarmee kan ik op een later tijdstip natuurlijk weer moeilijker opnieuw gaan zoeken. Probleem: er zitten teveel images in de folder en die wil ik nog even niet openen. Programma loopt dan ook vast.
Stap 6: ik ga opnieuw de complete folder com_virtuemart downloaden (mogelijk heeft klant wat aagepast) en ik ga koffie zetten.
Wordt vervolgd en ik hoop: gevolgd want advies kan ik wel gebruiken!

Stap 7: Terug naar Firebug (nadat ik alle .php files uit com_virtuemart geopend had in EditPadPro en die files doorzocht had zonder resultaat). Daarbij hoort de volgende afbeelding:

De tekst “Old prijs” is hierbij al aangepast in “Oude prijs” (blijkbaar is het me gelukt!). Firebug geeft aan dat tekst te vinden is binnen een module. Er wordt een div_class “Module_new”  gebruikt. Dat leidt er toe dat ik de complete map “modules” download en laat onderzoeken door EditPadPro. En ja hoor, tekst wordt dan snel gevonden en aangepast.

Grote voordeel van offline methode (waardoor ik even stop met zoeken naar online methode) is dat alle bestanden nu zoekbaar aanwezig zijn op mijn computer wat doorzoeken erg snel maakt.

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