Let's restyle the home page of our example CRM application in such a way that it'll have snowflakes in background and an enlarged title "Our CRM" on it. There's no real meaning behind the snowflakes (yet). Right now, our SiteController.actionIndex() method looks like this:

    public function actionIndex()
    {
        return 'Our CRM';
    }

So, it doesn't really render any view file and, as a result, the layout is not applied. Change the actionIndex() method to:

    public function actionIndex()
    {
        return $this->render('homepage'),
    }

Then, make the views/site/homepage.php file with the letters Our CRM as the only content inside it. Nothing else is needed here.

All acceptance tests should still pass after this change.

As the theme is a directory with view files, and those view files override the view files that already exist in your code base, let's create a themes/snowy/views/site/homepage.php view file.

We'll also use a separate asset bundle for this theme, so create the directory for it, named assets/snow. Also, create a SnowAssetsBundle.php class file in the assets directory and a snow.css CSS file in the assets/snow directory.

The resulting directory tree should look like the following (files highlighted in green are to be created):

The snow assets bundle will have the obvious declaration:

class SnowAssetsBundle extends AssetBundle
{
    public $sourcePath = '@app/assets/snow';
    public $css = ['snow.css'];
    public $depends = ['app\assets\ApplicationUiAssetBundle'];
}

It depends on the main assets bundle because we want it to override the default styles, that is, be loaded last.

CSS is really simple; we just apply a background to the body and add a class to make some text stand out:

body {
    background: #a6e1ec url(snow.jpg) repeat;
}
.inside-snowflakes {
    margin: 10% 15%;
    font-size: 2em;
}

The image of the snowflakes is inside the code bundle, which can be downloaded from the Packt Publishing website and is courtesy of Jordan Lloyd. The URL is http://www.flickr.com/photos/jordanlloyd/5342749399/in/photostream/.

After this, we apply the new assets bundle and wrap the text inside the newly styled container in homepage.php, as follows:

<?php appassetsSnowAssetsBundle::register($this); ?>
<p class="inside-snowflakes">Our CRM</p>

So, the preparations are done; there's a theme contained in a folder and a new asset bundle is referenced from this theme. Now to apply the newly created theme to the site, we need to add the following declaration to the components.view.theme application configuration key:

    'components' => [
    ...
        'view' => [
            ...
            'theme' => [
                'class' => yiiaseTheme::className(),
                'basePath' => '@app/themes/snowy',
            ]
        ...

],

Here is the end result that you should get:

It's a bit silly but illustrates the concept well. The real power of themes comes with their dynamic loading based on some condition, which ideally should be done during application loading. The first option is to create a subclass of yiiwebApplication with the appropriate override of the init() method and instantiate it inside the index.php entry point script. The second option is to use the event system and add a hook to the yiiaseApplication::EVENT_BEFORE_REQUEST event. We will discuss more on events in Chapter 10, Events and Behaviors.