How can I ensure that override.css is loaded last?

**GK User** Wed Jun 27, 2012 7:36 pm

Hi everybody!

I have made some customizations in override.css for some components and extensions but I have noticed that the override.css style sheet is not loaded in the end resulting in losing my style changes. Other .css files of some components and modules are loaded after that in the <head> section of the page. Is there a way to ensure that the override.css will be loaded in the end? Thanks in advance,

Panagiotis Tsogkarakis

**GK User** Thu Jun 28, 2012 8:13 am

If the module/component add inline styling or dynamically generated you can only override this styles by using !important declaration after CSS property like :

Code: Select all: a {color: red !important}

Also the more 'detailed' selectors are useful if you want to override default styling, please try use structure like this :

Code: Select all: body#gkBg > div > a.selectorClass {}

**GK User** Thu Jun 28, 2012 1:47 pm

Thank you very much for your response!

So there is no way to force the override.css to load in the end I suppose.

Anyway, my problem is with the path of the background images I use on some elements (<li>,<div> etc) at which they appear OK in the frontpage but not in the subpages if I use the Custom CSS field. So I ended up with the solution of combining the use of override.css only for the images background property and the Custom CSS field for all the other style changes since the Custom CSS field is being generated in the end of the <head> tag.

Cheers
Panagiotis Tsogkarakis

**GK User** Fri Jun 29, 2012 10:13 am

Please try to copy code from override.css file and paste to 'custom CSS' field in template developer's settings.