I'm new to theming, so please bear with me. I have a Views Slideshow which I am displaying inside a Panels pane. The slideshow functions, but all the images are left aligned. I would like to either center or right-align the images, but nothing I've tried so far seems to work. It's difficult to discover who controls what, because, between Views and Panels, there are about 10 levels of divs before reaching the actual image tag, and each div has a large number of very long classnames!

I have a local css file in my theme folder, specified in my .info file, and have classnames/ids inside which should match what's appearing in Firebug. However, my CSS doesn't seem to be applied. The "style.css" that came with the theme (I made a sub-theme of Business Responsive) seems to always trump my local css file. My file is declared after "style.css" in the .info file, so it should win out in a CSS specificity battle.

Am I missing something obvious? Your sage advice is appreciated. :)

  • So, I have determined that my CSS was, in fact, correct, but it was getting stomped by the style.css file. Is placing a CSS file in the theme directory and declaring it in the .info file not enough? The declaration came after the style.css file in the .info file, so I thought that would make my version take precedence. Apparently not! Is there something else I need to do (other than adding my code directly to the style.css file, which works) that needs to be done in order to make my local.css file "win out" over style.css? Thanks, again! – eljefejb Jun 27 '13 at 23:19

If your CSS styles are being stomped, this is due to CSS specificity standards. Basically, the more detailed the path in your CSS statement is, the higher its specificity is.

For example, suppose you have the following.

<div id="outer" class="outer">
    <div id="inner" class="inner">

CSS styles specified on div will be trumped by div.outer; this in turn is trumped by div#outer. div.inner will be trumped by div.outer div.inner.

To have your CSS styles override the default ones, they need to have a higher specificity.

Keep in mind that:

  • Inline styles trump everything
  • Next come classes
  • Then ids
  • Nested paths are considered more specific than non nested paths

For example, suppose you have the following CSS styles.

div.outer div.inner { width: 80px; }
div#outer div.inner { width: 90px; }
div#outer div#inner { width: 100px; }
div.inner { width: 70px; }

You'll end up with a width of 100 pixels.

If you can add a CSS class easily at any point in the hierarchy, do that and include it in your CSS selector; you should be golden.

  • I understand that part. What I was wondering (in my second comment) was if, given two selectors of equal specificity, one being defined in "style.css" and one being defined in "local.css", with "local.css" being declared last in the .info file, why the local version shouldn't be applied by the browser? Might there be some PHP theme function which is changing the order in which different stylesheets are applied, or should the declaration in the last defined stylesheet win out? Also, don't id selectors have a higher value than class selectors? – eljefejb Jun 28 '13 at 16:25
  • Guess I should clarify that a bit: Once I got the proper CSS code, it wasn't showing up when added to my local.css file. If I placed the exact same code in the style.css file, it worked. My confusion is that the local.css file is declared in the .info file after style.css. I don't get why it gets applied if it's in one file versus the other. – eljefejb Jun 28 '13 at 17:31
  • Stylesheets can be added in a number of different ways programatically, so it will depend on how your theme implements this. The first thing to check is the load order in the <head>, to see if your sheet is actually being loaded after. If it isn't, find where the theme is loading the stylesheets, and see if it is using weightings, or some other special-casing. You can always remove your stylesheet from the theme.info and implement your own theme_preprocess_html in the templete.php to load your stylesheet with a weighting to drop it to the bottom. – Dom Day Jun 28 '13 at 23:09
  • You're right, my stylesheet isn't showing up in the <head> at all. Does that mean that the theme must be ignoring whatever is declared in the .info file, then? – eljefejb Jul 1 '13 at 18:14
  • It could be ignoring the declarations, or perhaps you've left out part of the path to the css. You could comment out one of the theme added files and see if it's still loaded. If it is, your next place to look is your theme's template.php and find the _preprocess_html hook, for css load statements – Dom Day Jul 1 '13 at 21:05

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.