Chapter 2: Loading a Static Template and Stylesheet
Tags: expressionengine study lesson

Chapter 2: Loading a Static Template and Stylesheet

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

The Design Template we'll be working with is simply a generic "open-source" design and was not specifically designed for this book. I chose the template for it's licensing model, relative simplicity and flexibility. It's certainly not perfectly optimised, semantic or accessible markup, but don't let that be an obstacle for you in learning ExpressionEngine. One of EE's great strengths is the fact that it doesn't generate much markup, instead working with HTML/CSS that you provide.

This template demonstrates my opinion that all web design templates are usable with EE - counter to the popular notion that there aren't many EE template sources on the web.

Implementing a template that you find on the web isn't a "one-click" process but it's very straightforward. You can use the process covered in this book as the basic skeleton.

The Design Template files are located in the Companion Files at chapter_2/design_template.

Upload the Template Images

The template uses a number of images in both the CSS and HTML. We need to put the template images where the web server can access them. ExpressionEngine has no requirements in this area so, if you have a standard naming and placement schema, you can still use it.

For this book (and most of my client sites), I've created a new subdirectory in the default EE images directory and placed my images within it. The path is: site root/images/interface/

The following steps assume the images will be located in that directory.

Working within your EE installation location, create an /images/interface/
directory:

I uploaded all nine images from the Companion Files: chapter_2/
design_template/images folder there.

Edit CSS to Add the Site URL Variable

Now, let's take a look at the stylesheet that accompanies the design template, found in the downloaded archive (/chapter_2/design_template/stylesheet.css)

This file has the CSS formatted with the settings for a given selector all on one line. I find CSS formatted like this tough to scan and modify. I also like to use tabs to add spacing to show some relationship between higher-level selectors and more specific selectors. To make this file easier for me to work with, I went through it and put in carriage returns and tabs using a text editor. There are more
automated ways to do this, but I like doing it manually as it helps me get familiar with the CSS. This method also lets me look for any potential trouble spots (like where the content will be variable length but the design has a fixed size).

Regardless of how you like your CSS formatted, you have changed the name and location of the folder where the design images reside so you will need to edit the CSS paths to them. We'll edit the stylesheet locally and then bring it into ExpressionEngine in a later step.

There are two choices here: full paths or relative paths. Full paths are more reliable, but require editing when moving the site to a production server or changing the domain from a temporary one to a permanent one.

Relative paths allow a site to be moved more easily, but due to the way ExpressionEngine creates virtual directories (past its index.php file everything you see in the URL exists in EE and not as a file/folder on the web server), relative paths aren't always as reliable.

Here's your first taste of the power of ExpressionEngine. By using one of its standard Global Variables, we can achieve both the reliability of a full path in the CSS file with the ease of updating that a relative path offers.

The variable we'll use here is {site_url}. This variable takes its value from the Control Panel setting: Admin > General Configuration > URL to the root directory of your site.

Now, when ExpressionEngine serves up the stylesheet it will replace the {site_url} variable with the full path found in the Control Panel - creating a full image path that's also easily updated. The {site_url} variable can be found in the EE User Guide here:

https://docs.expressionengine....

It's always a good idea to check the EE User Guide on an EE variable or tag before using it - just to be sure it's going to do what you are expecting it to.

I use the Find and Replace function in a text editor and change all image paths in stylesheet.css from:

images/topbg.jpg

to

{site_url}images/interface/topbg.jpg

Three things here:

  • {site_url} variable is the only Global Variable that you can use in a ExpressionEngine CSS Template.
  • This approach only works if you store your CSS in ExpressionEngine, and not as an external .css file. If you prefer, you can keep your .css external to EE (some sites see a performance gain by doing so). If you go the external CSS route you'll just need to hardcode all paths in lieu of using {site_url}.
  • {site_url} includes the trailing slash so don't put another one after the variable or you'll have double-slashes when the template is rendered.

There is a fully updated stylesheet in the Companion Files archive at chapter_2/updated_stylesheet.css.

With the stylesheet changes done, we can now start the process of bringing the design template's code into ExpressionEngine.

Template Organisation

ExpressionEngine uses Template Groups to organise templates. Template group names and template names can also become part of your URL structure and this is why it's important to structure your groups and name your templates with care.

In general, EE's URLs have the following structure:

https://www.domainname.com/index.php/template_group/template_name/

If I have only one stylesheet I'll keep it in a "site" Template Group along with the

site's master index template. If there are multiple stylesheets to handle browserspecific issues or print/mobile versions then I'll create a dedicated stylesheets Template Group. Since this design template has just the one stylesheet I'll store it in the site Template Group.

We'll talk more about backend organization in Chapter 5.

Create a Template Group

In ExpressionEngine 2 the Control Panel home page is designed to be task-oriented with sections for Create, Modify, or View.

  1. Since we are in creation mode, find Template Group in the Create section and click it.
  2. On the Create a New Template Group screen:
  3. Name the new Template Group "site".
  4. Do not duplicate an existing Template Group (there shouldn't be any to duplicate anyway).
  5. Check the box for Make the index template in this group your site's home page?
  6. Click Submit.

Create a CSS Template

We can now start to load the site Template Group with templates. The first one we'll put there is the stylesheet.

  1. If you aren't in the Template Manager, navigate there: Design > Templates > Template Manager.
  2. From the Template Manager, click the New Template button.
  3. Give it a name (I've called mine "stylesheet").
  4. Set the Template Type to CSS.
  5. Click Create and Edit.

Copy/Paste in the CSS Code

Now you'll have a new empty template. Copy and paste in the CSS code that you edited earlier. Save the template by clicking Update and Finished.

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 backside at some point (it's not a question of if, it's a question of when). This feature is not enabled by default, so let's get it turned on:

  1. Make sure you are in the Template Manager: Design > Templates > Template Manager.
  2. Click Global Template Preferences.
  3. Change Save Template Revisions to Yes.
  4. Choose the number of revisions you want to keep (I usually keep 10).
  5. Click Update.

With revision history turned on, you should be able to retrieve a previous version by loading a template in edit mode, and selecting the Revision History dropdown. EE date/time stamps the revisions and also shows the Screen Name of the person who last saved it:

Selecting a previous revision will open a new tab in your browser with a textarea field where you can copy all or part of your previous code and drop it back into the active template.

Edit Image Paths in HTML

With the CSS loaded and revisions turned on, it's time to work with the HTML. You'll need to edit the image paths in the design template's index.html file to reflect the folder structure we've created for EE in order to specify them using the {site_url} variable.

They'll need to change from this form:

images/img2.gif

to this form:

{site_url}images/interface/img2.gif

Again, this is where a text editor comes in handy where you can use the find and
replace option. You should find a total of four paths to change.

Loading the HTML into EE

Once you have the images paths edited and saved in your design 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.

Use the Template Manager to navigate to the site Template Group, click the index template title to edit it, then 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. We need to do this because we've changed the locations of these files by pulling them into ExpressionEngine.

In the HTML, the default link is:

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

This needs to change to the EE stylesheet link:

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

Notice the EE variable in that code, starting with {stylesheet=. What comes after this variable is the name and address of the stylesheet template. Site is the Template Group name and stylesheet is the Template name. If you used a different name for either the Template Group or the Template, you'll need to make sure the name and address used in the variable reflect those differences (and then, slap yourself on your wrist for being such a nonconformist).

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

If you need it, there is an updated HTML file available in the Companion Files at chapter_2/updated_index.html.

The Results

If you're still in the template editing screen, you can now click View Rendered Template. You should get the static HTML and CSS as served up by EE.

Not Working?

If you aren't getting images or aren't getting a styled Home page, check the following:

  • Make sure you saved the stylesheet as a CSS template (and not a Web Page).
  • Make sure you have the proper names of your Template Group and template specified. Double check that you named them what you thought you named them.
  • Look for plurals where there should be singulars and vice-versa: stylesheet vs. stylesheets, etc.
  • View the rendered version of your CSS template and double check your image paths. Copy and paste a complete path and file name back into the browser address bar to see if just the image loads. If it doesn't, your variable and path code in the stylesheet has an issue.
  • Try double quotes rather than single quotes in the stylesheet linking variable.
  • Make sure you have used braces around EE variable names and not parentheses.