I have RTL layout for my yii2 application using airani\bootstrap\BootstrapRtlAsset. However, I want to customize the Bootstrap using this online tool.
The tool generates a css file which I want it to be linked directly before bootstrap-rtl.css comes from BootstrapRtlAsset.
The only way, that I know, to do that, is creating new AssetBundle in app/assets like the following:
<?php
namespace app\assets;
use yii\web\AssetBundle;
class ThemeAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/theme.min.css',
];
public $js = [
];
}
Then I should add it in the $depends of AppAsset:
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'app\assets\ThemeAsset',
'airani\bootstrap\BootstrapRtlAsset',
];
So is there any other way that allows me to replace app\assets\ThemeAsset with just the path of the css file css/theme.min.css without need to create new AssetBundle?
Use registerCssFile() Concept
http://www.yiiframework.com/doc-2.0/yii-web-view.html#registerCssFile%28%29-detail
You just need to modify the file: frontend/assets/AppAsset.php, add one line.
public $css = [
'css/theme.min.css',
... Your other css ...
];
Related
I want to include the path of css/js files in service-worker for caching.
what I see Yii deployes css/js files to a dynamic directory using hash in AppAssets.
for example
/assets/a7fd2538/css/site.css
so is there a way I can disable this hashed directory a7fd2538.
and I get just
/assets/css/site.css
Thanks.
You can put your asset files directly to some accessible directory. For example in web/css/ and web/js/. Then you will set your AppAssets bundle to use them directly without copying by specifing $basePath and $baseUrl and leaving $sourcePath empty.
For example:
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
];
public $js = [
'js/site.js',
];
// ... other definitions
}
FileInput works fine with yii2 default theme.
But after change to AdminLTE Theme, almost Kartik-v widget does not work.
Anyone know problem and solution ?
namespace app\assets;
use yii\web\AssetBundle;
class AdminLTEAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'themes/AdminLTE/bootstrap/css/bootstrap.min.css',
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css",
'themes/AdminLTE/dist/css/AdminLTE.min.css',
'themes/AdminLTE/dist/css/skins/_all-skins.min.css',
'themes/AdminLTE/plugins/iCheck/flat/blue.css',
];
public $js = [
'themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js',
'themes/AdminLTE/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js',
"https://code.jquery.com/ui/1.11.4/jquery-ui.min.js",
'themes/AdminLTE/bootstrap/js/bootstrap.min.js',
"https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js",
'themes/AdminLTE/plugins/sparkline/jquery.sparkline.min.js',
'themes/AdminLTE/plugins/slimScroll/jquery.slimscroll.min.js',
'themes/AdminLTE/plugins/fastclick/fastclick.js',
'themes/AdminLTE/dist/js/app.min.js',
'themes/AdminLTE/dist/js/pages/dashboard.js',
'themes/AdminLTE/dist/js/demo.js',
];
public $depends = [
'yii\web\YiiAsset',
];
}
I solved this by removing this line:
'themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js',
i've been trying to load a simple CSS (custom.css) from the frontend and backend of my project and I't has been a real pain.
The css is located in:
frontend/views/web/css/custom.css
It loads without problems in the frontend... this is the AppAsset file located in the frontend:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main frontend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/site.css',
'css/custom.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
So I just thought that the AppAsset file located in backend should look like this:
<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/**
* Main backend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'css/custom.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
But all I get when loading the backend index is this:
http://localhost:8888/backend/web/css/custom.cssFailed to load resource: the server responded with a status of 404 (Not Found)
Sorry for the noob question and thanks in advanced. Just want to share a css between frontend and backend.
One direct way to do this is to have a common web accessible folder under app root. Something like /assets, which you can access from both BackEnd and FrontEnd. You would need to edit your .htaccess to allow this as well.
Yii2 will publish assets only if $sourcePath is set, and $basePath and $baseUrl are not set(!)
Therefore:
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $sourcePath = '#app/assets/app';
public $css = [
'css/openbook.css',
'fontello/css/fontello.css',
'fontello/css/animation.css'
];
public $js = [
'js/plug.openbook.js',
'js/plug.interpret.js',
'js/plug.drop.message.js'
];
public $depends = [
// 'yii\web\YiiAsset',
// 'yii\bootstrap\BootstrapAsset',
];
}
in the main layout:
use frontend\assets\AppAsset;
...
AppAsset::register($this);
If you want to load a share resource i.e js or css , in YourAsset class sourcePath must be "#yourSource/web/",
for example if you want to load a css file in frontend which is located in common/web/css/ directory , your AppAsset or any other custom asset class resides in common/ must have following variables initialize
public $sourcePath = "#common/web";
public $basePath ="#common";
Note : "#ewbroot" path & $baseUrl ="#web" will locate to your current accessing path, in this case it is frontend
& will load it
"localhost/yii-application/frontend/css/filename.css"
so you must omit it.
you can register the file on any view or layout itself
<?php $this->registerCssFile('http://domain.com/frontend/web/path/file.css');?>
or
you can also add the full path in asset bundle
public $css = [
'http://domain.com/frontend/web/path/file.css',
];
I am doing a web app on Yii2 framework. Defined (extended) new AssetBundle
class NeonAsset extends AssetBundle {
public $sourcePath = '#app/themes/neon/';
public $css = [
'css/font-icons/entypo/css/entypo.css',
'...',
'...'
];
public $js = [
'js/be_in_head_tag.js',
'...',
'...',
];
}
When rendered, CSS files are being published in <head> tag, and JS files at the bottom of <body> tag. It is ok.
But I want a single be_in_head_tag.js file to be published in <head> tag. And when I use $jsOptions it moves all JS files into the <head> tag.
Is it possible to make options only for one file?
One of the variants make that file into a separate asset class:
class HeadPublishAsset extends AssetBundle {
public $sourcePath = '#app/themes/neon/';
public $js = ['js/be_in_head_tag.js'];
public $jsOptions = ['position' => \yii\web\View::POS_HEAD];
}
And add a dependency to your base class like:
class NeonAsset extends AssetBundle {
...
public $depends = ['app\assets\HeadPublishAsset'];
...
}
I'm pleased to say that the ability to do this at the file level has been added to Yii2 at some point. It doesn't however appear in any of the documentation examples. I've tested and confirmed...
class NeonAsset extends AssetBundle {
public $sourcePath = '#app/themes/neon/';
public $css = [
'css/font-icons/entypo/css/entypo.css',
'...',
'...'
];
public $js = [
['js/be_in_head_tag.js', 'position' => \yii\web\View::POS_HEAD],
'...',
'...',
];
}
Options included in the $js array are now passed to the relevant method and result in the file being included in the selected part of the html file.
I don't know if there's an official way of doing it (probably not as it would make the specification of the options object overly complicated), however there's another easier way compared to the accepted answer which doesn't require you to create another AssetBundle.
All you need to do is create another array, for example:
public $head_js =
[
"path/to/src.js"
];
Then override the registerAssetFiles function like so:
public function registerAssetFiles($view)
{
foreach($this->head_js as $js)
{
$options = [];
$options["position"] = \yii\web\View::POS_HEAD;
$url = Url::to($this->baseUrl . "/" . $js);
$view->registerJsFile($url, $options);
}
parent::registerAssetFiles($view);
}
I have a module with two views, I need that each view have its own assets files, because of this I wrote a AssetBundle called DashboardAsset for my dashboard view, this is the code.
class DashboardAsset extends AssetBundle
{
public $sourcePath ='#asketchFront/assets/resources/';
public $basePath = '#webroot';
public $baseUrl = '#web';
public $js =
[
"js/src/dashboard.js"
];
public $css =
[
"css/dashboard.css",
'font-awesome/css/font-awesome.min.css',
];
}
Then in my dashboard view I put the following code line:
DashboardAsset::register($this);
afertward when I want to see my page, the following error messages are displayed in the console
GET http://localhost/js/src/dashboard.js localhost/:478
GET http://localhost/css/dashboard.css localhost/:19
GET http://localhost/font-awesome/css/font-awesome.min.css
Why this happens??
I solved the problem removing the basepath and the baseurl attributes