One of the biggest drawbacks of a framework is the absence of built in theming functionality. CodeIgniter is no exception to that rule. Although there are quite a few libraries out there which aim to provide theming support, they don’t feel like being part of the framework. I was annoyed with having to use anything which looks like an ugly hack so I created a library which supports themes in CodeIgniter in a native style.

First of all let’s see how this baby works:

Using themes:

$this->load->theme('demo');
$this->load->view('home');

Loading CSS and Javascript files from within your views:

$this->load->css('/themes/demo/css/styles.css');
$this->load->js('/themes/demo/js/javascript.js');

Yes that was all. It is that simple.

Structure of your files

In the same path as your application folder create a theme folder and inside it a folder with the theme’s name. Also create a folder with the theme’s name inside views.

Inside the download you will see how the demo theme is structured.

/application/views/demo/...    (Your views go here)
/themes/demo/css/...           (CSS files)
/themes/demo/js/...            (Javascript files)
/themes/demo/theme.php         (The theme file itself)

Bonus: Caching control

Have you noticed that sometimes when you update your css or javascript files the changes don’t take effect until the browser empties it’s cache ? This library supports a suffix for all css and javascript files which allows you to control the caching of your files by the browser. Inside the config folder you will find a file mainframe.php. Make sure you autoload it and set a version for your files.

$config['cjsuf'] = '0.1';

When you change that version to say 0.2, browsers will be forced to reload them since they think it is a different file.

Inside the download there is a demo theme to get you started

Download it here

They say that one image is one thousand words and in this case it’s true. I won’t say much, the image speaks for itself. This is a screenshot from the most popular Greek site. I followed this link from twitter. The article I was looking for was buried deep and I had to scroll, and scroll and scroll.

As you can see the article takes up 5% of the page (counted in pixels). The rest 95% is ads, menus, ads, offers, ads and some ads.

Most people I know use a piece of paper or a word document to take quick notes on things to be done in a web project. For me nothing is more to the point than handwritten notes on a screenshot of your app.

When you keep your notes on a text file, you will eventually have to get back to your application to remember what “background of sidebar on tasks overview page” actually refers to. When you take your notes on a screenshot, the word “grey” right above the sidebar does the trick. Visual note taking saves you from the annoying back and forth between your notes and your application. It’s like a post it with the text “buy milk” on your fridge.