where to upload css and img?

Hi -

I’m going through chapter 1. When I get to the section on uploading the css and img directories, I copy them into the templates directory (which is where I copied the index.php). When I display index.php, it doesn’t find the css or images. The video doesn’t mention explicitly where to put those directories. Did I put them in the right place?

BTW, so far I like these very much.

Thanks.

Larry Lewis

Thanks, Lawrence! Glad you’re getting started and like the screencasts.

You want to put the css and images directories in the root of your website public directory. I didn’t mention it explicitly because everyone’s set up is different, but hopefully this will help clear that up.

If you’re still running into an issues, reply back and I’ll help you further!

Ryan -

That did it!

Thanks.

Larry

Is there anywhere we can download the sample html and css files? I like to play along as the tutorial progresses. Have I missed something?

k/

Select the Your Account link then click the Expression Engine link in the Your Bookshelf section. You will see a link for code there.

Thanks Kevin.

Hy Ryan,

I’ve a question related to the first screencast. Why the css and images folder are physically placed on the web server instead of having created them by Expression Engine interface?
Is to control the hierarchy of folders on the server?

And it is better to place all generated files outside the Expression Engine structure (outside the template folder for example)?

Thanks.

François, thanks for the question. This is simply a preference of mine and works well with how I structure my CSS files and images when developing static templates. This was born out of the client work I do and has become my standard way of working. It isn’t necessarily better than using EE for the CSS, I just find it easier.

It’s difficult to tell from the screencasts, so Ryan can you tell us whether you leave your css files outside Expression Engine, or if you manage them from within the system?

I’m sorry to beat this particular horse to death, but when I downloaded the sample code files from this site, there were two folders, plus two stray files. One folder was ee templates, which contained a css folder and an img folder, plus a readme and a stray. The second was the “Static Templates” folder, which appeared to contain the identical elements, though I haven’t been able to parse out whether they are verbatim copies.

Are both folders full of items meant to be installed in the root direct of the public html on the site? Is one supposed to be installed and the other not? Or is one supposed to go in the root of the public html and the others not? I gather you’re supposed to take them out of their folders before copying them to the web site? But if you do that, one set of css files will overwrite the other, won’t they?

Problem is, right now I have copied what I understood to be needed (i.e., the css and img folders out of the ee templates directory into the root directory of the public folder (without the ee “wrapper” if you will—i.e., just the css and img folders) and I have copied the text of the one static document into the site index, and I still don’t get the site rendered the way it is in the tutorial. The headlines and photo are missing from the articles, and it is NOT aligned with two top stories on the left and one on the right as the rest of the tutorial would indicate.

Something is plainly missing, but I’ve spent hours at this (this would be a perfect template on which to format my magazine site) and I’m at a loss as to what. HELP!!!

Hi Lee,

Thanks for checking out the screencasts.

“EE Templates” are the template coded with EE tags (basically the end result of what we do in the screencast episode) and “Static Templates” are the plain HTML templates (no EE code) that we start with.

Neither of the folders are meant to be installed as-is. What you do want to do is put the “css” and “img” folders in the root of your site and adjust file/css paths, as needed. To get the templates to render as shown in the screencast, be sure to follow along step-by-step. I explain everything as we go through it.

If you’re missing images or styles, be sure to check the file path to the CSS (located in the template header) and the file path for linking up the images.

Let me know if that helps or if you need more info!

Is there new css code in those folders as you go along? Or only the new templates? I’m in screen cast eight now, for example, and I’m having a hard time when I add the code for the “Welcome” and “log out” messages. When you put it in it looks very pretty but when I put in the identical text, it looks like the dog’s breakfast—completely different typefont, size, and style from the rest of the page. Plus, the unordered list commands generate bullet points before the “Welcome, __” and before the log out button. Nice in some circumstances, but no especially attractive for this purpose. Plus, it makes all the categories shift another column over to the right, so you’ve got your two columns of articles, a third column with a huge amount of white space with the Welcome and logout button, and a fourth column for the category navigation list, the cartoon, and that sort of thing.

I assumed there must be a solution in the CSS folder, but the code that is in the folder for section seven didn’t have anything that looks like it addressed this issue. Any suggestions?