How to override a CSS directive

[GregL]

I'm finally grasping how to override the behavior of CE with models,
views and controllers. Now I want to override the css of the default
theme. I would like to change the appearance of the "#hd" selector in
the header. This lives in screen.css. I tried making my own copy of
screen.css in my public/stylesheets, but mine is not used. I tried
restarting mongrel and clearing my browser cache, but the #hd still
has the default CE styling.

[Levi Rosol]

someone will correct me if i'm wrong, but css changes need to be made in CE since CE copies those files to your public folder upon server start.

--
Levi Rosol
Twitter: @LeviRosol

[GregL]

So perhaps a better way would be for me to override the view and
change the id for #hd to #my_hd and define that in my CSS.

[Bruno Bornsztein]

Nope. Sorry Levi, that's incorrect.

Greg, you just need to override the application layout (or better yet, _scripts_and_styles.html.haml) and include a link to your stylesheet after the link to CE's screen.css. 

Then you just need to redefine the style rule for #hd.

Make sense?

Good luck,

Bruno

[GregL]

Thanks, Bruno. That both works and doesn't work. In Safari, the two
#hd styles are being merged. Activating Safari's Develop menu lets me
see what styles they are applying to a DOM element, and they clearly
indicate they are getting two #hd, one from each file. I don't know if
Firefox or IE are doing that too. I can be clever and apply the same
styles inside #hd as you do, but in ways that cancel CE's. So if CE's
says

#hd{border-top: 4px solid #780000;}

then I have to do

#hd{border-top: 0px solid #780000;}

and make it 0px high, and then I get the behavior I want (which is to
not have the red stripe).

This works in Firefox too.


On Oct 28, 6:09 pm, Bruno Bornsztein <bruno.bornszt...@gmail.com>
wrote:

> Nope. Sorry Levi, that's incorrect.
>
> Greg, you just need to override the application layout (or better yet,
> _scripts_and_styles.html.haml) and include a link to your stylesheet

> *after* the

[Jim Ruther Nill]

hi Greg!

Try removing all the stylesheets linked inside script_and_styles and add your own stylesheets on the last line. That should work. But that would really mess up the views if you don't follow the classes/ids used by Bruno.

Another way is to copy all the stylesheets used by CE in your public/stylesheets directory, rename each files and edit the ones you want to edit.  After editing them, remove all the linked stylesheets in script_and_styles and link your stylesheets at the bottom of the file.

--
"We do not believe in ourselves until someone reveals that deep inside us is valuable, worth listening to, worthy of our trust, sacred to our touch." - E. E. Cummings

[Bruno]

> > Thanks, Bruno. That both works and doesn't work. In Safari, the two
> > #hd styles are being merged.

That's how CSS works (it cascades the stylesheets).

> > #hd{border-top: 4px solid #780000;}
>
> > then I have to do
>
> > #hd{border-top: 0px solid #780000;}
>
> > and make it 0px high, and then I get the behavior I want (which is to
> > not have the red stripe).

That's correct (you could also do #hd{ border-top: none;} ); the idea
is that you probably want to keep most of CE's styles and just modify
them a little in your own stylesheet. You can always use the !
important flag to make your style rule take precedence over any CSS
rules that are higher in the hierarchy. If you don't want any of CE's
styles, then just don't include CE's stylesheet in your
scripts_and_styles.