Test: Joomlaxtc templates. Start: Template “Motif”

Joomlaxtc.com is een gerenommeerde Joomla template club die de laatste jaren ook gespecialiseerd is in WordPress themes. Daarnaast kent deze Joomla club ook een extensies club. Elk Joomla design is een apart verhaal. Ja er zijn overeenkomsten maar de verschillende verdienen aandacht. Zeker de verschillen tussen verschillende templates van verschillende template clubs. De templates van joomlashack.com zien er niet alleen heel anders uit dan de templates van icetheme.com of joomlaxtc.com, ze zijn ook compleet anders opgebouwd.

Dit lijkt mogelijk vreemd. Een template is toch slechts een onderdeel van het hele Joomla pakket? Nee, de template, het design, bepaalt waar welke modules gepubliceerd worden. De template bepaalt hoe het functioneren van de componenten aan de voorkant zichtbaar gemaakt kan worden. Kortom: iedere keer als een klant een bestelling doet bij dewebmeester.nl en iedere keer dat een bepaalde Joomla template deel uitmaakt van de bestelling, dan moeten we ons eerst goed verdiepen in de de volgende vragen: hoe is de template opgebouwd? Via welke modules worden welke artikelen zichtbaar gemaakt? Welke teksten worden via artikelen zichtbaar gemaakt en welke teksten via modules? Welke afbeeldingen zijn onderdeel van een module, welke van een artikel en welke van de template code?

Binnen dit blog (www.dewebhulp.nl ) veel aandacht voor veel templates van veel Joomla template clubs. Ja, ik heb dus nog wat te doen. Laat ik dan maar direct beginnen. Ik begin met de laatst uitgegeven template van Joomlaxtc: “Motif”.

Template wordt geleverd samen met alle bestanden die nodig zijn om na installeren van de template, de website er precies zo uit te laten zien als in deze afbeeling

Dit template is te verkrijgen in de Joomla 2.5 en Joomla 3.0 versie. Ik besluit als eerste de Joomla 2.5 versie te installeren en die is voorlopig te vinden op: http://decmsmeester.nl/joomlaxtc/joomla/motif2.5/

Als eerste ga ik in de backend (/administrator) op zoek naar de drie blokken, het bruine,  het donkerroze en het blauwe blok. Dat zijn modules en nee, het is slechts 1 module. Van het type “JoomlaXTC Deluxe News Pro”. Mooi, denk ik dan, die module hebben we maar vast. Bij openen van de module via modulebeheer (module bevindt zich op positie user 13), wordt duidelijk dat er binnen deze module artikelen geladen worden uit een bepaalde content categorie. Die artikelen vinden we dus onder artikelenbeheer (binnen categorie “Joomla content”). Daar vinden we echter wel wat meer dan 3 artikelen. Bij refresh van de pagina krijg ik dezelfde artikelen te zien op de voorpagina. Er is dus niet sprake van een wisselen van de artikelen. Bij uitschakelen (depubliceren of deactiveren) van het eerste artikel (herkenbaar aan de titel, en altijd via “zoeken” in artikelbeheer te vinden), krijgen we wel een ander artikel te zien na “refresh”. De module blijkt te bepalen welke artikelen er getoond worden en de standaard (demo) setting van deze template is “Joomla order” wat betekent dat eerste drie artikelen (id 1,2 en 3 bijvoorbeeld) getoond worden en de rest niet. Conclusie: mooie optie om snel van voorpagina inhoud te kunnen wisselen en altijd actuele inhoud te kunnen bieden aan de bezoekers. Morgen verder.

Related articles

• Joomla Development: The Advantages and Disadvantages in CMS Features (newsagainstweb.wordpress.com)
• Important: Prevent your Joomla! site being hacked (heartinternet.co.uk)
• WordPress v Joomla: The Infographic (sitepoint.com)
• 25 High Quality Premium Responsive CMS Joomla Templates (prasadprechu.wordpress.com)
• The New Joomla 2.5 to 3 Pre-update Check (ostraining.com)

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……..

html2joomla ; Hoe makkelijk is het?

Dat is vandaag de centrale vraag. Laat ik beginnen met een antwoord: het is niet makkelijk.

Start: ik neem een mooi design van dreamtemplate.com ; hij staat online op http://decmsmeester.nl/html2joomla/ Deze gaan we ombouwen naar een compleet werkende Joomla template (voorlopig resultaat is te zien op: http://decmsmeester.nl/joomla/ ).

Hierbij een aantal moeilijkheden die te overwinnen zijn:
– belangrijk om te beginnen met een html/css site
– index.html moet index.php worden
– Code in index.php file (de vroegere index.html file) moet worden aangepast en eerste stap is: alle code voor de <body> tag vervangen met:

<?php // no direct access defined( ‘_JEXEC’ ) or die( ‘Restricted access’ ); ?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”<?php echo $this->language; ?>” lang=”<?php echo $this->language; ?>” > <head> <jdoc:include type=”head” /> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/system/css/system.css” type=”text/css” /> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/system/css/general.css” type=”text/css” /> <link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/your_template_name/your_css_directory/your_css_file.css” type=”text/css” /> </head>

Vervolgens moet natuurlijk de linken naar de stylesheets worden aangepast en tevens eventuele linken naar javascript files worden toegevoegd. Voorbeeld:

<script type=”text/javascript” src=”js/jquery.v1.4.2.js”></script>
<script type=”text/javascript” src=”js/jquery.cycle.all.min.js”></script>
<script type=”text/javascript” src=”js/custom.js”></script>

Module posities bepalen

Vervolgens moeten de moduleposities binnen de index.php file worden aangegeven. Dit doen we via de code:

<jdoc:include type="modules" name="top" />

Elke modulepositie heeft een eigen naam en die moet natuurlijk worden aangepast.
Nu zitten we zo’n beetje op het moeilijke gedeelte: waar zetten we die code precies neer? De meest zekere weg: ik maak gebruik van de standaard template binnen de standaard Joomla 1.5 installatie. Open de index.php file binnen van die template binnen notepad+ en zoek waar ik de tekst jdoc:include type=”modules” kan vinden. Elke keer als ik die tekst tegenkom, kopieer is de verwijzing (de eerste is: <jdoc:include type=”modules” name=”top” /> ) en plak die binnen de nieuwe index.php file op een plaats die overeenkomt met de plaats binnen de standaard index.php template file. Dat doe ik voor alle module posities. (Let op: het verwachte resultaat wordt een website in de stijl van de html/css file maar met de structuur van de standaard joomla template. Als je een andere structuur wilt dan is het verstandig om eerst op zoek te gaan naar een andere template met de gewenste structuur.)

Na plaatsen module posities en de code voor plaatsen componenten:

<jdoc:include type=”component” />

Vervolgens moet de ‘templateDetails.xml’ file worden aangemaakt en daartoe gebruik ik de templateDetails.xml file die bij de template hoort waarvan je de module structuur heb overgenomen (de standaard Joomla template in mijn geval). De linken die binnen deze file genoemd worden (file openen in notepad+) moeten allemaal verwijzen naar bestanden binnen de templatefolder. Kortom: alle links moeten aangepast worden. Ook moet er hier een template_thumbnail.png file worden aangemaakt zoals in deze XML file genoemd wordt.

Installeren van de nieuwe template

Alles wordt daarna ingepakt in een .zip file en via de extension manager als template geinstalleerd binnen de standaard Joomla installatie.

En zelfs als dit dan werkt, heb je nog heel veel tijd nodig om alles zo aan te passen dat het er goed uitziet…

Uploaden images naar root image map

Dit vond ik vreemd: de installatie van de template verliep prima en het instellen van de template als standaard ook. Maar: ik zag geen enkele image. Terwijl in templateDetails.xml file was aangegeven welke image files behoorden bij dit design, moeten images toch nog worden geupload naar de image folder binnen de root en niet binnen de image folder van de template folder. En ja hoor, de images verschijnen: http://decmsmeester.nl/joomla/

Javascript laten werken binnen Joomla design

Javascript blijkt nog niet te werken. Daar ga ik even aan werken……

Ja, ook dat werkt nu! Ook hier was het probleem de verwijzing naar de javascript files. Ik heb  nu niet de files verhuisd maar wel de linkverwijzing in de index.php file behorend bij de template. Omdat de CMS geinstalleerd staat binnen een subfolder van de root http://decmsmeester.nl (folder: joomla) moet ik voor alle linkverwijzingen naar javascript files gewoon /joomla plaatsen en het werkt (zie de slider bovenaan de pagina: http://decmsmeester.nl/joomla/ )

Nu nog even ‘finetunen’.

p.s. Vergeet niet te kijken naar de blogpost over het ombouwen van een html site naar een Joomla 2.5 template! Dat lijkt makkelijker te zijn: https://dewebmeester.wordpress.com/2012/04/12/html2joomla-gelukt-voor-dreamtemplate-com-template-naar-joomla-2-5-theme/

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.