Override the existing CSS

Yii 1.1 General Discussion
1

Hi All,

I’m starting design new themes layout from scratch (start learning Yii of course :) ). Most of Yii function have already its own CSS (style.css) while generating content and it included in somewhere e.g assets folder ( gridview, detailview).

In order to have result that fit to my themes, I create a new CSS file in CSS folder, design a new themes.

But now the problem is, how to make my CSS (I created one, stylesheet.css) into the last order in rendering in view?.

Here the example:

In development view:

[indent]


<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="language" content="en" />

	</title><link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/insoul/stylesheet.css" />

    <script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/css/insoul/js/cufon-yui.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/css/insoul/js/arial.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/css/insoul/js/cuf_run.js"></script>

	

	<title><?php echo CHtml::encode($this->pageTitle); ?>

    <?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>

</head>

[/indent]

But after I view a table page (contains: CRUD function), I got additional CSS is loaded:

[indent]




	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="language" content="en" />

	</title><link rel="stylesheet" type="text/css" href="/testyi/css/insoul/stylesheet.css" />

    <script type="text/javascript" src="/testyi/css/insoul/js/cufon-yui.js"></script>

    <script type="text/javascript" src="/testyi/css/insoul/js/arial.js"></script>

    <script type="text/javascript" src="/testyi/css/insoul/js/cuf_run.js"></script>

	

	<link rel="stylesheet" type="text/css" href="/testyi/assets/884ba3ad/gridview/styles.css" /> 

	<link rel="stylesheet" type="text/css" href="/testyi/assets/760cf9c0/pager.css" />

	<script type="text/javascript" src="/testyi/assets/14db184d/jquery.js"></script>

	<script type="text/javascript" src="/testyi/assets/14db184d/jquery.ba-bbq.js"></script>

	<title>Testing Yii Development - Admin Employees    

	</head>

[/indent]

If I want to play with my CSS, I should load it at the last order,

[indent]




	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="language" content="en" />

	</title>

    <script type="text/javascript" src="/testyi/css/insoul/js/cufon-yui.js"></script>

    <script type="text/javascript" src="/testyi/css/insoul/js/arial.js"></script>

    <script type="text/javascript" src="/testyi/css/insoul/js/cuf_run.js"></script>

	

	<link rel="stylesheet" type="text/css" href="/testyi/assets/884ba3ad/gridview/styles.css" /> 

	<link rel="stylesheet" type="text/css" href="/testyi/assets/760cf9c0/pager.css" />

	<script type="text/javascript" src="/testyi/assets/14db184d/jquery.js"></script>

	<script type="text/javascript" src="/testyi/assets/14db184d/jquery.ba-bbq.js"></script>


	<link rel="stylesheet" type="text/css" href="/testyi/css/insoul/stylesheet.css" />

	<title>Testing Yii Development - Admin Employees    

	</head>

[/indent]

How can I achieve that?

Any help is really I appreciated.

Regards,

dondi.

2

Hi,

set the cssFile property of the CGridView widget to false - this will prevent the gridview .css file from loading.

Check api for more info.

3

What if he wants to use CGridView?

4

He stated that he created his own stylesheet to format gridview.

Setting cssFile to false will not prevent him from using CGridView, but from including its default formatting.

5

Hi drylko,

Thanks for the input. This solution solved my case immediately. Although I am still looking for the approach as I stated above, load my CSS stylesheet in the last sequence. Prevent load default formatting force me to rewrite ALL of default CSS. So, it will be inefficient if I only need do small changes from default formatting. :)

Glad if somebody could share this. :)

Rgrds,

6

Hi,

css files are rendered in order they were registered, so you have to make sure it is the last registered css file.

Try to register your css file in your layout/main.php with


Yii::app()->getClientScript()->registerCssFile('/testyi/css/insoul/stylesheet.css');

in that case all widget css files will be registered before, therefore rendered before, your css file.

cheers

7

Here is another scenario/example:

In your view you have a link:


echo CHtml::link('Scroll to top','#',array(

	'onclick'=>"$(window).scrollTop(0);",

	'class'=>'mylink'

));

The color of the link is red, because in your screen.css file is:




.mylink {

	color: red;

}

But, when you use a link in a CJuiDialog the color is green because in your jquery-ui.css file is:




.ui-widget-content a { color: green; }

If you want these links also to be red, simply add this line to your jquery-ui.css file:




.ui-widget-content a.mylink { color: red; } /*links in jquery widgets with 'class'=>'mylink'*/