Store
Community Documentation

v3 Knowledgebase

Special features when creating a theme

Phpfox v2 offers great flexibility for designers when creating a theme, hopefully this short article will explain a few not-so-popular features of the script.

As you know, themes sit in the /theme folder. There are 3 files that can really take your theme to the next level, I will use the default theme and files for example purposes:

1) /theme/frontend/default/xml/phpfox.xml.php This file is an xml file, the families here are as follow:

 <theme>
   <design_css>....
   </design_css>
   <reset_css>...
   </reset_css>
   <update_css>...
   </update_css>
 </theme>

The design_css class tells what items are available to customize this theme, it is actually a PHP array of options, if you want to use phrases here (and you most likely will) you may need to create your own language phrases, but for this you can create your own product, here is a sample of that section:

$aAdvanced = array(				
		array(
			'block' => Phpfox::getPhrase('theme.background'),
			'name' => 'body',
			'id' => 'body',
			'design' => array(
				'background' => array(
					'color' => true,
					'image' => true,					
					'attachment' => true,
					'position' => true,
					'repeat' => true
				)								
			)							
		));

The update_css and the reset_css are actually events, for example when the user changes something in a theme like the background color or a setting from the ones you made available in the design_css, this is the code to actually store that change. Given the freedom we are providing it was not possible to create a generic way to store this. Complementary the reset_css is what happens when the user decides to reset the theme, and this is basically an undo of the changes in the update_css.


2) The /theme/frontend/default/style/default/jscript/design.js This file has and uses only 2 functions:

function theme_on_change_color(aParam, sHex){ ... }

function theme_on_change_image(aMatches, oObj){ ... }

These functions are the ones responsible to show the change on the fly, right on the spot when the user changes something it is shown immediately, thats thanks to these two functions.

For the theme_on_change_color the most used param is the
aParam['name']
as it holds information about the css element being edited, and for the theme_on_change_image the most useful perhaps is the
aMatches[2]
since it contains the full class definition.


3) Finally the /theme/frontend/default/style/default/php/header.php This file is used to add code globally to the template, in the default one we use it to add special rules for IE7 and IE6

While this was not an in-depth tutorial we hope it will get things rolling and more designers/coders will start taking advantage of the robust features the script allows.