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


'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.

<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(
			'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.
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.

Advertisements

24 comments

  1. Pingback: Yii Radiio Episode #48 is up! | Clevertech
  2. gezzeg · September 4, 2011

    Tq for this tutorial mushfiq! I have looking for this tutorial for some times!!!

    Thanks for the sample too! Its really working!

    • mushfiq · September 4, 2011

      Thanks a lot 🙂

  3. AAA · September 26, 2011

    hi
    complate sample ajax form

  4. uttamsinha · October 17, 2011

    Thanks a lot……..

  5. Caesar · November 14, 2011

    It worked. Thanks bro.

  6. Developer · January 16, 2012

    Great! Very useful. Neat explanation! cheers

  7. Innovative Web Provider · January 19, 2012

    I’ve been researching about this one. I’m glad I’ve found this post. Very informative. Thank you so much, The samples make me fully understand the whole concept. Thanks

  8. FARAZ · January 26, 2012

    Great Work Dude !!!

  9. ss · February 8, 2012

    thanku bro

  10. Jimako · February 14, 2012

    Excellent post! Many thanks for sample.

  11. Faysal Ahmed · March 20, 2012

    Reblogged this on Faysal Ahmed and commented:
    Thanks for the post, i am rebloging it to my blog.

  12. Praharah · July 28, 2012

    Thanks for a simple informative tutorial, I have one doubt , How can i link to images in the template?

    • mushfiq · July 28, 2012

      Something like Yii::app()->theme->baseUrl.'/images/image_name.jpg'

    • Bhavi · July 17, 2014

      yeah

  13. Rajendra (@rajendra_badri) · October 1, 2012

    Many thanks for this post mushiq

  14. webduos · December 5, 2012

    Thanks for this tutorial

  15. Martin Atlantico Rodriguez · January 23, 2013

    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

  16. hengky Tjhia · February 21, 2013

    Reblogged this on tjhia Blog's.

  17. Nicolae · May 26, 2013

    Thank you.You saved me a lot of time 😉

  18. Pingback: how to select theme dynamically in yii | Nuwan's Blog
  19. shop crane · July 8, 2014

    That is a great tip particularly to those new to the blogosphere.
    Simple but very accurate info… Thanks for sharing this one.
    A must read post!

  20. phpsovy · July 25, 2014

    Simple but very accurate info… Thanks for sharing this one.
    A must read post!

  21. patwo · September 28

    Thanks a lot. Very easy to understand. But I have one question… why the ‘contact.php’ was called from “custom_theme/views/site/contact.php” and not from “protected/views/site/contact.php” like the other?

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 )

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