Yii Theme Development

The three simple steps are:
1.Choose a HTML template and keep it under the theme directory an declare it in application configuration.
2.Making valid directory structure so that framework configuration can identify the theme
3.Add PHP code to the static HTML template

Step 1.
For this post I have used a Open Source Free HTML5 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
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.

<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

<title><?php echo CHtml::encode($this->pageTitle); ?></title>
For menu you have to add

<?php $this->widget(‘zii.widgets.CMenu’,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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s