Ok, now your first Yii App is running. You have made some scaffold on one of your databases and everything is fine. Let’s imagine now that you want to have two different looks of your web APP. One look for the guests and one look for the signed in people. Well, let’s use themes.

Themes

The use of themes is done through a folder themes in the same level as protected folder (not inside). By default, Yii has added a folder named classic which is the skeleton of a theme folder.

If I want to use twitter bootstrap assets I’ll just download it and put all assets: css, js, images folders inside a folder bootstrap/assets inside the folder themes.

My final folder, after having downloaded Twitter Bootstrap, will look like this.

folderStep1

 

By the way, you should download the bootstrap archive that comes with the documentation and examples. Otherwise you wil have to recreate your own index page to bind the bootstrap’s assets.

 

You will have to create a folder views inside your new bootstrap theme because, basically, what you are going to put there is going to override your existing files inside the protected/views folder.

A a side remark, the main file that is going to impact your site is always the main.php found inside the layouts folder. So it is not necessary to rebuild all views for a new theme. The default views inside the protected folder will take the layout of the chosen theme.

 

Themes views

So, I’m not going to get you too far, I’m just going to create the base layout using bootstrap. So, inside of views, create a layouts folder. Copy into it an example page from the bootstrap download and rename it to main.php.

Don’t forget to copy all assets folders inside the folder of the new theme (css, images, js, …).

You should now have this :

 

folderStep2

If you use modules you will have to create the module folder under views and then the subsequent folders. For example, if you have a forum module you will have a forum folder under folder views in folder themes. And remember, if the framework doesn’t find anything inside the theme it it will take the default views (in protected/views).

The main layout page of each theme

Now you will have to use the Yii commands you have in protected/views/layouts/main.php inside themes/bootstrap/views/layouts/main.php. In order to access and include the assets (css, js, images) of your new theme.

Those commands look like this in the orginal main.php file:

//to get to the default css
<!--?php echo Yii::app()--->request-&gt;baseUrl; ?&gt;

This command will enable you to give the right path to the css or anything linked by html. However, in your theme, you will have to change that one by this:

//to get assets in theme
<!--?php echo Yii::app()--->theme-&gt;baseUrl; ?&gt;;

For the rest all remain the same, don’t forget to also have that line in your new main.php file :

//Renders the views in the layout
<!--?php echo $content; ?-->

That line is the most important one. Afterwards, just copy the widgets if you want to.

 $this-&gt;widget('zii.widgets.CMenu',array( 'id'=&gt;'nav',
			'items'=&gt;array(
				array('label'=&gt;'Home', 'url'=&gt;array('/site/index')),
				array('label'=&gt;'About', 'url'=&gt;array('/site/page', 'view'=&gt;'about')),
				array('label'=&gt;'Contact', 'url'=&gt;array('/site/contact')),
				array('label'=&gt;'Products', 'url'=&gt;array('/products')),
				array('label'=&gt;'Customers', 'url'=&gt;array('/customers')),
				array('label'=&gt;'Login', 'url'=&gt;array('/site/login'), 'visible'=&gt;Yii::app()-&gt;user-&gt;isGuest),
				array('label'=&gt;'Logout ('.Yii::app()-&gt;user-&gt;name.')', 'url'=&gt;array('/site/logout'), 'visible'=&gt;!Yii::app()&gt;user-&gt;isGuest)
			),
		)); 
//and also the breadcrumb if needed
 if(isset($this-&gt;breadcrumbs)):
		$this-&gt;widget('zii.widgets.CBreadcrumbs', array(
			'links'=&gt;$this-&gt;breadcrumbs,
		));

Ok, now, let’s switch to our new theme in the app. This is the first easy way. Go to your protected/config/main.php file and edit it, copy the following in the application parameters, just under the name of the web app for example.

'name'=&gt;'MyProject',
'theme'=&gt;'bootstrap',

Remember, Yii maps practically everything in the code with the folder names. So, the theme name must be exactly the same is the folder’s name inside themes folder.

Go to your URL and boom, you should see something different than the previous default look.

 

bootstrap-view

More than one theme

NOW, what if I want two different looks for my app.
It is easy to switch themes since you only have to edit the main.php file inside config. It is also easy to assign a theme by type of user.

Now, we can imagine that there will be 2 kinds of theme,
◆ One theme for the site’s guests
◆ One theme for the authenticated users

Let’s imagine we already have two themes in our themes folder : boostrap and gesttheme. And each of these themes has its own layout.

To switch between both theme you cannot use the configuration file because there is no test in it. You must refer to another key file of Yii which is the controller.php file inside folder protected/components

this file is the master controller from which all your web app’s controllers extend. When you open it, it is fairly empty. We can create here an init function which is going to test which type of user is using the app right now.

Just add the following function and conditional settings in the init action

public function init()
        {
                if (Yii::app()-&gt;user-&gt;isGuest) {
                        Yii::app()-&gt;theme = 'gesttheme';
                } else {
                        Yii::app()-&gt;theme = ‘bootstrap;
                }

                parent::init();
        }

As you noticed, once the user is logged in, the theme is switched. You’ve learned also that the Yii Web App has a base controller from which all other controllers derive.

So each view and layout found in those themes will override the existing views.

Easy as pie.