01 - Loading a Static Template and Stylesheet

In this first chapter, we download the template files and bring the HTML and CSS into ExpressionEngine, getting EE to serve up the static template.

 
Download the EE Code for 01 - Loading a Static Template and Stylesheet

Download the Template
This tutorial series will be using the free website template found on the web at:
http://www.free-css-templates.com/preview/greenbusiness/

The zip file containing the template images, HTML and CSS code can be found at:
http://www.free-css-templates.com/downloads/44/greenbusiness.zip

Note - as of 10/30 the above site seems to be offline.  If it remains offline you can also download the starting templates here.

Download and unzip the template archive onto your local hard drive.  Got it?  Good.

Upload the Template Images
Now you’ll need to figure out where on the server you want to put the images.  Using an FTP client, make a directory on the server.
I’ll typically create a new subdirectory in the default EE images directory – so my images will be at: site root/images/interface/.  I upload all the images from the template archive there. Since this tutorial is running on a Multiple Site Manager installation my actual paths will be slightly different.

Edit Image CSS to Add the Site URL Variable
OK - now to the CSS file.  I’m picky - I don’t like my CSS statements all on one line as it’s tough to scan and modify the file. I went through the CSS for this template and put in all the carriage returns and tabs using TopStylePro.  I know there are more automated ways to do this, but I like doing it manually as it helps me get familiar with the CSS and look for any trouble spots with the design (like content divs with fixed heights, etc).

Regardless of how you like your CSS formatted, you will need to edit the paths to any images.  My standard approach is to give them a complete path, but using the site_url variable for the root so that it changes when my site goes from its temporary URL to the final live URL.
site_url, unless you’ve specified otherwise in your EE path.php file, takes it’s value from the homepage setting under CP Home > Admin > System Preferences > General Configuration.
I use the Find and Replace function in TopStylePro, and in this case changed image paths from:

images/topbg.jpg 

to

{site_url}images/interface/topbg.jpg 

Note that I’ll provide an updated stylesheet in the files attached to this post.

Create a Main Template Group
In this tutorial I want to use a Template Group called “site” to hold the site index template, the CSS template, and some other templates.

You’ll note, however, that EE installs with a group by that name already.  You can choose to do two things with the default site Template Group – delete it or rename it.

I don’t recommend deleting the default group, however – especially if you are new to EE.  The default templates – even though we don’t really want them for this tutorial - are great examples to save for picking apart in the future.  If you still want to delete them - just select the Site group in the left column and click Delete Group in the middle column.

To rename them – the option I suggest – select the site Template Group in the left column and click Edit Group.  I usually rename the group to “zz_site” so that alphabetically it will sort to the bottom of the Templates interface.  Enter your new name and click Update.

Create a CSS Template
We can now start to load up that new Template Group with templates. The first one we’ll put there is the stylesheet for the site:

  1. Select the site Template Group in the left column.
  2. Click New Template in the center column.
  3. Give it a name (I’ve called mine “stylesheet”).
  4. Set the Template Type to “CSS Stylesheet.”
  5. Click Submit.

Copy/Paste In the CSS Code
Now you’ll have a new empty template.  Click the new template name to edit it, and copy/paste in the CSS code that you edited earlier.  Save the template by clicking Update. 

Turn on Template Revision History
EE will save revisions of your templates as you make changes.  This is a great feature that will save your hide at some point – it’s just a matter of when.  It’s not enabled by default, however, so let’s get it turned on:

  1. Click the Templates tab in the Control Panel.
  2. Click Global Template Preferences.
  3. Check Save Template Revisions to Yes.
  4. Choose the number of revisions you want to keep (I usually keep 10).
  5. Click Update.

Edit Image Paths in HTML
OK - now for updating the HTML file that came with the template you downloaded. You’ll need to edit the image paths in the HTML to reflect the folder structure we’ve created for EE, and to include the site_url variable. 

They’ll need to change from this form:

images/img2.gif 

to this form:

{site_url}images/interface/img2.gif 

Loading the HTML into EE
Once you have the images paths edited in your template’s HTML file, it is now ready to bring into EE as a new template.

Since EE will create a blank “index” template anytime you create a new Template Group, we can just use the existing index template in the new site Template Group.

Click the index template title to edit it, and copy/paste in the index.html from your edited HTML file. Click Update.

Edit the CSS Link in the HTML File
There is one more thing to do in order to have EE serving up our static HTML and CSS - and that’s to edit the link to the CSS file in the HTML.

In the HTML, the default link is:

<link rel="stylesheet" href="stylesheet.css" type="text/css" /> 

This needs to change to the EE style of link:

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

If you’ve used different names for either the Template Group or the stylesheet template name, you’ll need to make sure the path after the “href stylesheet” reflects those changes.

Once you’ve recoded the link, click Update to save the template.

I’ve had some feedback that the single quotes mentioned here weren’t working and had to be replaced by double quotes, IE:

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

So if you have issues with content not getting styled, that might be one thing to try.

The Results
If you’re still in the template editing screen you can now click View Rendered Template.  You should—barring any typos in your path statements - get the static HTML and CSS as served up by EE.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Alex Labanino

by Alex Labanino

Date: Friday, January 9th, 2009
Comment: #1

Just an observation. To avoid confutions instead of use -site- for {stylesheet=site/stylesheet}, I think is better to use -template_group- or {stylesheet=template_group/stylesheet} for the example. Why? because i spent a loooooooooong time trying to figure out why the CSS link wasn´t working in my site. Other than that, EE ROCKS! I´m just sick of the joomla bs. Thanks.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, January 9th, 2009
Comment: #2

Hi Alex - thanks for the comment and sorry to hear of the time sink. 

I do prefer to use the specific names of the template groups that I have you setting up in the tutorials, rather than generic indicators, otherwise it will get more confusing down the road as the tutorial has you creating multiple template groups.

Picture of datagnostics

by datagnostics

Date: Wednesday, January 14th, 2009
Comment: #3

I’m having trouble getting the CSS link to work, too, and I don’t understand what Alex did to make it work for him.

I have named the template group “tutorial”. So far it includes templates “index” and “stylesheet”. In “index”, I have included the line:

<link rel=“stylesheet” type=“text/css” media=“screen” href=”{stylesheet=tutorial/stylesheet}” />

And yet, no styling appears. What should I be doing instead?

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, January 14th, 2009
Comment: #4

Hi - is your template set to CSS type?  Does a different icon show up for it in the CP than your other templates?

Picture of datagnostics

by datagnostics

Date: Wednesday, January 14th, 2009
Comment: #5

Yes, it’s got the icon “css_icon.png” displayed next to it. That is, if we’re talking about “stylesheet”. “index” just has the house.

AHA! I have fixed it—I was getting non-rendering characters in there, due to that quotation mark-thing and an earlier edit in Dreamweaver, I believe. And I’ve figured out what Alex was talking about with my_template_group, too!

Thanks so much for your time.

Picture of Alex

by Alex

Date: Wednesday, January 14th, 2009
Comment: #6

I was calling the wrong Template Group. Thanks.

Picture of Aaron

by Aaron

Date: Sunday, February 1st, 2009
Comment: #7

I’m at a loss. I’ve done everything listed above to no avail; linking to the stylesheet just won’t work. I’m beginning to suspect that something is not right with the stylesheet: it is created all right in the CP and has the right icon and everything but when I look at the file created on the server it is a php file and not a css file (linking to my own, non-CP made .css file didn’t work either). Any ideas? this is really driving me crazy (putting the css in the index worked, just not linking)

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, February 1st, 2009
Comment: #8

Aaron - can you post the code you tried to use to link to the stylesheet?

Picture of cscott

by cscott

Date: Friday, February 6th, 2009
Comment: #9

Mike—First, thanks for the tutorial.

I also ran into the quotation mark problem. It happened when I cut and pasted the code from this page.

“{stylesheet=site/stylesheet}” —The second quote mark is different than the first. Once I retyped the character in EE the stylesheet came up without a hitch.

Picture of John

by John

Date: Friday, March 6th, 2009
Comment: #10

Same problem with the style sheet here too! Steep learning curve already and the thing’s barely out of the box . . .

Picture of Sheila

by Sheila

Date: Saturday, April 18th, 2009
Comment: #11

I’m following this tutorial but working with a site that I want to rebuild using EE.

I don’t get the {site_url} variable. When does the value get set? Is it a reference to the root drive?

I’m working on a mac - not sure what the root drive is on a mac.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, April 18th, 2009
Comment: #12

Hi Sheila.
Site_URL is system agnostic. As I wrote in the article it retrieves the value specified in the EE control panel under general configuration.

Picture of billseymour

by billseymour

Date: Friday, April 24th, 2009
Comment: #13

Hello- Just started on this first step tutorial. Thanks so much for providing it; extremely helpful.

My only glitch encountered: I downloaded the sample template from the download ‘here’ link, and I found that the images did not render correctly. So I brought each image into Photoshop, and re-saved as xxx_alt.jpg, adjusting the template code to match. (I did modify the GIF files to RGB from their initial mode of Indexed Color).

All of the ‘alt’ images rendered correctly.

Just FYI. Again, once I got images working, everything looks great. Thanks again.
—Bill

Picture of Stephanie

by Stephanie

Date: Saturday, April 25th, 2009
Comment: #14

I am using the trial installation (hosted) and my images would not render (they were uploaded to my domains image folder).  I solved this by replacing {site url} with the exact address… that way it knows where to look for the images.

Picture of Kris

by Kris

Date: Thursday, May 28th, 2009
Comment: #15

Like the tutorial so far. Nice job Mike.

Picture of Adieska

by Adieska

Date: Wednesday, June 24th, 2009
Comment: #16

Great tutorial. I’m a fresh newbie in EE and currently want to learn anything about EE. I hope I can use EE better after reading your tute.

Thanks for share it and keep the good work.

Picture of Maria

by Maria

Date: Saturday, September 5th, 2009
Comment: #17

I know this question doesn’t belong here, but I’ve Googled it and haven’t found a concrete answer… What’s so bad about fixed height divs? Thanks in advance.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, September 5th, 2009
Comment: #18

Because content is variable.

Picture of Maria

by Maria

Date: Saturday, September 5th, 2009
Comment: #19

Oh, right, gotcha. Thanks for this tutorial, by the way. It’s clear, useful and all around awesome.

Picture of Gonzalo Blasco

by Gonzalo Blasco

Date: Wednesday, October 14th, 2009
Comment: #20

hi… mike, u are really a cool teacher… thanx… this tutorial is really great… i’d read packt pub’s book but wasn’t so clear like this tutorial… u make my life easier… from argentina (yeah, i know… we have just made it into the next world cup, but if you ask me, i guess it was luck… uruguay was playing really well tonigh) i’m shouting THAAAAANXXXX…

Picture of Max Evans

by Max Evans

Date: Sunday, October 18th, 2009
Comment: #21

For some reason I can’t get the menu to load.  Everything else loads OK.  I even changed a couple of gifs and jpegs on the main page with other images and those loaded OK as well.  It wont work with the header menus and it doesn’t work with the headers on the rside of the content.

Picture of Max Evans

by Max Evans

Date: Sunday, October 18th, 2009
Comment: #22

I don’t know what happened but it suddenly started working.  Well I do know what I was doing at the time that it started working I was changing all of the url name in the css sheet from “” to ‘’ to no quotes at all.  When I changed the very last set they all started working! even though some of them were still in double quotes.  I don’t have any idea why it happened but I’m glad it started working.

I really like your tutorial.  Thanks a lot.

Picture of ZacWoe

by ZacWoe

Date: Sunday, October 25th, 2009
Comment: #23

Excellent tutorial, thanks.

Picture of tom

by tom

Date: Sunday, January 31st, 2010
Comment: #24

This comment trail was a huge help help!! I couldnt get images to load with the simple images/image.jpg
yet placing the full path http://localhost:8888/images/image.jpgthey show up now.

Picture of Nick Toye

by Nick Toye

Date: Sunday, January 31st, 2010
Comment: #25

I was wondering how you go about referencing a template from within a css file.  For example I always have a screen.css file - and I reference that from the head. 

In this document I always have an import link to a reset stylesheet.

I’m guessing that this doesn’t work:

@import url(’{stylesheet=site/reset}’); /* RESET CSS */

Any advice?

Mike Boyink

by Mike Boyink (Author)

Date: Sunday, January 31st, 2010
Comment: #26

Hey Nick -

First thought is to try it and see what happens…I prefer that to guessing what EE might do..;)  If it doesn’t work you can just hard code the path to the stylesheets rather than using the linking variable.

Since it’s also a bit outside of what I’m doing here on Train-ee I’d also suggest a post in the EE Forums (if a search doesn’t net you an answer).

I’m happy to support what I’ve written here on Train-ee, but want to be careful in that I don’t want to take away from the paid tech support and community happening in the EE Forums.

Picture of Victor

by Victor

Date: Monday, February 8th, 2010
Comment: #27

Hi Mike,

Thanks for posting this up. I’ve just started getting into EE, even though I have been using CI for a while now. I can finally see the advantages that EE has for building quick websites with a CMS that’s already built.

In the tutorial you mentioned to add the stylesheet as a template. What are the advantages of this as opposed to leaving it as a text file and referencing it from the page template?

Cheers

Mike Boyink

by Mike Boyink (Author)

Date: Monday, February 8th, 2010
Comment: #28

Oh—it’s personal preference more than anything. You can do it either way but for the sake of simplicity writing these tutorials I like to keep it all in EE. It’s also the way I work—keeping it all in EE means I get revision history and backups without effort. Also since I edit templates in EE I can easily edit css as well.

Picture of emma

by emma

Date: Thursday, August 12th, 2010
Comment: #29

i was originally using go daddy and then downloaded EE. i tried to view rendered template but all i came up with was “no input selected”. i have viewed the comments on pages 13 and 31 but the links no longer work. i was wondering what the source of the problem might be

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, August 12th, 2010
Comment: #30

Hi Emma -

That’s a question best asked of EE tech support in the Forums.

Picture of Sexy Cars

by Sexy Cars

Date: Saturday, September 4th, 2010
Comment: #31

Extensive tutorials like this are essential on any subject! My partner bought your Expression Engine 2 book.

Picture of Nicole

by Nicole

Date: Monday, September 27th, 2010
Comment: #32

i am working to convert this site into a seo/resource tool utilizing a blog and additional information.

I did it the first time following the zip file from free css templates. that worked without a problem, so i decided to rename that to zz_site and try my luck with my CSS based page and stylesheet. my biggest worry was that my header and menu bar were include files…so i just created a second stylesheet for the menu linked that to the index page and then copied the code out of the header include file (there has to be a way to keep it as an include file). i was able to remove the php coding (for now—but will need it back in there to complete the site…but i was able to convert my css and index.php into an ee template on the second try. :) Thanks for the tutorial let’s see what else you can show me :)

Picture of Nathan

by Nathan

Date: Wednesday, October 13th, 2010
Comment: #33

Hi,

my site only show the home page pagetitle
im trying to pull through different page titles based on the page you are in, in the header section of the site

how can i do that, the header module contains messy nested if statements which causes confusion , is there maybe a easier method to solve this

Thanks.

Picture of Sibi Philip

by Sibi Philip

Date: Wednesday, October 13th, 2010
Comment: #34

Hi Mike,
  I am very new to EE, installed it only y’day. find your tutorial very easy to follow and explained very well. you have done a great job. Thanks very much

I am having issue while updating templates. if the template has many line of code and when ihit update its giving me 403 error…

Forbidden

You don’t have permission to access /system/index.php on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

When I pasted css it saved ok but when I tried html it showed this error.

Whome do I contact to fix tihs? my hosting provider or EE? please help

Regards
Sibi

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, October 13th, 2010
Comment: #35

Sounds like a hosting issue Sibi.  Or a tech support request in the EE forums.

Picture of Sibi Philip

by Sibi Philip

Date: Wednesday, October 13th, 2010
Comment: #36

Yes. I have contacted my hosting provider and just now they said they have added new rules to mod_sec. and they added an exception to our site now. it worked. Thanks for your prompt reply.

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, October 13th, 2010
Comment: #37

@nathan…keep reading..;)

Picture of HBnC_Design

by HBnC_Design

Date: Friday, October 15th, 2010
Comment: #38

GREAT TUTORIAL! Other than me making a typo at the {site_url} stage it went well. Had to go back on css and html and fix. If you design sites locally, this is a great way to save time when relocating a site. Thanks for the guide

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>