Professional theming with CodeIgniter

Published on : May 11, 2013

Author: Masum

Category: Our Blog

Today we will convert a professional HTML into CodeIgniter theme-

We will work on the following design layout

There are 5 parts in this template (1. Header, 2. Left menu, 3. Content area, 4. Right menu, 5. Footer)

For quick understanding we will break this template into three parts

Header
Body (left menu + content area + right menu) and
Footer

Let’s get started now –

First off create a folder with the name “assets” where we will place CSS, JS, and Images.

On “CodeIgniter/application/config/config.php” confirm that we already have the base URL. If not it will be your_domain_name/root_folder_location.

Form “CodeIgniter/application/config/autoload.php”, you can set your libraries, helper, language etc.

Now follow the instructions below:

Keep your CSS files into “assets/css”, js file “assets/js” and images “assets/images” folder.
Replace your CSS and JS links as [href=<?=base_url(“assets/css/style.css”)?>], images links as [src=<?=base_url(“assets/images/pic1.jpg”) ?>]
Separate your html into three parts (header, body and footer)
In “CodeIgniter/application/views/templates” create a blank php file with the name “header.php” and paste your HTML’s head content into it.
Create another php file in the same location with the name “footer.php” and paste your HTML’s footer content in it.
You can create all common part(s) in this location.
In “CodeIgniter/application/views/” create folder with the name “pages”. In this folder we will keep all different part(s) of the HTML except header and footer parts.
Create a blank php file with the name “home.php” into “pages” folder.
Paste your body content into “home.php” file.
Compile your new CodeIgniter template and it should work.

Note: if any folder(s) and file(s) is missing please create them according to the instruction.

you could download the Source Code from here !