Customizing the Default Expression Engine (v1.6.7) website template

Exclusive offer: get 50% off this eBook here
Building Websites with ExpressionEngine 1.6

Building Websites with ExpressionEngine 1.6 — Save 50%

A clear, concise, and practical guide to creating a professional ExpressionEngine website

$23.99    $12.00
by Julian Tancredi | April 2009 | Content Management PHP

This article by Julian Tancredi, promotes the transition into CSS-based web design for new EE users and demonstrates how to use Cascading Style Sheets (CSS) to improve the layout of the default EE website/blog template. This article will demonstrate how to use CSS to effectively take control of the appearance of any EE template keeping the structure and the presentation entirely separate.

Introduction

The blogging revolution has changed the nature of the internet and as more and more individuals and organizations choose the blog format as the preferred web solution (i.e content driven websites which are regularly updated by one or more users). The question of which blogging application to use becomes an increasingly important one.

I have tested all the popular blogging solutions and the one I have found to be the most impressive for designers with a little CSS and XHTML know-how is Expression Engine. After spending a little time on the Expression Engine support forums I have noticed that a high number of the support questions are relating to solving CSS problems within EE.

This demonstrates that many designers who choose EE are used to working from within Adobe Dreamweaver (or other WYSWYG applications) and although there are no compatibility issues between the two systems, it is clear that they are making the transition from graphics based web design to lovely CSS web based design.

When you are installing Expression Engine 1.6.7 for the first time, you are asked to choose a theme from a drop-down menu, which you may expect would offer you a satisfactory selection of pre-installed themes to choose from. Sadly this is not the case in Expression Engine (EE) version 1.6.7, and if you have not downloaded and manually saved a theme inside the right folder within the EE system file structure you will be given only one theme to choose from: the dreaded "default weblog theme".

Once you complete the installation, no other themes can be imported or installed, so you can either restart the installation, opt to select the default weblog theme or start from a blank canvas (sorry about that).

The good news is that the next release of EE (v.2.0) ships with a very nice default template, but the bad news is that you will have to wait a few months longer to get a copy and you will need to renew your license to upgrade for a fee.  Even then you will probably want to modify the new and improved default template in EE 2.0, or you may due to your needs opt to  choose another EE template altogether so that your website does not look like a thousand other websites based on the same template (not good).

This article will demonstrate how to use Cascading Style Sheets (CSS) to improve the layout of the default EE website/blog template, and how to keep the structure (XHTML) and the presentation (CSS) entirely separate-which is best practice in web development.

This article is intended as a practical guide to intermediate level web designers wanting to program with CSS more effectively within Expression Engine, and to create better websites, which adhere to current WC3 web standards. It will not attempt teach you the fundamentals of programming with CSS and XHTML or how to install, use or develop a website with EE. This article will demonstrate how to use CSS to effectively take control of the appearance of any EE template.

If you are new to EE then it is recommended that you consult the book "Building a Website with Expression Engine 1.6.7", published by Packt Publishing and visiting www.expressionengine.com to consult the EE user guide.

If you get stuck at any time when using Expression Engine you can visit the EE support forums via the man EE site to get help with EE, XHTML and CSS issues and for regular updates, the Elislab EE feed within EE is an excellent source of news from the EE community.

The trouble with templates

Lets open up EE’s default "weblog" template in Firefox. I have the very useful "developers toolbar" add-on installed. You can see the many options which are available lined-up across the bottom of Firefox’s toolbar. When you select "Outline > Outline Current Element", Firefox renders an outline around the block of the element and is set by default to display the name of the selected element. This add-on features many other timesaving and task-facilitating functions, which range from DOM tools for JavaScript development to nifty layout tools like displaying a ruler inside the Firefox window.

Customizing the Default Expression Engine (v1.6.7) website template

The default template is a useful guide to some basic EE tags embedded into the XHTML, but the CSS should render a more clean and simple to customize design-so lets make some much needed changes. I will not be looking onto the EE tags in this article because EE tags are very powerful and are beyond the scope of this article.

Inside the template module create a new template group and call it "site_extended". Template groups in EE organize your templates into virtual folders. We will make a copy of the existing template group and templates so all the changes we make are non-destructive.

Customizing the Default Expression Engine (v1.6.7) website template

Choose, do not duplicate any existing template groups, but select "Make the index template in this group your site's home page?" and press submit. Easy. Next create a new template and call it "site_extended_css" and lets duplicate the site/site_css template. This powerful feature instructs EE to clone an existing template with a new name and location.

Customizing the Default Expression Engine (v1.6.7) website template

Now let's create a copy of the default site weblog and call it "index_extended".

Select "duplicate an existing template", choose "site/index" from the options drop-down list. The first part of the location is "site"/ being the template group and the site/"index" the actual template.

Customizing the Default Expression Engine (v1.6.7) website template

Now your template management tab should look like:

Customizing the Default Expression Engine (v1.6.7) website template

Notice that the index template has a red star next to it.

Building Websites with ExpressionEngine 1.6 A clear, concise, and practical guide to creating a professional ExpressionEngine website
Published: July 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

Open index_extended, click inside the window and select all the code inside the template and copy.

Open site_extended/index template and paste all the code inside and press "update and finished". Now delete site_extended_index and click into "preferences". Change the site_extended_css to site_css and press submit.

Customizing the Default Expression Engine (v1.6.7) website template

You’ve no doubt noticed that I included two extra steps  "renaming a template" and "deleting a template" to prepare you to do it for yourself later when you start creating your own templates. Next time you create a template group you can create a clone of an existing template group, in this case we could have selected "site" in the "Duplicate an Existing Template Group?" option and we would have had copies of templates created for us.

Your template management screen should now look like this:

Customizing the Default Expression Engine (v1.6.7) website template

Now we are ready to start modifying the layout and the design using CSS.

Open site_extended/index and change the parameter of "my_template_group"  from "site” to "site_extended".

{assign_variable:my_template_group="site_extended"}

Click update and finished and open site_extended/site_css.

First let's hide #topbar by adding visibility: hidden; to the rule block:

#topbar {
visibility: hidden;
margin:0 auto;
padding:0;
height: 45px;
background: #FBFAF4;
border-top: 8px solid #232863;
border-bottom: 1px solid #333;
}

There is another line in the background that we can hide, and it is another empty <div> belonging to a class called .secondbar. We could just delete these two empty divs but this article is about showing how CSS targeting allows you to manipulate elements without modifying the XHTML markup.

.secondbar {
visibility: hidden;
margin:0 1px 0 0;
padding:0;
height: 1px;
background: #3C3B3A;
border-top: 1px solid #31302F;
border-bottom: 1px solid #50504E;
}

Let's add this rule at the top of site_css. This zeros-out the margins and padding.

*{margin:0;
padding:0;
}

Next we unify the header and the content.

#content {
float: left;
margin: 0;
padding: 0 10px 0 10px;
background-color: #F9F8F2;
}

Customizing the Default Expression Engine (v1.6.7) website template

Then we take control of the body element.

body{
position:absolute;
top:0;
left:0;
color: #333;
background-color: #333;
font-size: 62%;
font-family:Lucida;
margin:0;
padding:0;
}

Lets position all the page content at the very top and left of the browser’s window and apply position:absolute; top:0, left:0; to #wrapper.

Proportions and widths

When designing for any media the proportions of things are essential factors and being mindful of proportions and controlling widths and sizes of the block-level elements is a major factor when designing for the web. Our template is no exception so let's change the width property to 790px, and make a few other minor adjustments to really balance out the form and shape it into a more flexible design model.

First let's make these adjustments to the CSS.

#wrapper {
position:absolute;
top:0;
left:0;
margin:0;
padding-bottom: 10px;
width: 790px;
background-color:#fff;
color: #333;
}

Customizing the Default Expression Engine (v1.6.7) website template

Change the font-size on #navbar to 1em (12px) and take control of the remaining structural elements #blogtitle, #header, #footer.

#navbar {
margin:0 0 0 125px;
padding:3px 0 3px 0;
background: #FBFAF4;
font: 1em lucida grande, verdana, arial, helvetica, sans-serif;
text-align: center;
}
#blogtitle {
font-size: 1.25em;
color: #2F4C12;
float: left;
margin: 7px 0 0 0;
padding: 8px 4px 4px 4px;
width: 700px;
}
#header {
margin: 0;
padding: 0 10px 5px 20px;
background: #FBFAF4;
border:none;
}
#footer {
margin: 0;
padding: 5px 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #F9F8F2;
color: #333;
font-size: 70%;
letter-spacing: 0.09em;
}

Customizing the Default Expression Engine (v1.6.7) website template

Above image shows the browser window with the Firefox developer’s toolbar add-on installed. There is unlimited scope for developing this layout or starting an entirely new template and developing your own designs based on the examples using CSS. I urge you continue exploring Expression Engine and discovering the flexibility of CSS.

Customizing the Default Expression Engine (v1.6.7) website template

Above image shows the finished template.

Building Websites with ExpressionEngine 1.6 A clear, concise, and practical guide to creating a professional ExpressionEngine website
Published: July 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
/* ---------------- The full CSS code Snippet ---------------*/
* {
margin:0;
padding:0;
}

body{
position:absolute;
top:0;
left:0;
color: #333;
background-color: #fff;
font-size: 62%;
font-family: Lucida; Verdana; sans-serif;
margin:0;
padding:0;
}

#wrapper {
position:absolute;
top:0;
left:0;
margin:0;
padding-bottom: 10px;
width: 790px;
background-color: #F9F8F2;;
color: #333;
}


#header {
margin: 0;
padding: 0 10px 5px 20px;
background: #FBFAF4;
border:none;
}

h1, h2, h3 {
font-family: georgia, times new roman, times, serif;
letter-spacing: 0.09em;
}

h4 {
font-family: lucida grande, verdana, arial, helvetica, sans-serif;
margin-bottom: 4px;
}

p {
font-family: times new roman, times, serif;
}

ol {
margin-bottom: 10px;
}

.center {
text-align: center;
}

blockquote {
font-family: trebuchet ms, verdana, arial, helvetica, sans-serif;
}

ul {
list-style: square;
margin-top: 3px;
margin-bottom: 3px;
margin-left: 1em;
padding-left: 1em;
}

img {
margin: 0;
padding: 0;
border: 0;
}

a:link { background-color: transparent; text-decoration: none; color: #663300; }
a:hover { background-color: #663300; text-decoration: none; color: #fff; }
a:visited { background-color: transparent; text-decoration: none; color: #663300;}

#topbar {
visibility: hidden;
margin:0 auto;
padding:0;
height: 45px;
background: #FBFAF4;
}

.secondbar {
visibility: hidden;
margin:0 1px 0 0;
padding:0;
height: 1px;
background: #3C3B3A;
border-top: 1px solid #31302F;
border-bottom: 1px solid #50504E;
}


#navbar {
margin:0 0 0 125px;
padding:3px 0 3px 0;
background: #FBFAF4;
font: 1em lucida grande, verdana, arial, helvetica, sans-serif;
text-align: right;
}

#navbar ul {
list-style: none;
}

#navbar li {
float: left;
padding: 0 23px 0 23px;
margin-right: 5px;
list-style: none;
}

#navbar li a {
display: block;
padding: 0.75em 0 0.25em;
text-transform: uppercase;
color: #000;}

#navbar a:hover {background: transparent;}

#blogtitle {
font-size: 1.25em;
color: #2F4C12;
float: left;
margin: 7px 0 0 0;
padding: 8px 4px 4px 4px;
width: 700px;
}

#blogtitle h1 {
margin: 0;
padding-top: 5px;
letter-spacing: 0.1em;
text-align: left;
}

#nav {
float: left;
margin: 0;
padding: 0;
width: 350px;
text-align: right;
background: transparent;
color: #333;
font-size: 70%;
font-variant: small-caps;
letter-spacing: 0.09em;
}

#content {
float: left;
margin: 0;
padding: 0 10px 0 10px;
background-color: #F9F8F2;
}

#blog {
float: left;
margin-right: 5px;
padding: 0 10px 10px 10px;
width: 440px;
color: #333;
text-align: left;
}

.entry {
margin-top: 10px;
padding: 0 10px 10px 10px;
border: 1px solid #ccc;
background: #F9F8F2;
color: #333;
}

#sidebar {
float: left;
margin-left: 5px;
padding: 10px 10px 10px 15px;
border: 1px solid #ccc;
width: 219px;
background: #F9F8F2;
color: #333;
text-align: left;
}

#footer {
margin: 0;
padding: 5px 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background-color: #F9F8F2;
color: #333;
font-size: 70%;
letter-spacing: 0.09em;
}

.date {
font-size: 120%;
background: transparent;
color: #000;
}

.title {
font-size: 130%;
font-weight: normal;
background: transparent;
color: #336600;
border-bottom: 1px solid #ddd;
}

.posted {
margin-bottom: 10px;
font: 10px lucida grande, verdana, arial, helvetica, sans-serif;
background: transparent;
color: #666;
}

.sidetitle {
margin: 18px 0 7px 0;
font-size: 115%;
letter-spacing: 0.09em;
font-weight: normal;
background: transparent;
color: #666600;
border-bottom: 1px dotted #ccc;
}

.spacer {
clear: both;
}

.paginate {
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: .1em;
padding: 10px 6px 10px 4px;
margin: 0;
background-color: transparent;
}

.pagecount {
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 10px;
color: #666;
font-weight: normal;
background-color: transparent;
}

.calendarBG {
background-color: #000;
}

.calendarBlank {
background-color: #9DB7A7;
}

.calendarHeader {
font-weight: bold;
color: #fff;
text-align: center;
background-color: #000;
}

.calendarMonthLinks
font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
color: #fff;
background-color: transparent;
}

.calendarMonthLinks a {
color:#fff;
text-decoration: none;
background-color: transparent;
}

.calendarMonthLinks a:visited {
color:#fff;
text-decoration: none;
background-color: transparent;
}

.calendarMonthLinks a:hover {
color:#ccc;
text-decoration: underline;
background-color: transparent;
}

.calendarDayHeading {
font-weight: bold;
font-size: 11px;
color: #fff;
background-color: #195337;
text-align: center;
vertical-align: middle;
}

.calendarToday {
font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #000;
background-color: #ccc;
}

.calendarCell {
font-family: Arial, Trebuchet MS, Tahoma, Verdana, Sans-serif;
font-size: 12px;
font-weight: bold;
letter-spacing: .1em;
text-decoration: none;
text-align: center;
vertical-align: middle;
color: #666;
background-color: #fff;
}

.calendarCell a {
color: #000;
text-decoration: underline;
background-color: transparent;
}

.calendarCell a:visited {
color: #000;
text-decoration: underline;
background-color: transparent;
}

.calendarCell a:hover {
color: #fff;
text-decoration: none;
background-color: transparent;
}

.input {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
background-color: #fff;
color: #000;
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 11px;
height: 1.6em;
padding: .3em 0 0 2px;
margin-top: 6px;
margin-bottom: 3px;
}

.textarea {
border-top: 1px solid #999999;
border-left: 1px solid #999999;
background-color: #fff;
color: #000;
font-family: Verdana, Geneva, Tahoma, Trebuchet MS, Arial, Sans-serif;
font-size: 11px;
margin-top: 3px;
margin-bottom: 3px;
}

.checkbox {
background-color: transparent;
margin: 3px;
padding: 0;
border: 0;
}

.submit {
background-color: #fff;
font-family: Arial, Verdana, Sans-serif;
font-size: 11px;
font-weight: normal;
letter-spacing: .1em;
padding: 1px 3px 1px 3px;
margin-top: 6px;
margin-bottom: 4px;
text-transform: uppercase;
color: #000;
}

I hope that this tutorial has served as a starter guide to assist you in customizing the CSS for your first blog using EE, easily the most advanced weblog (blog) and web site Content Management System (CMS) available today.

Summary

Discovering the hidden power of EE can seem a little daunting at first, but with a little persistence you can tame your CSS and EE will render your web designs exactly as you designed them to look on your layout package, and you work will benefit from working without the limitations that some of the other CMS systems impose on you, the designer or developer.

About the Author :


Julian Tancredi is an experienced UK based web designer, developing with CSS, XHTML, PHP and Expression Engine.

Books From Packt

 

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Learning jQuery 1.3
Learning jQuery 1.3

Magento: Beginner's Guide
Magento: Beginner's Guide

Django 1.0 Website Development
Django 1.0 Website Development

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

 

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software