Thread

I see that in version 1.6.1 the change log notes “Modified the {stylesheet=""} tag to allow browser caching of CSS files and built in versioning of stylesheets”

The question I have is that I’m having trouble with using the @import rule to pull in another stylesheet.

I am linking from the document heading using:

<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=global/css_screen}' />

and inside of that stylesheet I have:

/* Styles for screen media */

/* Import Stylesheet(s) and Hide from ie/mac \*/
@import url("global/css_master");
/* End Import/Hide */

the code below, using 1.6.1, results in a 404 file, but the code below

/* Styles for screen media */

/* Import Stylesheet(s) and Hide from ie/mac \*/
@import url("?global/css_master");


/* End Import/Hide */

...in 1.6.1 gets me the result that I expect.

Previously, before recent versions, all I needed to do was reference the full template path to access the CSS stylesheet with the @import method. Obviously now I’m confused. 😉

Can someone help me pin down “the right way” to do what I am trying to do, or illustrate to me a better way?

One of the core reasons that I like the @import version is that I can add the template_edit_date tag to the CSS file and always know when I last updated the site’s CSS.

Here’s an example of my code:

/* ------------------------------------------------------------

    Theme:     Theme Name
    Company:   IMAGE202 ENTERTAINMENT
    Author:    Adam Stacoviak, .(JavaScript must be enabled to view this email address)
    Updated:   {template_edit_date format="%g:%i%a - %l, %F %j%S, %Y"}

------------------------------------------------------------ */

Thanks in advance and happy holidays!!

Adam

You’ll want to avoid using relative paths within EE templates, including here, as the browser will simply try to append it to whatever directory it thinks you are in, which will quite often not be accurate, as you can have a renamed index.php file, template group, template, or other URL segments that are not real directories.

Though I’m confused: Why are you using a link tag with the stylesheet path variable instead of just doing an import with a regular path?  It looks like your goal is simply to call a CSS template but allow it to parse template variables.  Is that correct?

Well, I’m using a single stylesheet called “screen” that imports all screen related CSS and also hides the CSS from IE/Mac. This also lets me gain the usage of template variables in the stylesheets as well.

For structure purposes I am using a method that uses one “screen” stylesheet that’s responsible for importing all other required “screen” stylesheets. I think I read about this method in CSS Mastery, but I can’t be certain.

Thanks for the help Derek! 😉

No problem, Adam.  Something that will make these templates more portable should you switch servers, or if something changes where it no longer requires forced query strings, would be to just use a {path=} variable.  It will output a full URL and will still allow regular tag parsing in the templates, e.g.:

{path="global/css_master"}

OK so here’s the funny thing. I tried this code in my document heading and it was a no go—a 404 was returned.

<link rel="stylesheet" type="text/css" media="all" href="{path="root/css_screen"}" />

The only odd thing that I have going on is that I’m hiding my index.php with .htaccess

Check me out here: adamstacoviak.com

Not sure what your code is here:

/* Styles for screen media */

/* Import Stylesheet(s) and Hide from ie/mac \*/
@import url("?root/css_master");

/* End Import/Hide */

But the “?root/css_master” is what I was referring to when I suggested to use {path=} instead.

Using this in the head of the document to link the CSS…

<link rel="stylesheet" type="text/css" media="all" href="{stylesheet=global/css_screen}" />

...and this in the linking stylesheet (css_screen)...

/* Styles for screen media */

/* Import Stylesheet(s) and Hide from ie/mac \*/
@import url("{path=global/css_master}");

/* End Import/Hide */

...results in nothing being referenced for the @import. The linking css_screen stylesheet can’t parse Expression Engine tags. From what I understand is that the CSS stylesheet being imported via @import is the only way to be able to parse Expression Engine tags in a stylesheet because it’s being referenced as a parsed document.

If you’d like I can give you access to my install that I mentioned and you can see what the deal is. We’ve developed over 12 Expression Engine based sites and I sort of start them all from a specific foundation, and this CSS method is a part of that foundation.

Oh, Merry Christmas!!

It doesn’t matter whether you are using a link tag in an HTML document or an import tag in a stylesheet, it’s the URL that is used to access your stylesheet that determines whether or not variables are parsed.  {stylesheet=} will create a URL that bypasses the template parser.  {path=} does not.  Look at the source URLs from both, access them separately with your browser, and you should see the difference.  If it’s still not clear, or isn’t working as I’m describing, yes, emailing me (not PM please) backend access to see it would be fine.