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.

  • 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 '15 at 22:07
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

|improve this answer|||||
  • 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. – Ross Highet Dec 27 '15 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. – Ross Highet Dec 27 '15 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 '15 at 3:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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