1

Hello I have a strange situation that I just cannot get my head around and I hope someone can help.

If I add css directly in page.tpl as:

<style type="text/css">
  my css
</style>

Everything works as I expect. However, when I move the css to file called ross.css, and add stylesheets[all][] = css/ross.css to my theme.info file the browser will parses the css code but the effect is not what I'm expecting. I don't know if I should post all the css in here as I don't think the code can be the problem if it displays as I expect when I insert it directly on the page.

PS: I'm using a bootrap-based theme.

1
  • So, in both cases, Drupal references the CSS definitions. What changes is the order of their position within the rendered page DOM. It sounds like a classic case of CSS specificity and precedence. It's not a Drupal issue per se. Take a look at this page css-tricks.com/specifics-on-css-specificity and see if this helps your understanding any.
    – Screenack
    Dec 26, 2015 at 22:07

1 Answer 1

0

I suspect it's because, when it's ross.css, your css gets applied before another .css file; while, when it's in .tpl it gets applied after.

Ex: if h1 exists with the same command, it uses the last h1 (which is in some other .css file).

JS FIDDLE EXAMPLE

So try adding !important; to your css. ex: h1 { border: solid red !important; }

JS FIDDLE EXAMPLE 2

3
  • thans very much for the replies chaps. I had a feeling it was to do with the ordering of the css files and thats why i posted in the drupal stack specifically. I'm using a bootstrap theme and im calling the bootstrap css files directly from the cdn via a link in the page.tpl. I couldnt/cant work out how how to change the order of the css files being called. Dec 27, 2015 at 1:41
  • i will have to have a think about it and try a few things but i appreciate all the help offered. I will mar this as fixed in a bit as i suppose it is fixed. Ill just have a try at trying to sort my css ordering. Im almost tempted just to go in and add !important to my css file though ive a feeling thats the wrong way to do it. Dec 27, 2015 at 1:43
  • !important is a last resort. Don't use it if you don't understand how it's working. Specificity and precedence matters. It worth the time to read up on it. Also inspector is your best friend. It will list style sheets in order of precedence.
    – Screenack
    Dec 27, 2015 at 3:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.