How to organize Design "things" in YII2 (themes and layout)

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#1)next (#3) »

Hello,

after working with YII2 for serveral Years and doing creating systems sharing Information over the web. I'm not a designer, so my look and feel is more functional :).

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.

Here my tipps for special purposes for handling multiple "Designs".

I use these three features, AssetBundle, Layouts, Themes.

What do you need for desingning your website:

  • CSS files,
  • JS files and
  • some Images or other medias. 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 and where is the best place to put which item?

in your yii app directory

method "theming"

  • myYiiApp
    • ...
    • designs
      • myDesign1
        • put here all your "DesignTemplates" (AssetBundle,layout, and view folder/files, when using themes)

OR method "using layouts"

  • myYiiApp
    • ...
    • views
      • layouts
        • myDesign1.php (layout file)
      • ...

and for both

  • myYiiApp

    • ...
    • web

      • designs
        • myDesign1
          • put here all your "DesignAssets" (css, js, img, etc.)
    • ...

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.

1 0
2 followers
Viewed: 8 180 times
Version: 2.0
Category: Tips
Written by: s.oli
Last updated by: samdark
Created on: Jul 24, 2018
Last updated: 6 months ago
Update Article

Revisions

View all history

Related Articles