Yii 2 Theming
Configuration
Setup theme in configuration file. For the basic application [app]/config/web.php
:
<?php ... $config = [ 'id' => 'basic', ... 'components' => [ 'view' => [ 'class' => 'yii\web\View', 'theme' => [ 'basePath' => '@app/themes/dirt', 'baseUrl' => '@web/../themes/dirt', 'pathMap' => [ '@app/views' => ['@app/themes/christmas', '@app/themes/dirt'], '@app/modules' => '@app/themes/dirt/modules', '@app/widgets' => '@app/themes/dirt/widgets', ], ], ], //'layout' => 'mycustomlayout', // `@web/themes/mytheme/views/` contain mycustomlayout.php in this case ], 'params' => $params, ]; ...
Create Theme
Folder structure
Create theme in [app]/themes/[mytheme]/
. Anything below that should follow the [app]/views/
folder structure, starting with layouts
, site
, etc. You can include additional folder for libraries and CSS files as well.
- [app] --- themes ----- [mytheme] ------- layouts <-- to override views/layout ------- site <-- to override views/site ------- css <-- for CSS assets ------- lib <-- for library assets
Main Layout
Sample layout form: [app]/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"> <!-- Main Content --> <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 Acme.com </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(); ?>
Reference: http://www.bsourcecode.com/yiiframework2/install-new-theme-in-yiiframework-2/
Custom Layout for Views
Some views can have additional custom layout by simply overriding them with a new file stored in the theme. For example, to override the about
view, create file [app]/themes/[mytheme]/site/about.php
:
<?php /* @var $this yii\web\View */ use yii\helpers\Html; $this->title = 'CUSTOM About'; $this->params['breadcrumbs'][] = $this->title; ?> <div class="site-about"> <h1><?= Html::encode($this->title) ?></h1> <p> This is the CUSTOM ABOUT page. You may modify the following file to customize its content: </p> <tt><?= __FILE__ ?></tt> </div>