1

When i use EE's internal CSS template, the css works fine.

But i have decided to take the css and javascripts out of ee templates and keep them in their own separate folders at the root of EE installation.

Here is my structure:

  • root

    • assets
      • scripts
      • styles
    • images
    • system
    • themes

This is the code in my index.html header area

(1st Try)

<link rel="stylesheet" href="{path='assets/styles/style.css'}" media="all" />
<link rel="stylesheet" href="{path='assets/styles/color.css'}" media="all" />

(2nd Try)

<link rel="stylesheet" href="{site_url}assets/styles/inner.css" />
<link rel="stylesheet" href="{site_url}assets/styles/flexslider.css" />

Here are the 

#selector{ background:url({site_url}images/front/top-pattern.png);}

Note:

The css files are loaded correctly in HTML but the images are not loaded.

I checked with firbug and it says

Failed to load the given URL

The issue is with the image path inside the css files.

I cant figure out what am i missing ?

Improve this question
1

3 Answers 3

Reset to default
3

EE won't parse tags that are stored outside of templates unless you do some trickery to send them back into the parser.

Keep them in templates if you need the tags parsed. Though I should note that the parsing abilities for CSS and Javascript templates seem limited.

While you are at it be sure to look into a minimizing module, this doesn't solve your problem but they are useful for speeding up your site and combining css/js files. I use Automin, there's another called Minimee.

Improve this answer
2
  • Thanks, ill look into Minimee. I wanted to use Sass, would it possible to use it when having css as EE templates ?
    – Ibn Saeed
    Commented Mar 10, 2013 at 15:55
  • Yes. Both can parse from EE templates thought it's not a requirement. I use EE templates for CSS because I like to grant access via the panel and it allows for revision tracking. I had to modify Automin to work properly for some reason though, I forget what I did :(
    – leblancexplores
    Commented Mar 10, 2013 at 20:23
2

I'd avoid anything based on {site_url} and opt for relative paths instead. With what you've supplied, simply placing an "/" instead of {site_url} would suffice.

That being said I would also avoid placing css in a template and do it the old fashioned way to stop this errant behaviour which also gives the added benefit of making solving any css issue, that much easier because you've removed it from ee control.

Improve this answer
6
  • I actually did try it with "/" flash in the front but with same result as above. So how do we resolve this issue of having the css and javascripts outside of the ee template structure. I wonder if it worth all the hassle in the first place.
    – Ibn Saeed
    Commented Mar 10, 2013 at 15:56
  • 2
    /assets/styles/style.css always works on my end. Perhaps you are working in a dev setup that won't support a root relative path?
    – Anna_MediaGirl ♦
    Commented Mar 10, 2013 at 18:17
  • I am working on my localhost dev environment.
    – Ibn Saeed
    Commented Mar 10, 2013 at 18:21
  • I would like to highlight that the index.html file is picking up my css files and javascripts files just fine with the {site_url} variable. The issue is with the image paths inside the css files, if use the {site_url} var or path var, it does not work.
    – Ibn Saeed
    Commented Mar 10, 2013 at 18:23
  • I usually use site-root relative links too and it works fine for me. If you're on localhost you'll probably need to set a named virtual host in your hosts file.
    – James Smith
    Commented Mar 10, 2013 at 19:53
0

If the CSS file isn't being parsed by EECMS, using the path variable, you can't use variables or snippets on it.

This isn't an EECMS issue.

Since the image directory isn't a sibling of your CSS directory (/assets/styles), but a sibling of its parent (/assets), you need to go up to levels on your image paths.

#selector{ background:url(../../images/front/top-pattern.png); }

The first ../ goes up to the assets folder. The second goes one level up, to the root folder. Just then you can go down to the images folder.

Improve this answer

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.