Thread

I’m following Ryan Irelands screencasts and I can’t figure out where the CSS and Image folders go. I have no idea why Mr. Ireland never explains how to do this. He only says he uploaded CSS and Images to his server. So I tried to do the same thing.  I moved the CSS and Images folder to my Templates folder where my index.php file is but this did not work. I have no idea how to link CSS and Images to templates. Can someone please inform me on how to do this.

If you want your files to be external files just place them as you would traditionally…forget about EE folder structure just make your own folder structure eg.
site.com/assets/mystyle.css
site.com/assets/images/some.gif

by default EE uses “themes/site_themes” but you do not have to…or you could, it is up to you.
Then just call them:

<link rel='stylesheet' type='text/css' media='all' href='site.com/assets/mystyle.css' />

Now, if you want to save the css files in templates then you would call them as a template:

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

I’ve been trying to link CSS and Images externally but still can’t figure out why index.php can’t find my CSS and Image files. When I test the same file structure on my desktop everything works fine. But it doesn’t work in expression engine. I attached screen shots of my folder structure and link tag. Take a look and let me know if you see the problem, Thanks.

You don’t really mess with the file “index.php” itself but rather use the default template group’s index…other than that it would have to do with your folder structure…
is the file accessible by direct URL of site.com/css/screen/main.css?

I moved my files up to the main directory folder and now it’s working but I really don’t understand why? My index.php file is in my templates folder and my CSS and Image folders are in the parent directory. This really confusing? Thanks for your help anyway.

Relative vs. absolute paths.
You are not actually making a new file and then calling it ‘index.php’....please say no.

I’m following the instructions from Ryan Ireland’s Screencasts. What he does in the Screencasts is delete all of the EE default files and starts from scratch. He creates a New Template Group and names it site.  Next he clicks on Global Template Preferences which allows you to save Templates as files to edit them in your own editor like Textmate. You have to tell EE what the path is to your directory where the file should be saved.

When all of that is done EE creates a directory on your server called site with a new index.php file in it. Now you can open up index.php in your own editor and write your code. What he does not explain is where you need to put your CSS and Images. I assumed the CSS and Images should go in the same folder of my newly created index.php file. I was obviously mistaken and I’m still unsure why? I’m thinking that EE created a path to my new index.php file but my CSS and Images still need to be placed in the original default directory to work.

Hey Eric,

After you tell EE the path to the directory where you want files to be saved, every time a new template group is created a new sub-folder will be created in that directory.

After a new template group is created, you open the index template that is created automatically, and save it as a file. On your server you’ll then see the new sub-folder created that has the name of your template group. Inside of that folder you’ll see index.php which is the way EE saved the index template that was in that template group.

So if I create a new template group called “includes” and then click on the index template and save it as a file, when I go on to my server I’ll see a new sub-folder named includes and in there will be a file called index.php.

If I remember correctly, in the videos he’s set files to be saved in the system/templates folder. So all of your template groups will have sub-folders in there, and within each folder you’ll have at the very least an index.php file, in addition to whatever other templates you’ve created and set to be saved as files.

Now, CSS, images, javascript, and things like that can all be created outside of the EE system folder and exist independently of EE’s templates and groups. A good idea is to do what lebisol said and create a new folder named assets and store them like:

site.com/assets/mystyle.css
site.com/assets/images/some.gif

Hope this makes sense.

Relative vs. absolute paths.

Absolute paths make life much easier.

Thanks Tony, now I understand. Thanks for the very thorough explanation. I thought your CSS, Images, and JS files had to be placed in the same folder of your template groups. I didn’t realize they could be placed outside of the EE system folder.

You’re welcome 😊