systems:yii2:theming [Audina Documentation]

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>