PHP development framework YiiFramework tutorial (47) Theme example

Theming is a system that customizes the appearance of a webpage in a Web application. By using a new theme, you can easily change the appearance of the application.

Theming is a system that customizes the appearance of a webpage in a Web application. By using a new theme, you can easily change the appearance of the application.

In Yii, each topic is represented by a directory, including view files, layout files, and related resource files, slices, CSS files, and JavaScript files. The topic name is his directory name. All topics are stored in the same directory WebRoot/themes. At any time, only one topic can be activated.

Tip: The default topic root directory WebRoot/themes can be configured as another one. You only need to configure the attributes basePath and baseUrl of the themeManager application component for your desired value.

To activate a topic, set the theme attribute of the Web application to your desired name. It can be configured in application configuration or modified in the controller action during execution.

Note: topic names are case sensitive. If you try to start a nonexistent topic, yii: app ()-> theme will return null.

The content in the topic directory is organized in the same way as that in the application base path directory. For example, all view files must be located under views, Layout view files are located under views/layouts, and system view files are located under views/system. For example, if we want to replace the create view file of PostController with a classic topic, we will save the new view file WebRoot/themes/classic/views/post/create. php.

For the controller view file in the module, the corresponding topic view file will be placed under the views directory. For example, if the PostController is in a module named forum, we should save the create view file as WebRoot/themes/classic/views/forum/post/create. php. If the forum module is nested in another support module, the view file should be WebRoot/themes/classic/views/support/forum/post/create. php.

In this example, by modifying the UI component ActiveForm in Yii Framework Development Tutorial (11), we add two headers for it. for simplicity, the two themes are named cyan and gray respectively, it is named after the background color.

First, create the themes directory under the application directory structure, then create two subdirectories, cyan and gray, and then copy the missing protected/views to the two subdirectories respectively, as the initial version of Theme.

Use the default Css definition of Yii, and copy them to two sub-directories of the topic as the initial CSS file.

Below are some slight modifications to the CSS files under the two themes to demonstrate differences. modify css/main.css to modify the background color of the body.

Body
{
Margin: 0;
Padding: 0;
Color: #555;
Font: normal 10pt Arial, Helvetica, sans-serif;
Background: #00 FFFF;
}

The color is Cyan and Grey respectively.

Then modify layout/main. php to reference the CSS file under the topic. in a topic view, we often need to link other topic resource files. For example, we may want to display an image file in the images directory under the topic. With the baseurl attribute of the currently activated topic, we can generate the following url for this image File:

Yii: app ()-> theme-> baseUrl.

'/Images/FileName.gif:

Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>





Href =" Theme-> baseUrl;?> /Css/screen.css"
Media = "screen, projection"/>
Href =" Theme-> baseUrl;?> /Css/print.css"
Media = "print"/>

Href =" Theme-> baseUrl;?> /Css/main.css "/>
Href =" Theme-> baseUrl;?> /Css/form.css "/>
<? Php echo Yii: app ()-> name. ''. Yii: app ()-> theme-> name ;? </P> <p>

Theme Name: Theme-> name;?>

After the topic is defined, you can configure the theme attribute of the Application to set the current topic:

Return array (
'Theme '=> 'cyany ',
......
);

The two topics are shown as follows:

If the specified topic does not exist, the default display mode is used: