Easily switch themes

evertsemeijn · 2009-07-25 18:05:03

In this tutorial I'll explain how to make it easy to swicth templates on Jobberbase by adding less than 10 lines of code.

1. We'll start with the creation of a new folder in the root. I call it themes. In the themes folder we need to create a new folder named _cache which needs 777 permissions.

2. Once we have created the folder we need to open config.php and change

// Setup Smarty
	$smarty = new Smarty();
	$smarty->template_dir = APP_PATH . '_templates/';
	$smarty->compile_dir = APP_PATH . '_templates/_cache/';

into

/** change default in the name of your theme */
	define('THEME','default');
	/** This is needed so we don't have to change the location of the stylesheet */
	define('CSS', BASE_URL . 'themes/' . THEME . '/css');
	
/** Setup Smarty */
	$smarty = new Smarty();
	/** This is the new location of all themes */
	$smarty->template_dir = APP_PATH . 'themes/' . THEME ;
	/** This is the new location of the cache folder. Make sure it has 777 permissions */
	$smarty->compile_dir = APP_PATH . 'themes/_cache/';

Alright. Time to save config.php and upload it.

3. Now we are gonna move the template files to the correct location. Copy the folder _templates into the themes folder. Now rename _templates to default and remove the cache folder (_cache) from the default folder.

4. Open index.php and change

$smarty->assign('BASE_URL', BASE_URL);

into

$smarty->assign('BASE_URL', BASE_URL);
$smarty->assign('CSS', CSS);

5. The final step! Open themes/default/header.tpl and change

{$BASE_URL}_templates/css/screen.css

to

{$CSS}/screen.css

Adding new themes
1. Make sure the new theme folder, let's call it new_theme has the same structure as the default folder and upload it to the themes folder.

2. In config.php declare the name of the newly uploaded folder: change

define('THEME','default');

into

define('THEME','new_theme');

That should be all!!

Last edited by evertsemeijn (2009-07-25 18:24:01)

redjumpsuit · 2009-07-25 20:00:55

hey, i saw you posted this. i created a similar tutorial and saw that the idea is pretty much the same (i suppose when you work on templates it just makes sense to find a way to better handle templating than just crude customization on the default template.)

the approach i took was less invasive as i didn't modify the core file structure so that when you decide to upgrade when there is a new release, you don't have to re-apply this code to the affected folder and files again. you can see it here:

http://www.redjumpsuit.net/2009/07/20/j … technique/

the tutorial i wrote was originally sent to the redjumpsuit mailing list, then later on made available in my blog.

Last edited by redjumpsuit (2009-07-25 20:01:27)

evertsemeijn · 2009-07-25 20:05:55

Yeah, you're right. Your solution is best when you need to upgrade. I'll give it a try.

I was also think of creating different tags for the JS, IMG and CSS files. Just to make theming cleaner. This way

<link rel="stylesheet" href="{$BASE_URL}_templates/{$smarty.const.SKIN}/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$BASE_URL}_templates/{$smarty.const.SKIN}/print.css" type="text/css" media="print" />

can be

<link rel="stylesheet" href="{$CSS}style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{$CSS}print.css" type="text/css" media="print" />

Think you get the point, right

spongeproject · 2011-04-01 18:03:38

I think I understand the code but wondered is there a similar version that enables an end user to choose a theme say from a dropdown option? Would like to have something for a demo site to showcase several templates.

Thanks

R

spongeproject · 2011-04-12 19:49:22

Anyone have any ideas?

R

redjumpsuit · 2011-04-14 13:33:59

you can try passing the template variable to a session then use the session as your current template. you'll need some php programming knowledge but shouldn't be so hard

jobberBase Community

Announcement

#1 2009-07-25 18:05:03

Easily switch themes

#2 2009-07-25 20:00:55

Re: Easily switch themes

#3 2009-07-25 20:05:55

Re: Easily switch themes

#4 2011-04-01 18:03:38

Re: Easily switch themes

#5 2011-04-12 19:49:22

Re: Easily switch themes

#6 2011-04-14 13:33:59

Re: Easily switch themes

Board footer