How to edit variable and compile .less with Bootstrap in Yii Framework?

Question

I am using the php Framework Yii and I want to use it in combination with the Twitter Bootstrap Framework.

I did exactly the same steps like here: http://www.cniska.net/yii-bootstrap/setup.html for setting it up.

How can I change the default values for all the colors and so on? I changed it in the "variables.less" and it compiled successful even the bootstrap.less and the style.less, but nothing changed.

Sorry that I am such a newbie but could you tell which file I have to change and compile for changing the design?

Answer 1

Assuming your less files are compiling properly, the colors should be changing in the compiled CSS files. At which point, you need to make sure your HTML files link to the newly compiled CSS file.

Answer 2

As of Yii-Bootstrap ver 1.2.0, the css files are taken from path/to/bootstrap-extension/assets/css/ folder, therefore any changes you make to the base .less files should be compiled and stored in that folder. Check this line in the source:

Yii::app()->clientScript->registerCssFile($this->getAssetsUrl().'/css/bootstrap.css');

For example:

• Css folder for extension is: project-name/protected/extensions/bootstrap/assets/css/
• Base .less files in project-name/protected/extensions/bootstrap/lib/bootstrap/less/

• Make a change in project-name/protected/extensions/bootstrap/lib/bootstrap/less/variables.less :

  @white:                 #ffe;// changed from #fff
  

• Make a backup of original bootstrap.css just in case.

• Compile protected/extensions/bootstrap/lib/bootstrap/less/bootstrap.less file.
  Example (server-side command-line compiling & while in project-name folder):

  $lessc protected/extensions/bootstrap/lib/bootstrap/less/bootstrap.less > protected/extensions/bootstrap/assets/css/bootstrap.css
  

• Clear cache in browser, refresh to see change.

Answer 3

I got to know that it is a good idea to copy the bootstrap's less files into a less folder in the root directory and to edit and compile them there. In this way it would be easy to update the bootstrap framework.

In this less folder I have a style.less file which imports the bootstrap.less of the extentions/bootstrap/ folder and my single edited files. There I have to pay attention when I use variables of other files then I need to import some less files that the variables are defined.