Yii Framework 2 : Install New Theme

Yii Framework 2.0

Yii Framework 2 : Install New Theme

Posted on December 6, 2023 by dathoang

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.

Create new folder inside the application like “themes”
Download the yii2.0 theme or create new theme like “NEWTHEME” inside the “themes” folder
Create “layouts” folder inside the “NEWTHEME” folder
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(); ?>