06 - Bringing Static Templates into ExpressionEngine

In this post we’ll bring the static HTML homepage and CSS into ExpressionEngine and get it to load at the subdomain here on Train-ee.com.

 
Download the EE Code for 06 - Bringing Static Templates into ExpressionEngine

The first step I usually take, once I have working HTML and CSS in hand, is to load those files into EE and make only the required changes to get them to come up in the browser.

The sample template pack that I’m using for this tutorial includes 11 HTML templates; but, for today’s purposes, I’ll focus on just the index template. I want to make a number of changes to the HTML files so I will bring them in and modify them one-by one.

Conventions
Throughout this series I will refer to EE templates by their “full name” ie: “template-group-name/template-name” and I’ll just write “template-group-name/template-name” and not “The template-group-name/template-name Template”.

For example: Edit site/index
and not: Edit the site/index template.

This will help me be more concise.  Note that while typically you’d capitalize the template names as proper nouns I don’t do that because they are kept all lowercase in the system.  Also - you can use either underscores or dashes as word separators in the names. Be mindful of this as your template names will often be seen in your EE URLs.  I’m going to use dashes as I have EE configured to also use dashes as word separators in my blog entry titles.

Here’s what we’ll cover in the chapter:

  • Prepping the EE Install
  • Create a stylesheets template group
  • Create a page-comps template group
  • Create a directory for interface images
  • Upload all interface images
  • Edit the page-comps/index template
  • Create a stylesheets/style template
  • Create a stylesheets/ie_style template
  • Edit the stylesheet link in page-comps/index
  • Modify image paths in all new templates
  • Load the new page in the browser

Prepping Your EE Install
ExpressionEngine installs as a basic weblog site and, in order to do that, it creates a number of items on the backend - a weblog, a couple of template groups, etc.  I won’t use any of these default items on this project.  What you do with them is up to you - if you’re new to EE then with the templates especially I’d recommend renaming the template groups so that you can keep them for future reference.  I use an old MSAccess developer’s trick and rename them with a “zz_” prefix so they sort to the bottom of the templates container and I know they’re archived.

To rename a Template Group:

  • Enter the Control Panel
  • Choose the Templates Tab
  • Select the Group in the left column
  • Click the Edit Group link in the center column
  • Enter your new name
  • Click Update
  • Repeat as necessary with other existing template groups

Since I’m building out this site using the Multiple Site Manager here on Train-ee.com, I have an empty palette to start with - a single “site” template group which has one simple index template.

Create New Template Groups
Now we need a couple of new template groups - one for the stylesheet and one for our page comps.  The reason I create a template group for the page comps is that it gives me a place to upload them initially, then work through and “chunk them up” (which we’ll get to in a future chapter), and just generally make sure they are set before moving them into a “production” template group.  Then when I’m further along in the implementation and need a new page type I can just copy one from the page comp library.

To create Template Groups:

  • Select the Templates Tab
  • Click the large “Create a New Template Group” button
  • First create a Template Group called “stylesheets”
  • Skip down and click Submit
  • Repeat the process and create a group called “page-comps”
  • With this one do check the option to “Make the index template in this group your site’s home page?” This will change down the road but will be handy for now.

You’ll probably notice that your new template groups aren’t sorted alphabetically yet.  Let’s do that:

  • From the Templates Tab
  • Click Edit Group Order
  • Click “Alphabetize Group Order”
  • Click Update

Create a Directory for Interface Images
Before we can upload anything from the templates we need to figure out where to put it on the server.  For all the graphics that get used as part of the site design I typically create an “interface” directory under the root “images” directory that EE installs - so site root/images/interface/

For my purposes I’ve created a church/images/interface directory.

Once your directory is created go ahead and upload all the template images to it.

Note: this template set also includes a “scripts” directory for the little javascript calendar widget.  I’ve always found it silly for websites to waste space telling you the time - whatever device is displaying the site is probably already telling you that.  So I plan to delete that from the design and hence won’t need to worry about finding a server home for the javascript stuff.

Edit page-comps/index
With our images in place, let’s move to some code and start with the index template from the template set.  This code needs to get copied and pasted into the page-comps/index template that EE has created by default in the new template group.

  • Open the file locally with a text editor
  • Copy all the code and copy it to the clipboard
  • In EE, click the template name for editing
  • Paste in the code
  • Click Update and Finished

With the HTML taken care of, now we’ll move onto the CSS.

Create Stylesheet Templates

  • Still in the Templates Tab
  • Select the stylesheets group in the left Choose Group column
  • Click New Template in the center column
  • Enter “style” as your template name
  • Important! Make sure to select “CSS Stylesheet” in the Template Type dropdown
  • Click Submit

Do your new templates still have a globe icon when you’re viewing the stylesheets Template Group?  Then you missed the part about setting them to be CSS templates.  You can go back in and change this by clicking Preferences in the center column, then choosing CSS Stylesheet in the Type column, then clicking Update.

Using the same process as above, select your new template for editing and copy in the CSS code from the style.css file in the template set.

Repeat this process to create a new EE template for the ie_style.css file in the template set.

So now we have HTML and CSS uploaded to ExpressionEngine but before they can see each other we have to do some editing.

Edit the stylesheet link in page-comps/index
The first thing to edit is the link to the stylesheet in page-comps/index.

The original link is:

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

and this needs to change to:

<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=stylesheets/style}' /> 

The original IE link was

<!--[if IE]><link href="styles/ie_style.css" rel="stylesheet" type="text/css"><![endif]--> 

and this needs to change to:

<!--[if IE]><link rel='stylesheet' type='text/css' media='all' href='{stylesheet=stylesheets/ie_style}' /><![endif]--> 

After updating the template you should be able to click View Rendered Template and see your page with some styles - but just missing the images.

If you have difficulties getting the stylesheet to hook up please consult the ExpressionEngine documentation on Linking to Stylesheets.  In the past I’ve had feedback that either single or double quotes would work, or only double quotes, etc. - so you might have to experiment a bit.

Modify Image Paths in All New Templates
The last big step is to now go through and edit the paths to all images in the new EE templates. 

The slick setup I have found for this (being a Windows guy and preferring to work always on the server) is to install the Its All Text! FireFox add-on.  This little dude gives you a button next to any FF text area and if you click it, the text editor of your choice will load with the contents of the text area.  Use the text editor, click save and close, and the text area is updated.  I use it hooked up to TextPad.  This arrangement works really well for picky find and replace type functions like we need to do here.

Before we replace paths, however, let’s talk a bit about relative vs. specific paths. There has been this debate over the years about which is best for server performance or for site maintenance, etc.  That whole argument/issue aside, what I’ve found with EE is, due to its dynamic URL structure, using specific/complete paths is just plain easier and more reliable.  But rather than hardcode the whole path we can use a handy Global Variable known as site_url,  which EE will replace with the path to the root of our site.  The contents of this variable come from the EE Control Panel under Admin >  System Preferences >  General Configuration > URL to the root directory of your site.

In other words, a path of:

{site_url}images

Will get rendered by EE as:

http://church.train-ee.com/images/ 

The special thing about site_url is that it is the only variable that’s rendered in CSS templates - so we can use it in both HTML and CSS to get a specific path in there, then if that needs to change down the road (like as part of a site launch to a permanent URL) just change the contents of the field referenced above and all templates will see the change.

So what I want to do in page-comps/index is use a find and replace process to change the image references from:

<img src="images/logo.jpg" alt="logo" width="400" height="123" border="0"

to

<img src="{site_url}images/interface/logo.jpg" alt="logo" width="400" height="123" border="0"

Save your changes by Updating the template.

Then in stylesheets/style I’ll replace declarations like

backgroundurl(../images/header-bg.jpgrepeat-x

with

backgroundurl({site_url}images/interface/header-bg.jpgrepeat-x

The Results
At this point, if you got your paths correct, you should be able to load page-comps/index and have it come up fully styled with all images.  Here’s mine: http://church.train-ee.com/

Whew!  That’s a big first step but a satisfying one when you see the index page loading at the EE URL and having all the styles and images pop in. 

What’s Next?
We’ll do some housecleaning on these templates, getting them tidied up with better formatting, and I’ll move some of the inline styles from the HTML template to the CSS.  Depending on how long that takes to cover, I might also start the “chunking up” process where we pull out common page elements and create embedded templates from them so they’re only stored once in EE.

Templates Covered
Attached to this post is a zip archive with the updated text versions of the templates covered in this chapter.  The folder names map to the Template Group names, and the file names map to the EE template names.

 

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of tzTrainEE

by tzTrainEE

Date: Friday, April 25th, 2008
Comment: #1

Thanks Michael, for getting your hands dirty and digging into this!
Creating a page-comps group of templates, makes so much sense. I’ve sort of been struggling building an EE template, and having the static or page comp version stored somewhere else. If something gets buggered (the international term), it’s going to be nice to have those static versions right there. I had them elsewhere in my web, and of course all the paths would be way off having them outside of the EE install. Little things like this are really brilliant, and it just never occurred to me.
Did you ever notice production on Friday goes way up, lol :) Have a great weekend.

Picture of Jesse Schutt

by Jesse Schutt

Date: Friday, April 25th, 2008
Comment: #2

Michael,

Thanks so much for putting this series together.  I can’t say how helpful it is to see how someone else compiles a site in EE.  I have my way of doing it, and I feel that this series will add to what I do.  Especially since many of the sites I am responsible for are ministries, churches, and other para-church organizations.

Keep up the good work!

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, April 26th, 2008
Comment: #3

Hi Dan - that’s a pretty good question.  I’ve run into the phrase working with other interactive agencies and always took it to mean (roughly) “design examples to show the client” - so figured that “comp” was short for “composition”.

Googling around I found this page on Adobe where it says:

Graphic designers usually sketch out a piece of comprehensive artwork (also known as a “comp”)

and this page on about.com where it says

The terms comp, dummy, and mock-up may sometimes be interchanged, but in general a comp is in the early stages of the design process and a dummy is for internal use or for showing the “mock-up of a finished piece” to your printer.

Since these designs have been translated to HTML “page-templates” might be a better term but seemed redundant since we were putting them into the EE template area.

Picture of tzTrainEE

by tzTrainEE

Date: Sunday, April 27th, 2008
Comment: #4

Hard to track down but aka “Artist Proof” or designer proof in this case. This design may require additional CSS classes and the like. It’s entirely possible to break the layout, and will be nice to have the original css to fall back on handy.
When you adjust a width here, padding there or maybe a margin, sometimes you go to check the design in one browser or another and you find a div not lining up at all where it should. The page-comp group is going to be like a safety net :) No use working without a net.

As a web designer once you show a client a comp, sometimes you get stuck, they liked it, but you think of something that improves the design in your mind. Sometimes it’s best to just go with the proof and move on building the site.

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, May 3rd, 2008
Comment: #5

Because the site_url is a standalone variable while the path variable needs to have additional parameters specified.

site_url is also the only variable that you can use in a CSS template.

Mike Boyink

by Mike Boyink (Author)

Date: Friday, June 6th, 2008
Comment: #6

Thanks Adam - glad to know it’s being found and read.  Good point on the path variable (which I rarely use).

Picture of Sean

by Sean

Date: Tuesday, June 24th, 2008
Comment: #7

That firefox extension it’s all text is pure gold - wish I had known about that before. Also I had forgotten about the {site_url} tag and will start using it now.

Picture of Scott Reston

by Scott Reston

Date: Friday, August 15th, 2008
Comment: #8

Yeah - that text plugin is great. Handy for EE and for Wordpress. Thanks.

I’m new to EE and evaluating it for client work. This tutorial is great. Nice way to get introduced to EE.

Picture of parsoncraig

by parsoncraig

Date: Wednesday, December 17th, 2008
Comment: #9

Mike,
What if you had javascript as well as images to upload.  I think I read on the forum that you prefer to keep js out of EE.  Where do you put it, and how does it relate to the site_url variable?

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, December 17th, 2008
Comment: #10

You’re right - I usually keep javascript out of EE because I don’t tend to ever edit it.

I usually just create a js folder off the root, so it can be accessed via:

{site_url}js

If need be.

Picture of Gaurav

by Gaurav

Date: Thursday, December 18th, 2008
Comment: #11

Is there another stylesheet called ‘ie_style’? I don’t see it in the attachment in this section. Can you please provide it?

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, December 18th, 2008
Comment: #12

ie_style is just:

#navBar {  overflow: hidden }
#navBar a:hover { color:#000; text-decoration:none } 
Picture of parsoncraig

by parsoncraig

Date: Thursday, December 18th, 2008
Comment: #13

Mike,
Is there any advantage or disadvantage to putting the CSS in EE?  Could you just use the site_url variable to update the path to the CSS and just link it in without putting it in EE?  Or is there a necessity or prudence involved in moving the CSS also to EE?

Mike Boyink

by Mike Boyink (Author)

Date: Saturday, December 20th, 2008
Comment: #14

Well there’s the rub - if you don’t have the CSS in EE then you can’t use the site_url variable.

For me it boils down to convenience - I often need to tweak the CSS while coding EE templates, so would rather it be right there in the CP where I’m at.

Others have mentioned performance gains by keep it external.  Also - if you tend to work with EE templates as external files then doing the CSS the same way would make sense.

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>