I'm starting a new project in Yii2 and Composer (after a few projects with YII 1).
I created a new "advanced project" with composer. Everything is okay but, I'm wondering what is the best way to customize the bootstrap theme?
I think copying the whole bootstrap less to the backend and to the frontend and edit the two variables file and compile it isn't the right way.
So: is it somehow possible to extend the less files downloaded by the composer and edit only the two variables file?
Bootstrap configuration can be done by changing variables.less. The following BootstrapAsset is the replacement of original one, that uses bootstrap-variables.less in current directory instead of original variables.less.
namespace app\assets;
use yii\helpers\FileHelper;
use yii\web\AssetBundle;
class BootstrapAsset extends AssetBundle
{
public $sourcePath = '@bower/bootstrap/dist';
public $css = [
'css/bootstrap.css',
];
public function publish($am)
{
if ($this->sourcePath !== null && !isset($this->basePath, $this->baseUrl)) {
list ($this->basePath, $this->baseUrl) = $am->publish($this->sourcePath, $this->publishOptions);
}
$src = \Yii::getAlias($this->sourcePath);
FileHelper::copyDirectory("$src/../less", $this->basePath."/less");
$vars = file_get_contents(__DIR__ . "/bootstrap-variables.less");
$css = \Yii::$app->cache->get("bootstrap-css-".crc32($vars));
if (!$css)
{
file_put_contents("$src/../less/variables.less", $vars);
ini_set('xdebug.max_nesting_level', 200);
$less = new \lessc();
$less->setFormatter(YII_DEBUG ? "lessjs" : "compressed");
unlink($this->basePath . "/css/bootstrap.css");
$less->compileFile("$src/../less/bootstrap.less", $this->basePath . "/css/bootstrap.css");
\Yii::$app->cache->set("bootstrap-css-".crc32($vars), file_get_contents($this->basePath . "/css/bootstrap.css"));
}
else
{
file_put_contents($this->basePath . "/css/bootstrap.css", $css);
}
}
}
assets/BootstrapAsset.php?assets folder, then you add BootstrapAsset::register($this); to your layout in views/layouts/main.php. But then I have the problem that the class lessc is not available so I can't use it afterall...
Not sure I understand the question. Why do you not create a custom.css or custom.less file that you load last and just overwrite what you need? Another solution would be to extend the less file http://css-tricks.com/the-extend-concept/ and use the extended file instead of the normal one.
I am using the basic app.
To change some Bootstrap properties (field height for example) I did the following:
Create a new css-file with changed properties: web\css\bootstrap-modified.css
Add this file to assets\AppAssets.php:
public $css = [ 'css/site.css', 'css/bootstrap-modified.css' ];
In basic app..(yii2)../.
First create your css in (in website folder)Basic->web->css->custom.css(Your CSS File)
After that if we want add new css to our site, go to (in website folder)Basic->assets and open AppAsset.php.
and add 'custom.css' after 'css/site.css' like below.
-------------------------------------------------------
<?php
namespace app\assets;
use yii\web\AssetBundle;
/**
* @author Qiang Xue <[email protected]>
* @since 2.0
*/
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',
];
--------------------------------------------------------------------
You can add it in your page by
use app\basic\web\css;
I didn't want to include another copy of Bootstrap, I wanted to customize it. So the answer is to load your customized copy of Bootstrap instead the base bootstrap.
A good tutorial is found here
