I've been experimenting with CSS Injector to add selective sets of CSS rules to individual nodes - this is basically porting a non-Drupal site's pages to Drupal.

I have been unable to puzzle out what CSS Injector "thinks" is the correct way to specify the /images folder for my particular theme. I have tried all of the obvious paths, but none of them work:

sites/all/themes/mytheme/images
mytheme/images
images

What is the correct way to specify the /images folder for any given theme?

Comments

rfay’s picture

rfay
he,him
Primary language English
Location Palisade, CO, USA
commented

I'm not sure what you're asking.

With CSS Injector you are adding CSS, and it will work the same as adding css by adding it to your theme or other ways.

eduuser’s picture

eduuser commented

I am experiencing problems with specifying background images for different elements.

The images are all in:

sites/all/themes/mytheme/images

But I can't seem to specify the path correctly with CSS Injector - the images simply do not appear.
This is obviously something very simple...

I have tried:

../sites/all/themes/mytheme/images

sites/all/themes/mytheme/images

mytheme/images

But none of these work.

rfay’s picture

rfay
he,him
Primary language English
Location Palisade, CO, USA
commented

I just tried this in a rule and it worked:

.node {background-image: url("/sites/all/themes/omega/omega/images/randy_in_mexican_garb_cropped.jpg"); }

BTW: css_injector probably isn't what you want for porting a non-Drupal site. You probably want to create a theme of your own (a subtheme of some theme you find to be a good starter) and just add the necessary css to that. css_injector is really for little, real-time tweaks to a site that don't need to be kept under source control.

eduuser’s picture

eduuser commented

There is something strange going on with my Drupal CSS.

Using Firefox's developer tools, I found that this path:

../sites/all/themes/mytheme/images/myimage

results in the background images appearing correctly, ONLY when I am in Firefox developer tools Edit CSS. When I change the code in the CSS Injector rules, the images don't appear on the site! If I go back into Firefox Edit CSS, the images reappear! I have cleared all browser and Drupal caches, but the only place I see the background images is while in Firefox developer tools.

The information I am porting is just a series of "index" pages to an online publication. The "index" pages consist of a

    with each
  • having its own background image and link. There about about 12 different "index" pages, so I don't want to load 144 lines of CSS - just a dozen or so when a particular node loads.
rfay’s picture

rfay
he,him
Primary language English
Location Palisade, CO, USA
commented

#3 explains how to do this. Worked fine for me.

eduuser’s picture

eduuser commented

Thanks. I understand the CSS involved. It turns out that the correct path, at least for my Drupal installation, turns out to be:

/myrootfolder/sites/all/themes/mytheme/images

I figured this out by inserting an ordinary image via elFinder, and then looking at the code to see how the path to that image was expressed.

onco_p53’s picture

onco_p53 commented
Status: Active » Fixed

changing status to fixed

rfay’s picture

rfay
he,him
Primary language English
Location Palisade, CO, USA
commented

Thanks for cleaning up @onco_p53.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

timtk’s picture

timtk commented
Version: 7.x-1.x-dev » 7.x-1.7
Status: Closed (fixed) » Needs review

I have tried this and the image still will not load. I have the images folder and background image full permissions, cleared the cache and still the background image will not load. Do you have any other ideas why this is still not working.
Am using version 1.7 btw.

rfay’s picture

rfay
he,him
Primary language English
Location Palisade, CO, USA
commented
Status: Needs review » Fixed

@lakes, you should use something like firefox or chrome to figure out what path is trying to be loaded (and failing). That will give you the hint. #3 explains the basic approach, but your theme may be in a different location on the disk.

Make sure you have CSS aggregation turned off while testing.

timtk’s picture

timtk commented

@rfay thanks for that figured out how to do this using context and adding a extra class item to each specific page.
I have a feeling though that your suggestion was where I was going wrong. THANKS

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.