I am working on a YII based Web application whose backend is based on bootstrap css. Now on front end YII's bootstrap is overriding custom css rules.
like one example is
tag. following is bootstrap generated css rules
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
line-height: 18px;
margin: 0 0 9px;
}
We do not have any margin for
but due to margin: 0 0 9px;
in bootstrap is effecting
whole page CSS
Issue is that how to override bootstrap rules while using custom CSS. I tired by adding in Action $this->layout='//layouts/main';
but it seems it is picking from Assets folder. Any help much appreciated.
One option - to realize backend as a separate module with its own layout or theme (you can add it to the init section of the Module class by setting: Yii::app()->theme = 'themename';
). For the frontend use a different layout or theme which will not connect bootstrap style files.
Another option - use a different layout for the frontend controller (public $layout='frontendLayout';
in a Controller class) which also should not be connected bootstrap stylesheets.
sometimes convenient to raise the priority of your style property by !important
. Example
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important;
font-size: 13px;
line-height: 18px;
margin: 0 0 9px;
}