Menu
I have installed Yii2 advanced application, and now I want to change backend theme.
How can I do this?
Is there any file where I need to tell Yii2 that use my custom theme?
I established my theme under backend/web/themes/mytheme.
I just replaced this code in advanced/backend/config/main.php, but nothing happened!
'view' => [
'theme' => [
'pathMap' => ['@app/views' => '@app/themes/mytheme'],
'baseUrl' => '@web/themes/mytheme',
],
],
Then I replaced this code under common/config/main.php but nothing changed!
469
To install a new backend or frontend theme ( I did one page Bootstrap theme), please follow the below steps:
Copy the theme content i.e. directories like js, css, images, fonts etc to for instance backend->web folder.
Change your backend->assets->AppAsset.php class i.e. modify $css and $js arrays like
public $css = [
//'css/site.css',
'css/font-awesome.min.css',
'css/main.css',
'css/prettyPhoto.css',
'css/bootstrap.min.css',
];
public $js = [
//'js/bootstrap.min.js',
'js/html5shiv.js',
'js/jquery.isotope.min.js',
//'js/jquery.js',
'js/jquery.prettyPhoto.js',
'js/main.js',
'js/respond.min.js',
];
Please keep in mind to comment out core JQuery and Bootstrap JS files as they are provided by Yii2 by default.
Modify the backend->views->layouts->main.php file as under:
<?php
/* @var $this \yii\web\View */
/* @var $content string */
use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use common\widgets\Alert;
use webvimark\modules\UserManagement\models\User;
use webvimark\modules\UserManagement\UserManagementModule;
AppAsset::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<?= Html::csrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<!--[if lt IE 9]>
<script src="<?= Yii::$app->request->baseUrl ?>/js/html5shiv.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="<?= Yii::$app->request->baseUrl ?>/images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?= Yii::$app->request->baseUrl ?>/images/ico/apple-touch-icon-57-precomposed.png">
<?php $this->head() ?>
</head><!--/head-->
<body data-spy="scroll" data-target="#navbar" data-offset="0">
<?php $this->beginBody() ?>
<header id="header" role="banner">
<div class="container">
<div id="navbar" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#main-slider"><i class="icon-home"></i></a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#about-us">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</header><!--/#header-->
<?= $content ?>
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-sm-6">
© 2013 <a target="_blank" href="http://shapebootstrap.net/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">ShapeBootstrap</a>. All Rights Reserved.
</div>
<div class="col-sm-6">
<img class="pull-right" src="<?= Yii::$app->request->baseUrl ?>/images/shapebootstrap.png" alt="ShapeBootstrap" title="ShapeBootstrap">
</div>
</div>
</div>
</footer><!--/#footer-->
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
Now adjust your other content pages according to theme, place sections of the theme on your pages that suits you :)
Let me know if anyone comes across any difficulty :)
190
Create a view folder in your themes/mytheme and move all view files like main.php into it and other layouts needed.
Also you can set your basic layout in the backend\config\main.php like
return [
'id' => 'app-backend',
'layout'=>'yourtheme', //your `themes/mytheme/views/` contain yourtheme.php in this case
...
Also change pathmap to
'pathMap' => ['@app/views' => '@app/themes/mytheme/views'],
In the backend folder make a theme folder .In file backend/config/main.php the components section add the code given below ,files in this folder will behave like the view folder in backend .
'view' => [
'theme' => [
'basePath' => '@backend/themes/demo',
'baseUrl' => '@backend/themes/demo',
'pathMap' => [
'@backend/views' => '@backend/themes/demo',
],
],
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
