CSS background image

When does it load.

[Broadway]

I'm making a sub theme for a Drupal theme.

I'm not editing the original css file, I've instead created a css file for the sub-theme and am making needed overwrite changes with it.

I'm trying to minimize browser calls for images, so pages load faster.

The default background for the <li> components of my navigation show background images. I don't want to use them.

Does the mere fact that they are mentioned in the original theme's css file cause the images to load?
(How about those that are only used on .hover?)

Since I don't want to use the images, in my sub-theme's css file I can just overwrite them with URL() - (leave it blank). But have the images already been called be cause they were mentioned in the original theme's css file? (Firebug seems to know when and where css rules have been changed, and that's on my client machine.)

I could just delete these image calls from the original theme's css file, but that creates a (nuisance) maintenance issue when updating to a new theme version.

What's the right way to handle this?

[lucy24]

Does the mere fact that they are mentioned in the original theme's css file cause the images to load?

I suspect it depends on the browser. But I detoured to double-check and got the same results in three browser families-- Firefox, Safari, Opera. In all three, the stylesheets are loaded before any background images. If a later stylesheet overrides an earlier one, only the final background image is requested.

For FF and Safari I tried it with a local style overriding the shared stylesheet; then I shifted the changed part to a second stylesheet and tried again in Opera. Same thing.

That's based on actual requests recorded in logs. But remember that if you have a stylesheet that says "background-image: suchandsuch" and it's being overridden by another stylesheet with no background-image, it isn't enough to make a fresh "body" style omitting this line. You have to say explicitly "background-image: none" or the earlier style will be used. Stylesheets are cumulative.

I didn't test, but I strongly suspect that any conditional images-- such as "on hover" --are loaded upfront, concurrently with the ones that are there all along. You can test this pretty easily if nobody knows offhand.

[ergophobe]

Generally speaking, you don't want to touch the Drupal base theme anyway.

The Drupal theming cascade is going to always recurse up from subtheme to base theme to system theming. If you declare something in the subtheme and the theme system gets a "hit" there, it shouldn't load the parent theme at all.

If you turn off CSS aggregation in Drupal, you should see all stylesheets that are getting loaded. Can you check to verify that the base theme stylesheets are getting loaded at all?

[Broadway]

Lucy, thank you for your efforts. And thank you for the correction of my syntax.

Ergophobe, I kind of got lost in your answer (this is my first sub-theme, I'm new to Drupal).

I thought proper form was to create a sub-theme.css file and just make css adjustments in it. That's what I'm doing, so yes, the parent css files have to be getting loaded too.

Is it better form to make a copy of all parent theme css files and place them in the sub-theme and edit them ad hoc there? In that case, I guess the parent css wouldn't be loaded?

Thanks.

[lucy24]

If you declare something in the subtheme and the theme system gets a "hit" there, it shouldn't load the parent theme at all.

Can you explain this in mechanical terms for those of us who don't speak Drupal? What's being requested from the server and when?

I'm thinking of the ordinary CSS cascade in which any later rule overrides an earlier one. So if your document uses bits of more than one stylesheet you have to list them from most general to most specific unlike, ahem, some internet-related functions one could name.

As in:

/sharedstyles.css
/thisdirectory/specialstyles.css
<style type = "text/css">
{individual styles that are specific to this document}

But I think we're secure on the image question: background images don't load up until the document is sure which image is required.

Now, this might come out different if the document references 26 stylesheets so they can't all be loaded up in one gulp. Then maybe it would go stylesheets, images, more stylesheets, more images. But let's not worry about that unless we have to ;)

[ergophobe]

>>background images don't load up until the document is sure which image is required.

I think that's really your answer for the specific question.

On the general concept...

Yes, your CSS base theme files will be part of the theme cascade as will your template files, your theme functions and so forth.

The Drupal template cascade is complex because you can target very specifically and through many levels. Essentially, for a template, Drupal starts with the most specific possibility and keeps working up towards the system level until it finds something. It loads the first file that meets the requirement and ignores the others higher in the hierarchy.

CSS/JS is a little different in that it works it's way up constructing an array of all the files it will load and running any aggregation routines.

If you add a subtheme.css file, it will not conflict with the base theme files and therefore everything will get loaded. That may be what you want. In that case, you can still override specific rules - your subtheme customizations should be the last CSS file loaded, so the normal CSS cascade applies.

If, however, the base theme CSS has more cruft than you want, you could also create a file of the same name, load it in your subtheme and and thereby block loading of the base theme file of the same name.

This file could be empty, or it could take a subset of rules from the base theme file. This will reduce the size of your total CSS load, but it will also make it harder to integrate any theme updates if you want to be able to do that.


But to answer your question, I would say it's best to have as little as needed in your subtheme, but no less. In other words, if something in the base theme is really getting in your way, then yes, remove it and load something else. If it's just a handful of style rules that are the problem, though, just override them with the normal CSS cascade.

I'm afraid that may have made even less sense than my original answer... :-(