Yii2 theme integration
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!
Yet another approach to change theme in Yii2 is:
Create a themes directory in web folder in frontend or backend where you want to change theme.
place your theme folder inside themes directory.
-
change $css and $js variables in AppAsset.php in assets folder in frontend or backend like:
public $css = [ //'css/site.css', 'themes/theme_folder/css/font-awesome.min.css', 'themes/theme_folder/css/slicknav.css', 'themes/theme_folder/css/style.css', 'themes/theme_folder/css/responsive.css', 'themes/theme_folder/css/animate.css', 'themes/theme_folder/css/colors/red.css', //'themes/margo/asset/css/bootstrap.min.css', ]; public $js = [ 'themes/theme_folder/js/jquery.migrate.js', 'themes/theme_folder/js/modernizrr.js', 'themes/theme_folder/js/jquery.fitvids.js', 'themes/theme_folder/js/owl.carousel.min.js', 'themes/theme_folder/js/nivo-lightbox.min.js', //'themes/theme_folder/js/jquery-2.1.4.min.js', //'themes/theme_folder/asset/js/bootstrap.min.js' ];
Do not include core bootstrap css, bootstrap js and jquery js as these are core APIs that are provided by Yii2. I have commented them above.
-
Use the below code to reference theme resources (css, js, images etc) in your main.php layout file or other site pages:
<?= Yii::getAlias('@web/themes/theme_folder') ?>/images/margo.png
There is no need to include css or js files in layouts->main.php file :)
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',
],
],
],