Theming

Theme Directory Structure

applications

assets

system

themes

| theme_name

   | css

   | images

   | js

   | views

   | index.php

uploads

For a theme to work, we only need the layout file (index.php). But we will need the css, images, js, views to support our theme.

Layout File (index.php)
By default, the theming system will look for index.php within the theme folder. It will serve as a layout file. In this file, we can define our layout for the theme, where we want to put our header, content, footer, sidebar, etc.

You can put widgets in this layout file. You can create widget with a format like this {widget_name}. You can put it anywhere in your layout file. If you want to fill the widget in your home file for example, you can use this code in home controller:

$this->setWidget('widget_name', 'The content of the widget');
or
$this->setWidget('widget_name', $this->load_view('inc/some_view', $data, TRUE));

Or if you like a more Object Oriented approach, you can create a Widget Class within application/widgets folder. For this example, create a class Widget_name and put it into application/widgets folder. The Widget class must have a function named render to show output to your html.

You can have more than 1 layout file. In the controller, you will use index.php as a default layout file, but you can change the layout file using this code:
$this->layout_file = 'layout2';

CSS, Images, Js Folder
The name of these folder is self-explanatory. We put our css in the css folder, images in images folder, javascript in js folder. You can change the directory name if you don't like it.

Views Folder
Normally, CI will use view files in application/views/ folder, which serves as a default view in CIExt. You can replace/append the default view with your theme specific view. To do this, you must create a view with the same name within the themes/your_theme/views/ folder. For example we want to append home.php. So create a file home.php in themes/your_theme/views/ folder. The content of home.php would be something like this:

<div id="theme_specific_id">
<?php echo $content; ?>
</div>

$content is the result of the default view file located in application/views/ folder. Of course you can eliminate the $content and create your theme specific view file.