RedJumpsuit

jobberBase custom development and support

 

Code School

jobberBase Templating Technique

As promised, here’s a templating technique I created to allow for switching from templates to templates in jobberBase. This came up when I started working on importing CSS/xHTML templates to jobberBase lately and started thinking of a way to switch easily from the default to the template I was working on.

This is fairly simple and I am assuming a lot of you are familiar with jobberBase already.

1. Open your ‘config.php’ file on your root folder.

Under this block:

    // MySQL + misc settings for local environment
    if ($_SERVER['SERVER_NAME'] == 'localhost')
    {
        define('DB_HOST', 'localhost');
        define('DB_USER', 'root');
        define('DB_PASS', '');
        define('DB_NAME', 'jobberbase');
        define('LOCATION', 'local');
        define('ENVIRONMENT', 'dev');
    }
    // MySQL + misc settings for production environment
    else
    {
        define('DB_HOST', 'localhost');
        define('DB_USER', 'root');
        define('DB_PASS', '');
        define('DB_NAME', 'jobberbase');
        define('LOCATION', 'online');
        define('ENVIRONMENT', 'prod');
    }

Add this:

define('SKIN', ''); // if empty, the default jobberBase template will be used

Then replace this block:

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

With this block:

    // Setup Smarty
    $smarty = new Smarty();
 
    if (SKIN == '')
    {
        $smarty->template_dir = APP_PATH . '_templates/';
        $smarty->compile_dir = APP_PATH . '_templates/_cache/';
    }
    else
    {
        $smarty->template_dir = APP_PATH . '_templates/'. SKIN .'/';
        $smarty->compile_dir  = APP_PATH . '_templates/'. SKIN .'/_cache/';
    }

2. Save your new template under /_templates/

3. Update the line on config.php:

    define('SKIN', '');

With the new template you created or already have. You MUST use the name of the folder as your ‘skin’ name.

For example:

define('SKIN', 'emplode'); // the files of this theme is saved on /_templates/emplode/

That’s the part that takes care of pointing to the correct template.

The second part is the conventions I suggest you use. I am again assuming you are starting your new template off of the default jobberBase template (what I’d do is copy all the files inside the /_templates folder including the /_templates/cache/ folder and save it to a new folder inside /_templates/my new template)

1. The file location and naming convention I would suggest (for your new template) are:

Stylesheet
– name it style.css and put it on /_templates/your template name/style.css

Images
– put it inside the folder on /_templates/your template name/img/
– call it from your stylesheet as (‘img/…’)

Header template
– Open up /_templates/your template name/header.tpl and replace these lines:

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

with these lines:

<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" />

I found this technique very helpful in developing new templates for jobberBase and having the option to revert back to the default template by the changing the line in the config file.

Go ahead and try it for yourself!

Tagged as: , ,

7 Comments

Code School

  1. You need to remove the extra / on some code.

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

    Code:

    can be

    Code:

    Think you get the point, right 😉

  2. hello, saw that wordpress wouldn’t accept text that starts with <>, the extra slashes were actually “/your template name/”

    i wanted to keep jobberBase core images and stylesheets intact and not touch it, so i contained everything i need for the template inside the /_template/mytemplate, wouldn’t give me headaches to upgrade when there is a new release.

  3. Use a cache folder for each theme? Isn’t it possible/easier to use 1 cache folder?

  4. possible! you just need to ignore the change in ‘$smarty->compile_dir’ (take it out of the conditional statement), but for my sanity’s sake and not wanting to be dependent on the folder structure of jobberBase, i thought it best to make the template stand on it’s own – if the /_cache/ folder changes for some reason on the next releases, then that would mean re-coding again 😉

  5. this is no longer applicable for jobberBase 1.8 as it is already part of its core codebase :)

Trackbacks

  1. E.J. Semeijn » Enable multiple themes in Jobberbase
  2. E.J. Semeijn » Jobberbased template v2

Leave a Response