Hi everyone,
I’m slightly moving all my company’s web application to YII2.
The first step of this process is to create a “porting” of actual applications’ UI into a YII2 theme.
This theme will be replicated among different installation on YII2,
Therefore, I’m trying to create a new theme in a “portable” way, i.e. in a way that will allow me to replicate it on several installations just copying a single (compressed) folder, like many CMS do.
So I’m trying to figure out the right way to do so, but I’m a little bit confused, in particular about assets’ management (css, js, fonts, images and so on).
Under /themes folder I created tha folder companytheme with this structure:
/themes
/companytheme
/css
|->style.css
/js
|->stuff.js
/fonts
|->myfont.tff
/views
/layouts
|->main.php
In order to access to my css folder, located under the companytheme folder instead of under app/web folder, do I have to add the ThemeAsset.php as the following?:
/themes
/companytheme
/assets
|->ThemeAsset.php
Will ThemeAsset.php override /app/assets/AppAsset.php or both configurations will co-exist?
Hi @Antonio_Giovanni_Sch
Which asset files are used depends on a view (or layout) file. If you want to use the asset in all views, open views/layouts/main.php. There is a line AppAsset::register($this);. You can add a line to register your asset file to override/merge or replace the line to ignore the AppAsset file. Also do not forget when registering new asset file in a view, to add line
use app\themes\companytheme\assets\ThemeAsset
Without it, application cannot find your asset file.
Read more about how the assets work here.
Hi @kubove and thank you for your reply.
Yes, I’d like to define an asset under my theme folder and share it with all my views.
I tried to follow your suggestions, but I still have issues.
I defined the following asset bundle in the file /themes/companytheme/assets/ThemeAsset.php
<?php
namespace companytheme\assets;
use yii\web\AssetBundle;
class ThemeAsset extends AssetBundle {
public $basePath = '@app/themes/companytheme/views';
public $baseUrl = '@app/themes/companytheme/';
public $sourcePath = '@app/themes/companytheme/';
public $css = [
'css/site.css',
'cssframework/dist/css/cssframework.min.css',
];
public $js = [
'cssframework/dist/js/cssframework.min.js',
];
public $depends = [
'app\assets\AppAsset',
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset'
];
}
And my /theme/companytheme/views/layouts/main.php is like:
<?php
use app\widgets\Alert;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
use yii\widgets\Menu;
use app\themes\companytheme\assets\ThemeAsset;
$theme = $this->theme;
$asset = ThemeAsset::register($this);
?>
<?php $this->beginPage(); ?>
<!DOCTYPE html>
<html >
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Yii2 Template">
<?php $this->registerCsrfMetaTags() ?>
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="all">
<link type="text/css"
rel="stylesheet"
href="<?php echo $asset->sourcePath ?>/cssframework/dist/css/cssframework.min.css"
media="screen"/>
</head>
<body>
.......
</body>
</html>
Unfortunately,it does not work. I get the following error:
Unknown Class – [yii\base\UnknownClassException]
Unable to find ‘app\themes\companytheme\assets\ThemeAsset’ in file: C:\MyYII2ProjectFolder/themes/companytheme/assets/ThemeAsset.php. Namespace missing?
But i defined a new namespace in my ThemeAsset.php file!
You need to edit the namespace and remove the basePath and baseUrl attributes in the file ThemeAsset.php. In this situation you will need only sourcePath attribute which defines path to your css/js/other files. For example, the file site.css should be placed in C:\MyYII2ProjectFolder/themes/companytheme/assets/css/site.css
ThemeAsset.php
<?php
namespace app\themes\companytheme\assets;
use yii\web\AssetBundle;
class ThemeAsset extends AssetBundle {
public $sourcePath = '@app/themes/companytheme/assets';
public $css = [
'css/site.css',
'cssframework/dist/css/cssframework.min.css',
];
public $js = [
'cssframework/dist/js/cssframework.min.js',
];
public $depends = [
'app\assets\AppAsset',
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset'
];
}
