Chapter 4: Moving into the Index Template
Tags: expressionengine study lesson

Chapter 4: Moving into the Index Template

In this chapter, we'll make a few coding tweaks to our site/index template.

Title Tag

For now, we'll edit this to just show a "root" title that shows our site name. In Chapter 10, I'll cover how to append a dynamic element onto the end of it for sections deeper into the site. For this step, you'll need to edit the embeds/html_header template created in Chapter 3. Currently it just has "Template1" in the tags and I'm going to use an EE Standard Global Variable called {site_name} instead.

The contents of the {site_name} variable are initially specified during EE installation, but are also set in your EE Control Panel under Admin > General Configuration > Name of your site.

In my case, I've specified this as "Building an ExpressionEngine Site".

Template Name: embeds/html_header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DT...">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="content-type" content="text/
html;charset=iso-8859-2" />
<meta name="author" content="free-css-templates.com" />
<link rel='stylesheet' type='text/css' media='screen'
href="{stylesheet='site/stylesheet'}"/>
<title>{site_name}</title>
</head>
<body>
 <div id="content">

Companion File: chapter_4/embeds/html_header.txt

Make your changes, click Update and Finished, and refresh the template in your browser to see changes.

Editing the Masthead

Now for some changes to the page itself. Let's change out the site name and slogan.

Pretty simple here, in the embeds/page_header template, I'm going to use the Global Variable {site_name} again in the tags, along with the {homepage} variable to make a link to the site Home page. I'm also going to change the hardcoded slogan that appears within the spanned text.

The code needs to change from this:

<h1>Your <span class="green">Company</span></h1>
<span id="slogan">The Best Slogan here</span>

To this:

<h1><span class="green"><a href="{homepage}">{site_name}</a></
span></h1>
<span id="slogan">A Tutorial Series from Train-ee.com</span>

Make your changes, click Update and Finished, and refresh the site/index template in your browser to see the changes.

After making the site title in the masthead a link, I can see this is one of those times when the original Design Template template will need its CSS tweaked (evidently the creator didn't think we'd want the linked anywhere).

I'm going to assume you're comfortable tweaking CSS and stick to the specifics of EE implementation here. You need an entry in the CSS template that covers a #title .green a element. I just copied the color values from the #title .green declaration in the Design Template's stylesheet.css file.

The stylesheet.css file included in the Companion Files already has these changes made.

With the site masthead edited to include our site name and a Home page link, let's move down the page to the main navigation.

Tweaking Navigation

For my site I want main navigation of

  • Home
  • About
  • Products
  • Services
  • Blog
  • Contact

To achieve this navigation, I need to make additional changes to the embeds/page_header template. The main navigation is built using a simple unordered list, which I'm going to assume you are capable of editing.

Looking at the Design Template, the code specifies class="selected" which has the effect of setting the active tab when the page renders. Since we'll be building the Home page of our site first, let's apply that class to the Home page link. You can, once again, use the EE Global Variable {homepage} as the href value in the Home page link.

We'll get back to this template later to actually specify the links. For now let's just get the proper items in the list.

Here's what my updated embeds/page_header template code looks like - now using EE Global Variables for links, and including our new main navigation structure:

Template Name: embeds/page_header

<div id="title">
 <h1><span class="green"><ahref="{homepage}">{site_name}</a></span></h1>
 <span id="slogan">A Tutorial Series from Trainee.com</span>
</div>
<div id="menu">
 <div class="submit">
 <ul>
 <li><a class="selected" href="{homepage}"><span>Home</span></a></li>
 <li><a href="#"><span>About</span></a></li>
 <li><a href="#"><span>Products</span></a></li>
 <li><a href="#"><span>Services</span></a></li>
 <li><a href="#"><span>Weblog</span></a></li>
 <li><a href="#"><span>Contact</span></a></li>
 </ul>
 </div>
</div>
<div id="subheader">
 <div class="rside">
 <div class="padding">
 <div id="search">
 <form action="#" method="get">
 <p><input type="text"name="search" size="20" maxlength="250" class="text" value="" />
 <input type="submit" value="" class="btn1" /></p>
 </form>
 </div>
 </div>
 </div>
 <div class="lside">
 <div class="padding">
 <strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Morbi elementum, ipsum nec auctor condimentum, magna odio aliquet elit, non bibendum lorem ligula at nisi.
<a href="#" title="">Proin sapien</a>.
 </div>
 </div>
</div>

Companion Files: chapter_4/embeds/page_header.txt

Make your changes to the main navigation, click Update and Finished, and refresh the page in your browser.

The Results

After implementing the template changes in this chapter, your Home page should load with an updated title, tagline and main navigation:

Figure 16: Updated Title, Tagline and Main Navigation

Not Working?

If you aren't seeing the changes in your rendered site/index template, here are
some things to check:

  • Variable names are case sensitive, and EE's built-in Global Variables will always be lowercase with underscores between words.
  • Check for misspelled variable names.
  • Make sure you are loading the latest version in your browser and not looking at the static HTML supplied by the Design Template.
  • Make sure you didn't accidentally delete some HTML - or tags, etc.
  • Make sure you are rendering the Parent site/index template and not one of
    the partial Embedded Templates.