Yii Framework 2 : Install New Theme

Themes is very important to make cool our application. In yiiframework 2.0, we are having lot of new features in theming compare to yiiframework 1.0 like We can override the the active theme.

Install Theme

First we have to install the theme in yiiframework2.0.Please follow the below step to run new theme.

  1. Create new folder inside the application like "themes"
  2. Download the yii2.0 theme or create new theme like "NEWTHEME" inside the "themes" folder
  3. Create "layouts" folder inside the "NEWTHEME" folder
  4. Create "main.php" file inside the "NEWTHEME/layouts" folder

Configuration Of Theme

Theme component of application is available (if not we want to add) inside the 'config/web.php' file under the components array. Here we have to set theme configuration as array.
pathMap - it override the original path to theme path.

Format 1:

'components' => [
    'view' => [
        'theme' => [
            'pathMap' => ['@app/views' => '@app/themes/mytheme'],
            'baseUrl' => '@web/../themes/mytheme',
        ],
    ],
],
Format 2:

'components' => [
'view'=>[
    'theme' => [
        'pathMap' => [
            '@app/views' =>[
                '@app/themes/mytheme',
                '@app/themes/yourtheme'
            ]
        ],
        'baseUrl' => '@web/../themes/mytheme',
        ],
    ],
]

Sample theme layout "project/themes/mytheme/layouts/main.php"


<?php
use yii\helpers\Html;
use yii\widgets\Menu;
use yii\widgets\Breadcrumbs;

?>
<?php $this->beginPage(); ?>

<html>
    <head>
        <!--Import materialize.css-->
        <link
            type="text/css"
            rel="stylesheet"
            href="<?php echo $this->theme->baseUrl; ?>/css/materialize.min.css"
            media="screen,projection"/>
        <link type="text/css"
              rel="stylesheet"
              href="<?php echo $this->theme->baseUrl ?>/css/style.css"
              media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Imre Mehesz">
        <meta name="description" content="A simple design based on Material UI and MaterializeCSS.">
        <meta name="robots" content="all">
    </head>
    <body>
    <?php $this->beginBody() ?>
    <div class="container">
        <!-- Navbar goes here -->
        <nav>
            <div class="nav-wrapper">
                <a href="#" class="brand-logo right"><?php echo Html::encode(\Yii::$app->name); ?></a>
                <?php
                echo Menu::widget([
                    'options' => [
                        "id" => "nav-mobile",
                        "class" => "left side-nav"
                    ],
                    'items' => [
                        ['label' => 'Home', 'url' => ['site/index']],
                        ['label' => 'About', 'url' => ['site/about']],
                        ['label' => 'Contact', 'url' => ['site/contact']],
                        ['label' => 'Login', 'url' => ['site/login'], 'visible' => Yii::$app->user->isGuest],
                    ],
                ]);
                ?>
                <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
            </div>
        </nav>
        <!-- Page Layout here -->
        <div class="row">
            <div class="right col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
                <p>
                    <?php echo $content; ?>
                </p>
            </div>
            <div class="left col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
                <div class="card">
                    <div class="card-image">
                        <img src="<?php echo $this->theme->baseUrl ?>/images/rose.jpg">
                        <span class="card-title">TF Violet</span>
                    </div>
                    <div class="card-content">
                        <p>I am a very simple card. I am good at containing small bits of information.
                            I am convenient because I require little markup to use effectively.</p>
                    </div>
                    <div class="card-action">
                        <a href="#">This is a link</a>
                    </div>
                </div>
            </div>
        </div>
        <footer class="page-footer">
            <div class="container">
                <div class="row">
                    <div class="col l6 s12">
                        <h5 class="white-text">Footer Content</h5>
                        <p class="white-text text-lighten-1">You can use rows and columns here to organize your footer
                            content.</p>
                    </div>
                    <div class="col l4 offset-l2 s12">
                        <h5 class="white-text">Links</h5>
                        <li><a class="white-text" href="#!">Link 1</a></li>
                        <li><a class="white-text" href="#!">Link 2</a></li>
                        <li><a class="white-text" href="#!">Link 3</a></li>
                        <li><a class="white-text" href="#!">Link 4</a></li>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <div class="container white-text center">
                    © 2015 ThemeFactory.net
                </div>
            </div>
        </footer>
    </div>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<?php echo $this->theme->baseUrl ?>/js/materialize.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".button-collapse").sideNav();
        });
    </script>
    <?php $this->endBody(); ?>
    </body>
</html>
<?php $this->endPage(); ?>

  • depepe dpp

    thanks

  • Luis Gonzalez

    Cool

  • Alankar Singh

    I wanted to setup a theme for Yii 2 with advanced application template, Can you please guide me how to do that.

  • I use the yii2 basic template and I done all the steps

    My theme directory is like this:

    themes/
    └── eztech-material
    ├── css
    │ ├── materialize.css
    │ ├── materialize.min.css
    │ └── style.css
    ├── font
    │ ├── material-design-icons
    │ │ ├── LICENSE.txt
    │ │ ├── Material-Design-Icons.eot
    │ │ ├── Material-Design-Icons.svg
    │ │ ├── Material-Design-Icons.ttf
    │ │ ├── Material-Design-Icons.woff
    │ │ └── Material-Design-Icons.woff2
    │ └── roboto
    │ ├── Roboto-Bold.eot
    │ ├── Roboto-Bold.ttf
    │ ├── Roboto-Bold.woff
    │ ├── Roboto-Bold.woff2
    │ ├── Roboto-Light.eot
    │ ├── Roboto-Light.ttf
    │ ├── Roboto-Light.woff
    │ ├── Roboto-Light.woff2
    │ ├── Roboto-Medium.eot
    │ ├── Roboto-Medium.ttf
    │ ├── Roboto-Medium.woff
    │ ├── Roboto-Medium.woff2
    │ ├── Roboto-Regular.eot
    │ ├── Roboto-Regular.ttf
    │ ├── Roboto-Regular.woff
    │ ├── Roboto-Regular.woff2
    │ ├── Roboto-Thin.eot
    │ ├── Roboto-Thin.ttf
    │ ├── Roboto-Thin.woff
    │ └── Roboto-Thin.woff2
    ├── js
    │ ├── materialize.js
    │ └── materialize.min.js
    └── layouts
    └── main.php

    I am run the project like this:

    php -S localhost:8000

    then I acces to http://localhost:8000/ is the console show me the following error:

    [Mon Mar 14 08:15:52 2016] ::1:59206 [404]: /themes/mytheme/css/style.css – No such file or directory

    and via HTTP show me the following error:

    Not Found

    The requested resource /themes/mytheme/css/materialize.min.css was not found on this server.

    Any idea?

    • Done is work!

      in my “config/web.php”

      ‘view’ => [
      ‘class’ => ‘yiiwebView’,
      ‘theme’ => [
      ‘class’ => ‘yiibaseTheme’,
      ‘basePath’ => ‘@app/themes/my-material’,
      ‘baseUrl’ => ‘@web/my-material’,
      ‘pathMap’ => [‘@app/views’ => ‘@app/themes/my-material’],
      ],
      ],

      My layout called “main.php” into “themes/my-material/layouts” directory like this:

      themes/
      └── my-material
      └── layouts
      └── main.php

      An very important all my static resources into web directory like this:

      web/my-material/
      ├── css
      │ ├── materialize.css
      │ ├── materialize.min.css
      │ └── style.css
      ├── font
      │ ├── material-design-icons
      │ │ ├── LICENSE.txt
      │ │ ├── Material-Design-Icons.eot
      │ │ ├── Material-Design-Icons.svg
      │ │ ├── Material-Design-Icons.ttf
      │ │ ├── Material-Design-Icons.woff
      │ │ └── Material-Design-Icons.woff2
      │ └── roboto
      │ ├── Roboto-Bold.eot
      │ ├── Roboto-Bold.ttf
      │ ├── Roboto-Bold.woff
      │ ├── Roboto-Bold.woff2
      │ ├── Roboto-Light.eot
      │ ├── Roboto-Light.ttf
      │ ├── Roboto-Light.woff
      │ ├── Roboto-Light.woff2
      │ ├── Roboto-Medium.eot
      │ ├── Roboto-Medium.ttf
      │ ├── Roboto-Medium.woff
      │ ├── Roboto-Medium.woff2
      │ ├── Roboto-Regular.eot
      │ ├── Roboto-Regular.ttf
      │ ├── Roboto-Regular.woff
      │ ├── Roboto-Regular.woff2
      │ ├── Roboto-Thin.eot
      │ ├── Roboto-Thin.ttf
      │ ├── Roboto-Thin.woff
      │ ├── Roboto-Thin.woff2
      │ └── Roboto-Thin.woff2
      ├── images
      │ └── rose.jpg
      └── js
      ├── materialize.js
      └── materialize.min.js

      Then rerun my local with the command:

      php -S 127.0.0.1:8000 -t web/

      And access to the URL http://127.0.0.1:8000/

      I can see my Yii2 basic template using materializeCSS, as show in the following screen capture.

      Thanks ^_^ !