Sometimes the App needs a nicer look & feel, so its necessary to organize the assets for this and Yii can help a lot to make it easy. In this article I provide tips for handling multiple "Designs". I use these three features:
- AssetBundle
- Layouts
- Themes
What do you need for desingning your website:
- CSS files
- JS files
- some Images or other media.
Lets call it "DesignAssets"
What Yii needs:
- one or more Layout files
- the view files
- AssetBundle set in the layout-file
Lets call it "DesignTemplates".
So how to bundle these and where is the best place to put them in your application directory?
Via "theming" ¶
- myYiiApp
- ...
- designs
- myDesign1
- put here all your "DesignTemplates" (AssetBundle,layout, and view folder/files, when using themes)
- myDesign1
Using layouts ¶
- myYiiApp
- ...
- views
- layouts
- myDesign1.php (layout file)
- ...
- layouts
Both ¶
myYiiApp
- ...
web
- designs
- myDesign1
- put here all your "DesignAssets" (css, js, img, etc.)
- myDesign1
- designs
...
So you can work with the default security file-rights for the correct purpose.
UseCase one ¶
Write an App and distribute it to some Customer. Here can it be necessary that every customer wants a personal design.
Solution: Using themes ¶
you config in your web.php or main.php (advanced template) whats documented here
if you need special "DesignAssets"
put your "DesignAssets" und the web directory
myYiiApp/web/designs/myDesign1/css
and js
and img
folders
customize your
myYiiApp/designs/myDesign1/assets/MyDesignAsset.php
and your layout file
myYiiApp/designs/myDesign1/layout/main.php
thats it.
UseCase two ¶
you need several designs for e.g. controllers. so my remmmendation is using layouts, because easy switching in controller action.
Solution with layouts ¶
there is no need to configure anything in the config files
if you need special "DesignAssets"
put your "DesignAssets" und the web directory
myYiiApp/web/designs/myDesign1/css
and js
and img
folders
create and customize your
myYiiApp/assets/MyDesignAsset.php
and your layout file
myYiiApp/views/layout/mydesign1.php
in your controller action set your layout.
public function actionIndex() {
$this->layout = 'mydesign1';
}
may it helps your start with designing Yii.
is this tutorial for yii2.0 basic or advance?
i am using the Advanced Template, but the Theming logic ist the same in the basic ProjectTemplate, so it should work on both.
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.