Modify default YII theme

Hi guys

I am trying to learn a generic way to modify the default theme rather than using predesigned themes out there.

For example, I want to change the button style in Yii view OR I wan to change the default color (Blue) OR change the default font, etc,etc.

I want o know how can we modify each corner of the view then later on, I can modify any elements I want.

Thank you

its all about css. and jquery ui css also. and it is not very simple to do it in one minute. that’s my opinion.

Thank you. I was thinking the same but what if we dont want to use one of those fancy jquery widget? What if we want to change the default color?

Should we just modify the css file in CSS folder in the root?

Thanks

Yes. This really isn’t a Yii question. It’s more of a general web question. The Yii part is just where the files are located. That’s good, because it means that any useful examples, etc. that you can find on CSS will apply.

For example, if I want to change the Menu background color, I thought the following like doest that but it does not change the color





<?php $this->widget('zii.widgets.CMenu',array(

			'htmlOptions'=>array('bgcolor'=>'red'),

			

			'items'=>array(

...........................



instead of:


<?php $this->widget('zii.widgets.CMenu',array(

                        'htmlOptions'=>array('bgcolor'=>'red'),

                        

                        'items'=>array(

...........................

use:


<?php $this->widget('zii.widgets.CMenu',array(

                        'htmlOptions'=>array('id'=>'myMenu'),

                        

                        'items'=>array(

...........................

and then style myMenu in css

You may also want to check out this site, with Yii themes: http://yiithemes.mehesz.net/

Thank you.

I am trying to find some documentation about those CSS files (generated by gii) to find where to find the styling for each element

For example change the look of a button, change the background color when we have 2-column view,etc.

Any hint?

Thank you but we would rather modify the default theme and not using the predesigned theme. I myself tried couple of them the they dont want me to use them.

I agree with them as if I learn how to modify each element I want, I would be more productive :)

Thank you anyway :)

I just saw this posting, so if I’m to late…Sorry

The CSS files are located in webroot.css. The "main.css" is where you change the look. The others are for the Blueprint css framework.

So, as per your question, for changing a button: in your main.css. If you want to change ALL <button></button> tags


button {

   background-color: red;

   font-weight: bold;

}

or


input[type='button'] {

   background-color: red;

   font-weight: bold;

}

Understand that “SOME” browsers won’t change the background color of buttons. the second example is off the top of my head, so the selector [type=‘button’] might not be the exact coding.

As for the two column thing: Do you mean to change the background of the sidebar? There is a section in the main.css for the sidebar.


#sidebar {

   ...

}

just change it there.

If you are talking about the whole background of the document page, then you need to add a style=‘background-color:green;’ attribute to the appropriate <div> to get what you want.

Happy coding. jk

p.s. A NitPik: the CSS files are generated by Yiic webapp XXX, instead of gii 8)