Train-ee | Learn Expression Engine Fast

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 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:

to

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:

to this form:

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:

This needs to change to the EE style of link:

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:

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 >>

 

Add Your Comment

Comment on this Post

1. Name:
2. Email:
3. URL:
4. Comment:
5. Remember Me?
6. Email Notify of Response?
7. Enter this word:
   In this field: