Themeforest theme integration with Yii framework

Envato Customers Web and Code
1

I have gone through Yii documentation and successfully implemented two different themes for back end and front end of the website. Yii doesnt have good themes and I found themeforest having awesome bootstrap themes. So I installed Yii-booster and downloaded a themeforest theme with bootstrap support. I was wondering how to integrate it?

1)Do I have to make a new folder in themes folder, and replace css,js, images folder in root directory

OR

2)Replace the js,css and other folder/files at path protected/extensions/bootstrap/assets/apkjunky

OR

  1. Any other way ??
1 Like
2

I have converted the Metronic, Datta Able, Amezia, and Admiria admin themes for various projects. I have converted several Keene multipurpose frontend themes and recently the Zooki landing page theme. I usually build my own frontend themes. Prior to Bootstrap4, you had to be more careful when breaking the theme into partial views especially if the theme designer’s indents did not line up properly. With Boostrap4, look for the container tags as the cut and paste points for creating your partials.

My Datta Able main.php is shown below:

<?php use backend\themes\able\assets\AbleAsset; use yii\helpers\Html; use yii\bootstrap4\Nav; use yii\bootstrap4\NavBar; use yii\bootstrap4\Breadcrumbs; use common\widgets\Alert; AbleAsset::register($this); ?> <?php $this->beginPage() ?> <?php $this->registerCsrfMetaTags() ?> <?= Html::encode($this->title) ?> <?php $this->head() ?> 
<!-- Favicon icon -->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<?php $this->beginBody() ?> <?= $this->render('_partials/_preloader'); ?> 
<!-- [ navigation menu ] start -->
<?= $this->render('_partials/_sidebar'); ?>
<!-- [ navigation menu ] end -->

<!-- [ Header ] start -->
<?= $this->render('_partials/_header'); ?>
<!-- [ Header ] end -->

<!-- [ chat user list ] start -->
<?= $this->render('_partials/_chat_user_list'); ?>
<!-- [ chat user list ] end -->

<!-- [ chat message ] start -->
<?= $this->render('_partials/_chat_message'); ?>
<!-- [ chat message ] end -->

<!-- [ Main Content ] start -->
<?= Alert::widget() ?>
<?= $content ?>
<!-- [ Main Content ] end -->

<!-- Warning Section Starts -->
<?= $this->render('_partials/_warning'); ?>
<!-- Warning Section Ends -->
<?php $this->endBody() ?> <?php $this->endPage() ?>

My initial directory structure looks something like this:

themes
able
assets
css
img
js
plugins
AbleAsset.php
messages
de-DE
en-US
es-ES
ru-RU
zh-CN
modules
content
views
layouts
_partials
main.php
content
index.php
views
layouts
_partials
main.php
site
_partials
index.php
widgets
login
views

You can put create partials for your layout, your views, module views, block views and widget views. You control where the partials are loaded from by code in your layout files.

Part of my theme configuration for Datta Able looked like this:

    'view' => [
        'theme' => [
            'basePath' => '@backend/themes/able',
            'pathMap' => [
                '@app/views' => '@backend/themes/able/views',
                // modules
                '@bedezign/yii2/audit/views' => '@backend/themes/able/modules/audit/views',
                '@common/modules/backup/views' => '@backend/themes/able/modules/backup/views',
                '@common/modules/content/views' => '@backend/themes/able/modules/content/views',
                '@common/modules/faq/views' => '@backend/themes/able/modules/faq/views',
                '@common/modules/forum/views' => '@backend/themes/able/modules/forum/views',
                '@common/modules/gallery/views' => '@backend/themes/able/modules/gallery/views',
                '@dektrium/user/views' => '@backend/themes/able/modules/user/views',
                '@common/modules/search/views' => '@backend/themes/able/modules/search/views',
                '@dektrium/rbac/views' => '@backend/themes/able/modules/rbac',
            ],
        ],
    ],

The redirect lines shown above for modules can also be used for widgets, blocks and any other type of view you need to redirect.

In the very start of a conversion, I usually put a copy of the backend template’s /views directory under themes, rename it to whatever theme name I want to use.

All of the above are examples of my working code. I cut out a lot of redundant stuff.

3

The editor used on this site does not support hard spaces or tabs, so the directory structure shown above and the code between and is not aligned properly. Older versions of the Yii2 Definitive Guide did a much better job of describing the theming process. I will write a tutorial and put it on the Yii wiki.