Yii Quick Start 3 (Adding Theme) (UsbWebserver)

Yii Quick Start 3 (Adding Theme)

• Introduction
• Steps
• Conclusion

Introduction

This tutorial explains the role of the layout and theme in Yii website.

This tutorial continues from http://php-steps.blogspot.com/2013/11/yii-quick-start-2.html 

Steps

1) Using File explorer, browse {webroot}/protected/views/layouts/…

By default, there are three layout files; main.php, column1.php and column2.php

Layout files specify the arrangement of HTML elements of a Yii web page.

2) The display of HTML elements is further defined by the theme.

Using File Explorer, browse {webroot}/themes/…

The default theme is classic. It doesn’t contain anything actually.

3) We can add new themes by simply adding a theme folder into the themes folder and edit the configuration file.

3.1) For example, download a theme called “mattskitchen”, http://yii.themefactory.net/theme/download/?id=113 or from here, https://drive.google.com/file/d/0B86b-ALn-1MGR0RuYV9OYWlTeVE/edit?usp=sharing 

3.2) Extract the folder “mattskitchen” into the themes folder.

Make sure the folder structures follow the example below.

3.3) Edit the configuration file {webroot}/protected/config/main.php

Add the line ‘theme’=>’mattskitchen’,

4) Refresh your browser.

You should be getting a new look.

However, the HOME link doesn’t work.

5) This is because the index controller specified in the hyperlink could not be found.

If you open the file {webroot}/protected/controllers/SiteController.php, you won’t find the name actionIndex.

Instead actionIndex is defined in {webroot}/protected/controllers/PostController.php.

6) Edit the file {webroot}/themes/mattskitchen/views/layouts/main.php

Replace the word “site” with “post” (as shown in the example below).

7) Refresh your browser.

The index page problem is solved but the sidebar doesn’t show up.

It could be that the column2.php in mattskitchen is missing or not according to the initial column2.php

8) As a solution, copy the file {webroot}/protected/views/layouts/column2.php to the {webroot}/themes/mattskitchen/views/layouts/…

9) Refresh your browser. You may get the desired outcome now.

10) There are a lot of free themes available at http://yii.themefactory.net/theme that you can try out.

Conclusion

This tutorial explains the role of the Layout and Theme to define the arrangement and look of a Yii web page. You need to know the location of action methods and pages in order to call them properly. In addition to that, your knowledge in HTML and CSS elements would be beneficial to help you troubleshooting page layout or display problem.