Our Work

Yii2 theme integration for your application

Updated 1 year, 1 month and 24 days ago

First, you’ll need to create a folder named "themes" in the root directory.

Next, Create a "demo" folder  in "themes" and create JS & CSS sub folders in "themes"

Now Add the theme related JS and CSS files in JS and CSS folder.

Create a folder named "web" and add a new Asset File which holds all js and css files.

You can configure DemoThemeAsset.php in the following way:

<?php
namespace app\themes\demo\web;
use yii\web\AssetBundle;
/**
* AssetBundle
*
* @since 0.1
*/
class DemoThemeAsset extends AssetBundle
{
public $sourcePath = '@app/themes/demo';
public $css
= [
'css/demo.css'
];
public $js = [
'js/demo.js',
];
public $depends
= [
'yii\web\JqueryAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
'yii\jui\JuiAsset',
];
public $cssOptions = ['position' => \yii\web\View:OS_BEGIN];
/**
* @inheritdoc
*/
public function init()
{
parent::init();
}
}

You'll need to create a header.php, footer.php and main.php files in themes/demo/views/layouts folder.

Add the following details in header.php file.

<?php
clinicThemeAsset::register($this);
//Add HTML to display in the header

Add the following details in main.php file.

<?php
/* @var $this \yii\web\View */
/* @var $content string */
use ktree\app\helpers\Url;
use app\themes\demo\web\clinicThemeAsset;
use yii\widgets\Breadcrumbs;
use yii\helpers\Json;
clinicThemeAsset::register($this);
?>
<?php $this->beginContent('@app/views/layouts/base.php'); ?>
<?= $this->render('@app/views/layouts/header.php') ?>
<!-- Breadcrumbs -->
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div class="col-xs-12">
<?= Breadcrumbs::widget(
[
'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
'options' => ['class' => 'breadcrumb'],
]
) ?>
</div>
</div>
</div>
</div>
<!-- Breadcrumbs End -->
<div class="container">
<?= $content; ?>
</div>
<?= $this->render('@app/views/layouts/footer.php') ?>
<?php $this->endContent(); ?>

Add below array in config/main.php components section

'view' => [
'theme' => [
'basePath' => '@app/themes/demo',
'baseUrl' => '@app/themes/demo',
'pathMap' => [
'@app/views' => '@app/themes/demo/views',
],
],
],

 

Tags

Related Posts