At last! Many thanks for this. I have built two sites in EE now but when I come to do a third one I need to cut out the 50% of the time I took in the first two to understand how to build them! I look forward to your next instalments.

Good start to a EE site building tutorial. If only I had this a year ago when I started using EE.

For the adventurous one, try another template and keep along with the future tutorials!

Makes it a bit more challenging. lol.

Cool! I like CodeIgniter, but I didn’t get around to understand EE yet. Maybe this tutorial will help!

Is {site_url} something you created in your path.php file? I don’t see any mention of it in the docs on the EE site.

And how far away is EE 2? We just got 1.6 but haven’t gotten further than trying to read all the documentation we can find (including your tutorials)

I’m a newbie and trying to follow this tutorial on a mac, and can’t seem to get things to render properly.

The index page loads, and text renders. Graphics referenced in the index file also render, but background graphics and other things contained in the .css file do not appear to get pulled in. I’ve checked and re-checked my references, and seem to be missing something.

Any ideas?

Michael,

The .css is not being applied to the .html. The .html appears to take on the default browser styling.

Can you post a .txt file of the template? so I can compare syntax.

BTW - Appreciate your site and passion for connecting folks to EE.  If I can just get the hang of things, I intend to move forward with maintaining our worship ministry site in EE. The learning curve has seemed somewhat difficult, but your tutorial provides a good on-ramp.

Larry

I know I’m doing something wrong here, but I can’t figure it out. It looks like all the links are correct, but still the stylesheet isn’t loading.

Nope, it’s not the blue globe thing. It has the CSS icon.

|Yes, I did. I guess I need to start all over

http://www.stipvoorstip.nl/blog/index.php/building_series/index/

I just noticed them. Strangely enough I can’t find them in the templates. Goes to hunt them down.

Yea, I saw that. No clue why that’s happening though. I changed the quotes from double to singles but it didn’t do anything.

This is the one i’m using for your tutorial:
<link rel=’stylesheet’ type=’text/css’ media=’all’ href=’{stylesheet={building_series}/stylesheet’ />

And this is the one that came with the default site:
<link rel=’stylesheet’ type=’text/css’ media=’all’ href=’{stylesheet={my_template_group}/site_css}’ />

What do you think?

It worked! Thanks Mike. Btw, you may want to take out the part where you say to copy the links from the default template as other people may end up doing what Edwin and I did.

Hi All finally started on this excellent series, after some minor troubles on a Windows server it’s running for now.
Copy any error messages you may get and paste them in at the forums over at expressionEngine.com and you will usually find an answer or a narrow list of things to try.
My Chapter 1 page badge of courage is linked to my user name.

I’ve following link in my template:

<link rel="stylesheet" type="text/css" media="screen" href="{stylesheet=building_series/stylesheet}" />

I’ve tried to disable the “Generate HTTP Page Headers?” in the System Preferences, and now the the string is no longer displayed.
Can someone please explain the use of this? I’m just starting to learn ExpressionEngine…

Thanks!

Do you have an error message, or link?

Question for Mike?
Is it possible to just use a regular stylesheet link like:
<link rel=’stylesheet’ type=’text/css’ media=’screen’ href=’http://crssp.com/EE/index.php?css=building_series/stylesheet’ />
That’s what shows up in the page head after EE renders it anyways? I’m sure there are advantages to using the EE type of stylesheet link, but is a plain old xhtml version work?

Not sure, but try dropping the .css from the end of the call.
Yours says stylesheet.css, loading theurl in my browser address bar and it doesn’t show up. Pasting my own in that I’ve shown above and it does indeed show up.
My version has query strings turned on do to a windows hosting glitch, whether that’s significant I don’t know.

I still have the default “site” templates in my directory (from the core installation.) Could that be a conflict?

Thanks for the help Mike and Ty. It actually wasn’t the closing “/”, as I was using a transitional doctype at that time. And even when I added them it didn’t fix my problem.

But with the help of a very experienced programmer who was also stumped for a while, we pasted in a new html header from another file and voila, it worked. I am now moving right along…

I will be sure to always validate my html and css from now on!

Good news, and bad news…
The good news I was able to bring up your site:
http://ee.jonsnetwork.com/index.php?/bns/
By adding the ? question mark to create the query string.
The bad news it might mean you have to turn on force query strings in the EE control panel, not really sure about that, but it’s not uncommon especially on IIS or Windows servers.
IF you do it’s not a big deal, but sometimes you have to change some of the other link parameters because of it.
Search “force query string”, without the quotes on the EE forums, and you’ll find some discussion.
I’m sure Michael can tell you more.

Thanks Tygos.  It’s on a shared Linux server though.  Strange.

yes, I did see that kb article. Thanks. Midphase doesn’t support path_info since they run php as a cgi script.  The orig_path_info workaround didn’t work.  Query strings aren’t an option for me(although forcing them worked).  I tried to do cgi.fix_pathinfo like Midphase suggested and that didn’t work either.  So Midphase is out.  I was having issues with them anyway since they wouldn’t let me trackback when I use the weblog api either.  I’ll test on my media temple account since I have stuff running there, otherwise, I’ll probably just sign on with enginehosting.  Thanks for your help.

Can you help? The link in the first tutorial to the all important template archive ( http://www.free-css-templates.com/demo/green-business/ ) resolves to ‘The page cannot be found’.

I must be confused. When I replace “image” with “{site_url}images” in my css file, it messes up the curly brackets in my css. What am I doing wrong?

Also, there are a number of semicolons missing from the ends of the css lines. Is there some reason for this?

Oh hang on I misread that - {} in css might not work.

Sorry let me add something here:
Especially during development, I think it’s a good idea for me to leave the CSS separate. It could always be added to the database using these methods at a later phase of development.
During site design, the site CSS needs to be as accessible as possible to the designer, so that’s where the choice comes in… how would you prefer to access the css files.

Bill - only the last line does not require a semicolon!! At some point we have all been in the position you are in now - not knowing much about EE and not knowing everything about CSS so don’t worry!

URL’s in a css file, maybe not an EE css file, as I’m not sure how EE parses the CSS from the database, are relative.
Meaning if your css is at the root of your domain then a root slash, or a path beginning with /CSS the code would find your css file and any file you point it at. Then in the external CSS stylesheet just using a url of img/imageName would find the images in a folder called img in the CSS directory.
That’s how I’ve been working once I figured out that CSS is relative to where the css is located in the web directory.
It’s a pretty good way to keep track of images that are only being referred to by CSS methods. Clear as mud?
IF you are struggling with the EE concepts at all you will find plenty of information on CSS standards out there.

Hello Again,

It seems that my images are not being pulled in when I render the index template. Listed below are my css and html image paths and my css link. I would appreciate any help. (I am using the 30-day trial and uploaded my images through the “upload file” button on the “Publish” page.)

CSS

background: #FFFFFF url {site_url}images/topbg.jpg) repeat-x top;

HTML

{site_url}images/img2.gif

STYLESHEET LINK
<link rel="stylesheet" type="text/css" media="screen" href="{stylesheet=building_series/stylesheet}" />

RENDERED INDEX TEMPLATE WITH ROOT PATH
http://demo.expressionengine.com/WGG4L02LMS/images/img2.gif

If anyone wants to place there CSS at the root of their site, tried explaining this afraid it wasn’t too clear.
1. create a directory at the root of your site named css.
2. create another directory for the images call it img.
3. The path to use in your stylesheets would then be:
body {
background: #FFFFFF url(/css/img/interface/topbg.jpg) repeat-x top;
For example, it’s maybe not dynamic as the other EE method, but your web site root is always just that, and you can just place all of your CSS there, and if you placed it in another web the root directory still works.
I’ld really like to know how many long time developers use these EE methods, I’m awfully curious, not that it’s a bad thing either?

Bill - looks like you have it sorted - I guessed your site URL and can see it - with all the css background images in place. i can only see one image missing and that is img.jpg in the first content paragraph - again its missing the /upload/ directory in the path. Your getting there!

help me plzzz in this

http://www.j-nom.com/index.php/x/index/

what’s problem ???

Simon - thanx alot my dear
i have written it like a hard-coded

<link rel=’stylesheet’ type=’text/css’ media=’all’ href=’http://www.j-nom.com/index.php/x/stylesheet’ />

and it works !!

still i have no idea why

<link rel="stylesheet" type="text/css" media="screen" href="{stylesheet=stylesheet}" />

doesn’t work with me :(

NOW i can move to the next chapter

Those odd characters would suggest where your problem might be. ’ should be a “ you need to retype the code to this:

rel="stylesheet" type="text/css" media="screen" href"http://localhost:8888/bud_design/index.php?css=demo/stylesheet.v.1206230807"

Simon

Got it working to an extent now, the menu tabs dont seem to render correctly - the green background isn’t repeating, might be some image URLs i need to correct. But atleasst the style sheet is pulling in and those odd characters are not rendering. I think it is a single quote mark issue, i am running MAMP on my Macbook - dont know if apache is weird about it.

I manually typed it instead of copy+paste and it worked - but whats the deal with the v.XXXXXX that appears afterwords?