Thread

Hi,

I searched the forum and found this similar problem thread:
http://ellislab.com/forums/viewthread/195156/

Please see attached screen shot files. I’m working through the Mijingo video tutorials and just brought the second page into the sample site. The paths for both pages to the source files (css and images) are identical (and I’ve checked them about 10 times to make sure there isn’t a character out of place):

<link rel="stylesheet" href="-/css/screen/main.css" />

FPO/photo-home.jpg

As you can see from the attached .jpgs, (again, with identical paths) one page is good, the other is not. I’ve tried clearing history, restarting browser (FF), different browsers,  - what’s going on here?

Thanks,

John

One thing I’m not understanding about this architecture that (I think) is related to my original question in this post is, I don’t get how these paths work backwards to the resource files without any apparent (or only partial) relative path.

I am developing locally, and the .css is located here:

C:\wamp\www\expressionengine\-\css\screen\main.css

but the page that calls on it is located here:

C:\wamp\www\expressionengine\system\expressionengine\templates\default_site\sitenews.group\view.html

and the path to the stylesheet is:

<link rel="stylesheet" href="-/css/screen/main.css" />

I don’t get how this works.

Hi John,

While I followed the videos I actually was immediately applying the techniques directly to my own project and so didn’t create the Channel University so I’ve not come across this issue.

1. Why is your website root url this? C:\wamp\www\expressionengine\-\css\screen\main.css
It’s the hyphen that surprises me.  Is there really a folder with a hyphen as a name?  You should probably rename that to something more sensible.  Perhaps it is confusing EE.

2. This: <link rel=“stylesheet” href=”-/css/screen/main.css” /> is a relative path.  Add a slash at the beginning of the href to make it go from the site root, i.e. href=”/-/css/screen/main.css”  (although get rid the hyphen as I say in 1!)

3. The same goes for the image URL.  The templates are stored deep in some folder so you’ll need to make the URLs point to the images directly, not with relative paths.

4.  Read up on using {path=} in the User Guide to let EE workout the correct path to your files.

5.  Don’t assume the Channel University templates (or videos) are 100% error free!  Think of any issues as little challenges for you to solve 😉  I personally only found one error with the videos and that was a minor bit where a slide he was showing didn’t render properly.  Again, I didn’t use his templates so I can’t vouch for them

Hope that helps!

Hi Red,

Thanks for your reply. Some quick answers, yes, there is a folder with a hyphen for the name (came with the course that way). I tried renaming but it didn’t make any difference. I think I need to re-post this problem and provide more information. I know it’s difficult for people to help when there’s no real code they can inspect.

Thanks for your help.

John

Thanks for the assist here RedLeader. I too was confused by the “-” in the path at first, but after taking a look at Ryan’s videos, he actual named one of his folders “-”.

Hey John,

As RedLeader said, can you try adding a “/” to your stylesheet?

So, something like:

<link rel="stylesheet" href="/-/css/screen/main.css" />

The “/” makes the path start at the root (or your home folder), where no slash makes it a relative path. Finding out where you are in relation to the rest of your files has also made me slip up in the past too.

Hopefully this fixes you up.

Thanks John 😊

Hi Kyle,

Thanks for jumping in here. I’m still stumped by what’s going on here. Yes, actually, the sample files came coded with the leading “/” you recommended. i.e.:

<link rel="stylesheet" href="/-/css/screen/main.css" />

However, on the first page (index page) I worked on, the styling didn’t work with the path that started /-/. I fiddled with the path, and when I removed the leading “/” and did this:

<link rel="stylesheet" href="-/css/screen/main.css" />

Then the styling renders correctly (see original attached pathCorrect.jpg).

The aggravating problem comes in on the second sample page. It points to the exact same location, but whether I set the path to this:

<link rel="stylesheet" href="/-/css/screen/main.css" />

or this:

<link rel="stylesheet" href="-/css/screen/main.css" />

the styling doesn’t work either way (see pathIncorrect.jpg), and the same thing with the photo on the page. The photo path is:

FPO/photo-internal.jpg

, which works on the index page, and does not work on the second page.

Grrrr! How can this be?? I’ve lost hours to this stupid problem.

Because the architecture here is different from any other project I’ve worked on, it might help to know where the asset (images/css/js) files are supposed to be within the context of a template. It SEEMS like they should be in the root folder with simple relative paths pointing to the correct place, e.g., ../css/main.css, ../js/script.js, (I actually tried this) but EE obviously doesn’t work this way. (to see where they actually are for this particular project, see my 2nd post in this thread from August 15, 6:49 p.m.)

I’m totally stumped here.

Hi John,

This definitely sounds like some confusion going on with paths. Could you do me a favor? Post back here the URL you’re using to view the page where the CSS renders correctly and images appear. Post along with that the CSS tag you’re using in that template.

Now do the same for the second template, the one that doesn’t render CSS or show images.

What’s the absolute path to your web root?
Also, could you paste here the absolute paths to your css, js, and images folders?

I think having all those bits of information will help us knock this one out for you.

Hi Kevin,

This definitely sounds like some confusion going on with paths.

It was. I got it straightened out yesterday by doing a full path to the .css:

<a href="http://localhost/expressionengine/-/css/screen/main.css">http://localhost/expressionengine/-/css/screen/main.css</a>

That fixed it. I don’t know why I didn’t think of it before, my mind just got stuck going down the wrong road. When the path was just this:

<link rel="stylesheet" href="/-/css/screen/main.css" />

and I clicked on the href in View Source, it was spitting this path out:

<a href="http://localhost/expressionengine/index.php/sitenews/view/-/css/screen/-/css/screen/-/css/screen/main.css">http://localhost/expressionengine/index.php/sitenews/view/-/css/screen/-/css/screen/-/css/screen/main.css</a>

which obviously didn’t work. I don’t know why it was doing what it was doing, but I’m moving forward again.

Thanks for the assist!

John

No problem, John. Everything taken care of now? Is it alright with you if I mark this thread “Resolved”?

Yes, thanks.

Glad that you are all set, John!  If you have any other questions, please let us know in a new thread.  Thank you.