Yii register CSS file, to be the last one (after assets)

php css yii registration

18,969

Solution 1

Registered assets by CClientScript are always added before the title

In your case you should add your CSS after the title, to guarantee the order you want

Solution 2

In Yii2, a good way to accomplish this is by using the 'depends' option on registerCssFile as shown in the documentation

$this->registerCssFile("http://example.com/css/themes/black-and-white.css", [
    'depends' => [BootstrapAsset::className()],
    'media' => 'print',
], 'css-print-theme');

Solution 3

//example 1
class someWidget extends YourExtendsionClassName
{
    public function init()
    {
        parent::init();
        Yii::app()->getClientScript()->registerCssFile('/path/to/your/css/file.css');
    }

    // or

    public function run()
    {
        Yii::app()->getClientScript()->registerCssFile('/path/to/your/css/file.css');
            parent::run();
    }
}

//example 2

//Layouts file main.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>Title</title>
<?php Yii::app()->getClientScript()->registerCssFile('/path/to/your/css/file.css'); ?>
</head>

18,969

Author by

Philippe Boissonneault

I'm a programmer :)

Updated on June 12, 2022

Comments

Philippe Boissonneault almost 2 years
Is there a way in Yii to register js or css files to load them after those loaded by the assets manager.

I use a css file to override styles from some Yii extensions, but Yii includes my file before the assets generated by the extension.

I know I can change the extension to remove the css files from the assets manager and add them manually with registerCssFile but that's not the way I want to do this.

Here's what I have :
```
<head>
...
    <link rel="stylesheet" type="text/css" href="/css/MY_CSS.css" />
...
    <link rel="stylesheet" type="text/css" href="/assets/8e838803/css/EXTENSION_CSS.css" />
...
</head>
```
Here's what I want:
```
<head>
...
    <link rel="stylesheet" type="text/css" href="/assets/8e838803/css/EXTENSION_CSS.css" />
...
    <link rel="stylesheet" type="text/css" href="/css/MY_CSS.css" /> 
</head>
```
Any help would be appreciated!