Tuesday, 9 April 2013

Customizing theme in yii framework

              I am being working on a php project from last couple of months. I am creating a project using the yii framework. After having hands on experience with yii framework I came to know that this is much better framework as compared to that of the CI(codeignitor) or other frameworks available in market. Anyways I am not taking side of any framework I was sharing my experience. After facing some problems in theming section of my project I finally decided to go for the customized theme. In the beginning I thought it would b a difficult task or me as I am new to yii framework but then after some attempts I realize that it is much easier than that of my imagination.
            We can customize our them in three simple steps , these are :
Step 1: Choose a HTML template and keep it under the theme directory an declare it in application   configuration.Step 2: Making valid directory structure so that framework configuration can identify the theme.Step 3: Add PHP code to the static HTML template.

Step 1: .For this post I have used a Open Source Free HTML 5  template,you can choose you own and play with it.
Declare the theme name into the application configuration and it is application/protected/config/main.php and add
1
'theme'=>'custom_theme',
Here “custom_theme” is the name of the theme I am using.

Step 2:Keep the HTML template into the themes folder of the application.And create four directory named as follows:
>>js: here we will keep all the javascript files
>>css: here we will keep all the css files
>>images:will keep images related to the theme
>>views:here we will have to create two more directory inside it=> sites and layouts.Here we will keep our files.
Inside layout the main.php file should be kept and this file is inherited by all over the theme.
And inside layout we can keep static and custom layouts like contact us,log in etc.

Step 3:.In t his step we will add php code to our html template so that it can work properly and dynamic.
1
2
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl;?>/css/style.css" />
<?php Yii::app()->clientScript->registerScriptFile(Yii::app()->theme->baseUrl.'/js/script.js'); ?>
For title you have to add
1
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
For menu you have to add
1
2
3
4
5
6
7
8
9
<?php $this->widget('zii.widgets.CMenu',array(
            'items'=>array(
                array('label'=>'Home', 'url'=>array('/site/index')),
                array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
                array('label'=>'Contact', 'url'=>array('/site/contact')),
                array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
            ),
        )); ?>
And the main layout is ready,as other pages are inherited from this main.php the theme is almost ready.
           Your theme will look something like this.