Xpert Access

Customize yoflash template or make your own

Yoflash comes with a rudimentary template syupport for its component. This was introduced due to the fact, that  a lot of people want to make small alterations so that the layout would fit better to their Joomal template. Also, the initial idea was that different templates will be useful depending on teh users needs (wether you want to build a full feature arcade website or just want to have a small section with a few games).

The main problem is that changes to the default template will be overwritten once a new version of yoflash has been released. One way to overcome this, is to use Joomla Template override system. By copying the components view into the templat's HTML folder, the original view will not get called anymore, instead the one in the template's HTML folder will be used. Dateiled instructions can be found in the Joomla Documentation about Template overrides and Undertanding Template overrides.

While this way of implementation is valid and elegant, we ran into the problem, that options (or parameters) for different views cannot be given to the new template. It is flexible for people who run there own Joomla website and want to adjust the appearance, but not flexible enough for a comonent. This is why we implemented am easy, yuet flexible templating for Yoflash.

Creating your own yoflash template by modifying the default-template

The easiest way to start customising the yoflash appearance is to simply copy the whole directory "default" and give it a different name (let's say "foobar"). Yoflash's template systems only look for folder in the template-folder and therefore, you just created your own template that won't be overwritten when a new yoflash version is released. It will immediately show up in the Template options of teh yoflash Template page. 

Now, all you have to do is make the new template active and (and this is important) clear you Joomla cache. Now yoflash will use the newly created template.


Altering the views

Each template needs to have exactly the views as in the default-view. Every view is stored in there own directory and is called default.php. For teh version 3.0.2 the following views are present:

  • Game (The view for a game)
  • Category (The view for a single category)
  • Categories (Shows a list of categories)
  • Tags (The view to display the tag system)

In each directory you will find a default.php which conatins the HTML / PHP rules to render that specific page. Change everything to your needs here.

Adding parameters

In each template folder you will find a file called config.xml which contain the setting rules (like when you click on it in the backend). The way the file is constructed is exactly the same as in standard Joomla, except that parameters have to bee in a field called tmpl. For a full list of available fields, please refer to the Joomla Documentation on Fields. Just to make sure, the only different thing is that template field-names have to be in teh tmpl-array, e.g:

<field name="pos1_text" type="text" label="Text" default="Newest games" />

Needs to be named:

<field name="tmpl[pos1_text]" type="text" label="Text" default="Newest games" />

The fields will be present in teh administration setting of teh yoflash template settings. To retrieve a field setting in your template, simply (in PHP), call

$this->params->get('pos1_text'); //in this case WITHOUT tmpl

And that's it. You now can now create your very own template (or alter the default template) and use your own by the user defined variables.


If you think, you created an awesome template for yoflash and want to share it with the world, then please upload it to the forums. I'll be more than happy to include user created templates into teh rleases of yoflash!