hi all,

i just installed ee and have started the learning curve.
all seems to be going well enough so far, apart from a stylesheet related issue i’m having:

outside of ee, i usually call my style sheets using the following code:

where the ‘basic.css’ file is loaded and if the browser understands @import it will load the file ‘import_styles.css’ which would contain (for example):

so while translating my methods to ee, i set up a template group called ‘css_group’ to contain my css, and i set all the template types to css. i then called the css as follows:

and my ‘import_styles.css’ now looks like this:

when i set up my files as above, the css files inside the ‘import_styles.css’ don’t get imported and therefore don’t get applied to the page

QUESTION 1: what is the correct path/method to call the other css files in the ‘import_styles.css’ file?

after not getting the above to work, i then just listed the @imports in the head instead of using the ‘import_styles’ file:

this worked and the css was applied to the page, however my css editor of choice (cssedit on the mac) would then only detect and allow me to edit the first 2 stylesheets (basic.css and reset.css)  - i’m not sure why, it could just be a limitation of cssedit?

QUESTION 2: why is cssedit not recognising the files after ‘reset.css’ is there a better way to import the styles to have them recognised by cssedit?

i have resorted to just not having the css within ee, and linking to it as i used to (mentioned at the beginning of the post.).

QUESTION 3: what are the advantages of keeping the css within ee? having thought about i am struggling to think of any?

anyway, thanks for listening, i hope i havn’t made this sound more complicated than it is!

mat

To answer question 3, I find it easy to link to a normal stylesheet and to use the file upload feature in EE to upload it. So, if I want to edit my file I browse to it on my website (for example, www.oneofus.co.uk/sampledirectory/uploads/styles.css - this is a dummy link by the way), download it, edit it and upload it using EE.

The disadvantage of this is that it’s a slow process to do iterative updates to the CSS file (which I always end up doing as some CSS can need some tweaking to work in all browsers). The solution to this is to use a plugin for Firefox called Firebug which lets you edit the CSS file from within the browser. It won’t update the file on the website as far as I know but you can then tweak the file in Firebug and copy the code and paste it into the file you’re going to upload.

I use a separate stylesheet (i.e. one uploaded outside of EE) because I also use it in my forums which are separate to EE (I use Invision Power Board).

For question One, CP Home ›  Templates ›  Global Variables › Create a new global variable, and name it something like “style_css”.
From then on you can use your new global value in the Head section {style_css}.

I like to keep my CSS in a folder called style in the root directory, one of these is called site.css that calls the other css files

In this case I am calling two other css files color and typo that are also in the style folder.

Now the new global “style_css” calls the site.css in the Variable Content field like this

Question two, all will be well with the above procedure.

Question three, the number one advantage after you get your site looking like you want to move the css into EE is you can easily edit it in the EE templates.

Cheers,

the css files inside the ‘import_styles.css’ don’t get imported and therefore don’t get applied to the page

QUESTION 1: what is the correct path/method to call the other css files in the ‘import_styles.css’ file?

I don’t believe this question was directly answered. I, too am having difficulty with @import working inside a called stylesheet, no matter whether it’s a template or a linked file.

In my index template my main css file is called as follows:

Which is successfully rendered to the page. Inside asrco-site.css is the following:

All css files are in the same directory. Yet, the @import calls do not work. I’ve tried all kinds of variations, even explicit URLs. No success.

EDIT - UPDATE

Good grief. I’ve just discovered that I had an extra curly brace at the end of the linked stylesheet URL. You can see it if you look closely. Get rid of that and everything works as expected. Ugh!

A simple mistake like that is one of the pitfalls of editing code in a template textarea. Without syntax highlighing, it’s just too easy to make mistakes like that.

Hi all.

I’m having problems here as well.

I call my layout.css here fine:

In that file I need to import three css files.

Tried various techniques from above and other sites but non seem to be working. Is there a definitive solution?

Thanks