Creating a YII application theme from a HTML template.

Last week I was working on a  project,that was developed  using YII.Client requested some new features in the existing application and asked us to change the old layout of the application.In this post I am using a HTML template to integrate in YII app.

I have built a default webapp using YII command line tool.If you are not familair with YII command line basic app creation you can check my previous post on YII.

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.
As we are working with YII default command line app,I have to create a form for contact us page.The form is created during the application creation now
we have to put a custom widget to have the contact us form.I have used all the default code from the app just added form inside new custom theme.
The theme is ready.

And Contact us is:

You can fork into my git repo and play with it from here.

N.B:My git YII_THEME app is outside the YII Framework directory,to run it you should keep the framework directory just before it.

To learn more about YII theming,you can check it.

About these ads

23 thoughts on “Creating a YII application theme from a HTML template.

  1. Pingback: Yii Radiio Episode #48 is up! | Clevertech

  2. que tal vos sabes que hice los pasos y no me anda, baje un template, y quise adaptar a mi sistema en YII pero no me funciono… no entiendo donde van colocadas las 4 carpetas. (js, css, images, views)…. y en el archivo main.php le coloque “themes”=>”mi_template/”, nose si estoy haciendo algo mal o que… GRACIAS

  3. Pingback: how to select theme dynamically in yii | Nuwan's Blog

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s