Creating Your First Web Page Using ExpressionEngine: Part 2

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

£14.99    £7.50
by Leonard Murphy | May 2009 | Content Management PHP

In the previous part of the article by Leonard Murphy, we Created a simple ExpressionEngine template and weblog. In this part, we will view the ExpressionEngine weblog and Integrate some basic CSS into our ExpressionEngine templates.

Viewing Our First Entry

Now one question remains: where do we have to go to see our entry? The answer is that our entry is not yet on our website. That is because the entry does not appear in a template and everything on an ExpressionEngine website must go into a template before it can be viewed. Follow these instructions to point a template to our new weblog.

  1. Click on Templates in the menu bar. Select Create a New Template Group, and call the New Template Group to be news. Leave all the other options at their default and click Submit.
  2. Building Websites with ExpressionEngine 1.6

  3. Select the news template group, and then click on the index template to edit it.
  4. To include a weblog in a template, we use a tag. A tag is a unique ExpressionEngine piece of code that is used in templates to include extra functionality. In this case, we want to include a weblog, so we need a weblog tag. A tag has two parts: variables and parameters. Parameters are always part of the opening tag whereas variables are used between the opening tag and the closing tag. In the news/index template we will add in the weblog tag as well as some standard HTML code.
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>News from the President</title>
      <meta http-equiv="content-type" content="text/html;
      charset=UTF-8" />
      </head>
      <body>
      <h1>Toast for Sale!</h1>
      <h2>News from the President</h2>
      {exp:weblog:entries weblog="toastnews"}
      <h3>{title}</h3>
      {summary}
      {body}
      {extended}
      {/exp:weblog:entries}
      </body>
      </html>
  5. The indentation helps to demarcate related sections and therefore make the code more readable, but is certainly not required.

  6. Click Update and Finished to save our updates.
  7. Building Websites with ExpressionEngine 1.6

    The difference between Update and Update and Finished is that Update will keep you in the template editing screen so that you can continue to make further edits, whereas Update and Finished returns you to the main templates screen.

  8. Now view the news template at http://localhost/news or www.example.com/news to see how it looks. It should look like the following screenshot. Notice how the {title} has been changed to reflect the actual title of our entry (and so has {summary} and {body}).
  9. Building Websites with ExpressionEngine 1.6

  10. What happens if we post two entries? Let us try it and see! Back in the control panel, select Publish | Toast News and write a second entry with a different title, URL title, and so forth. Hit Submit, and then visit http://localhost/news or http://www.example.com/news to see what happens. It should look like as follows:
  11. Building Websites with ExpressionEngine 1.6

  12. For our final enhancement, let us edit the template to include variables for the author name and the date of the entry. To do this, add the highlighted code as shown next:
      <body>
      <h1>Toast for Sale!</h1>
      <h2>News from the President</h2>
      {exp:weblog:entries weblog="toastnews"}
      <h3>{title}</h3>
      {summary}
      {body}
      {extended}
      <p class="footnote">Written by {author} on {entry_date
      format="%F %j%S"}</p>
      {/exp:weblog:entries}
      </body>
    • {author} is a variable that returns the name of the person who was logged in when the entry was created.
    • {entry_date} is a variable that displays the date that the entry was written on. format is a parameter of the entry_date variable that is used to specify how the date should be formatted.
    • %F is the month of the year spelled out; %j is the day of the month; and %S is the suffix (for example, nd or th). So %F %j%S is rendered as 'February 7th'. For a complete list of date formats, visit http://expressionengine.com/docs/templates/ date_variable_formatting.html.
  13. Revisit http://localhost/news or http://www.example.com/news, and you can now see the author name underneath both entries.
  14. Building Websites with ExpressionEngine 1.6

Make Our Weblog Pretty Using CSS

Our weblog, whilst functional, is not exactly the prettiest on the web. We will spruce it up with some more HTML and CSS. This section will not introduce any new ExpressionEngine features but will demonstrate how to incorporate standard CSS into our templates. An understanding of HTML and CSS will be invaluable as we develop our ExpressionEngine site.

Please note that this article can only demonstrate the basics of using HTML with CSS in an ExpressionEngine website. If you are already familiar with using HTML and CSS, then you will only need to go through the section in the first part (Creating and Linking to a Styling Template) to create the CSS template and link to it from the HTML template.

Creating and Linking to a Styling Template

As with a more conventional HTML/CSS website, our CSS code will be separated out from our HTML code, and placed in its own template (or file). This requires creating a new CSS template and modifying our existing template to identify the main styling elements, as well as to link to the CSS template.

  1. First, let us go back into our news template and add the following code (highlighted). The trick with writing HTML with CSS is to identify the main sections of the HTML code using the <div> tag.
      <body>
      <div id="header">
      <h1>Toast for Sale!</h1>
      <h2>News from the President</h2>
      </div>
      <div id="content">
      {exp:weblog:entries weblog="toastnews"}
      <h3>{title}</h3>
      <div class="contentinner">
      {summary}
      {body}
      {extended}
      </div>
      <p class="footnote">Written by {author} on {entry_date
      format="%F %j%S"}</p>
      {/exp:weblog:entries}
      </div>
      </body>
  2. Here we have identified three sections using the <div> tag. We have encapsulated our website title in a header section. We have wrapped up all of our ExpressionEngine entries into a content section. Finally, we have created a contentinner section that contains just the text for each ExpressionEngine entry, but does not include the title. Also note that footnote is a section.
    What is the difference between an id and a class in our <div> tags? A section defined with an id only appears once on a page. In our case, the header only appears once, so we can use the id. A section defined with a class may appear multiple times. As the contentinner section will appear on the page for each entry present there, we have used a class for this section.

  3. Next, we want to create a CSS template that tells us what to do with these sections. To do this, go back to the main Templates page, select the toast template group, and then select New Template.
  4. Building Websites with ExpressionEngine 1.6

  5. Call the new template toast_css. Under Template Type select CSS Stylesheet instead of Web Page. Leave the Default Template Data as None create an empty template and hit Submit.
  6. Building Websites with ExpressionEngine 1.6

  7. Before we start editing our new CSS template, we must be sure to tell the HTML template about it. Select to edit the index template in the news template group.
  8. Building Websites with ExpressionEngine 1.6

  9. Insert the following highlighted commands between the <head> and </head> tags to tell the HTML template where the CSS template is.
      <head>
      <title>News from the President</title>
      <link rel='stylesheet' type='text/css' media='all'
      href='{path=toast/toast_css}' />
      <style type='text/css' media='screen'>@import
      "{path=toast/toast_css}";</style>
      <meta http-equiv="content-type" content="text/html;
      charset=UTF-8" />
      </head>
Building Websites with ExpressionEngine 1.6 A clear, concise, and practical guide to creating a professional ExpressionEngine website
Published: July 2008
eBook Price: £14.99
Book Price: £24.99
See more
Select your format and quantity:

Styling Colors and Fonts

We now have a blank CSS template, toast_css. We are now going to start editing our CSS template, defining the various elements we use in our news template, and defining the background colors and fonts we want to use.

If you already know how to use CSS, this section can be skipped in favor of your own CSS design.

  1. We will define the four sections we used earlier (header, content, contentinner, and footnote). Note that because contentinner and footnote were defined as class, they are preceded by a period. The header and the content sections are preceded with # as they were identified in the HTML with id.
      body{
      background: #8B4513;
      }
      #header{
      background-color: #DEB887;
      }
      #header h1{
      color: black;
      }
      #header h2{
      color: #8B4513;
      }
      #content{
      }
      #content h3{
      color: #F0E68C;
      }
      #content p{
      }
      .contentinner{
      background: #DEB887;
      }
      .footnote{
      color: #F0E68C;
      }
  2. As well as identifying the four sections that are unique to us, we have defined some HTML elements within those sections as well. For example, we have an h1 and an h2 style within our header div; so we have defined the corresponding elements in our CSS template.

  3. Click Update and view your news template in a browser (http://localhost/news or http://www.example.com/news). It will look like the following screenshot. Essentially, all we have done is color in some of our CSS elements. By doing this, we can better see the structure of our page. For example, the tan (#DEB887) box shows us where our contentinner section is.
  4. If you do not see anything as colorful as the following screenshot, it is usually a sign that the HTML template is not referencing the CSS template correctly (see the previous step), or that the Template Type of toast_css was not set as CSS Stylesheet when it was first created. If this is the case, delete the toast_css template and follow the steps to create it again, this time selecting CSS Stylesheet instead of Web Page.

    Building Websites with ExpressionEngine 1.6

  5. Next, we are going to change some of the fonts. Make the following highlighted changes to the code:
      body{
      background: #8B4513;
      font-family: Verdana, "Trebuchet MS", Arial, Helvetica,
      sans-serif;
      }

      #header h1{
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 300%;
      font-weight: bold;
      text-align: left;
      }

      #header h2{
      color: #8B4513;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 200%;
      font-weight: bold;
      text-align: left;
      }

      #content{
      font-size: 80%;
      }

      #content h3{
      color: #F0E68C;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      }

      .footnote{
      color: #F0E68C;
      font-size: 75%;
      }
  6. Instead of reprinting the entire template, we are showing only the elements that are changing, with the changes highlighted.

  7. Click Update, and now view the template in the browser (http://localhost/news or http://www.example.com/news). The font tag in the body section means that all the text on our page will be Verdana. We then placed font tags in our h1, h2, and h3 headings which will override the body font tag and make our headings Arial. If the computer or device viewing the page does not have the first font in the list, then the next is tried and so on. If the device does not have any of the listed fonts, then any sans-serif font that the device does have is used. We have also changed the size of our fonts, making our h1, h2, and h3 headings bigger, and in bold, and reducing the size of our footnote element.
  8. Note that where one CSS element is inside another (such as where content is inside body), any properties assigned to the parent element also apply to the child elements. As content is inside body, we do not have to specify the font for the content separately. However, if we do specify the font in both places, then it is the child element that overrides the parent element. (This is where the cascading of Cascading Style Sheets comes in).
    Also note that as content has a font-size of 80% and footnote has a font-size of 75% and footnote is inside content, footnote has an actual font-size of 75% of 80% (that is, 60%).

    Building Websites with ExpressionEngine 1.6

Moving Our Elements Around

We have now used CSS to alter the colors and fonts on our page. However, the page still reads from top to bottom. Ahead of us, we have the challenge of moving our elements around to provide a more natural flow. We will also put our logo in as part of the heading.

CSS positioning can be challenging for newcomers. As this article focuses principally on ExpressionEngine, we cannot delve too much into the ins and outs of CSS.

  1. First, we are going to change where some elements will appear on the page. We are going to add a margin to our entire page. To do this, we use margin: 5% auto. The 5% provides a buffer on the top side (to prevent the header from touching the top edge of the browser). The auto results in centering the entire page (auto means that the left and right margins are being calculated automatically depending on the width of the page in the browser). We can then set our page width to be 770px. By doing this, it ensures that our website will be rendered on a screen resolution of 800x600 without any horizontal scrolling. We then change the width of our content section so that it only takes up the left 70% of the page. This will give us the room to put a menu on the right hand side at a later stage. We will also add a margin around all our paragraphs in the content section—the 1% means that there will be less space between paragraphs than there otherwise would be. Finally, we are putting a border around our contentinner section to make it look more interesting and right-aligning our footnote.
      body{
      background: #8B4513;
      font-family: Verdana, "Trebuchet MS", Arial, Helvetica, sans-
      serif;

      margin: 5% auto;
      width: 770px;
      }

      #content{
      font-size: 80%;
      width: 70%;
      float: left;
      }

      #content p{
      margin: 1%;
      }

      .contentinner{
      background: #DEB887;
      border: 2px dotted #FFEFD5;
      }

      .footnote{
      color: #F0E68C;
      font-size: 75%;
      text-align: right;
      }
  2. In addition to being able to change the margin of any element, we can also alter the padding. The difference is that a margin is applied outside the box (and so creates space between the box and other elements). The padding is applied to the inside of the box, so the box does not move but there is more space between the edge of the box and the contents of the box.

  3. Click Update again, and visit http://localhost/news or http://www.example.com/news to see the changes.
  4. Building Websites with ExpressionEngine 1.6

  5. We are getting close to being done. One element that our site is missing that most normal sites would have is a logo. Luckily, our toast website does have a logo that we can now use. First, copy square.png to your website images directory via FTP (C:xampphtdocsimages if you are using XAMPP, or /Applications/MAMP/htdocs/images/ if you are using MAMP on a Macintosh).
  6. The file square.png can be downloaded from the Packtpub website at http://www.packtpub.com/support.
    When uploading new files to your website, you must place them in an existing subdirectory, or you must add the new file or directory to your .htaccess file.

  7. Once the logo is uploaded, we will make the following adjustments to our CSS. The following is the entire CSS template that we should now have. We are going to make the header have a background image of our logo. Our image has a height of 151 pixels, so we can set the height of the header section to match. Our image also has a width of 201 pixels, so we are going to offset the h1 and h2 margins by more than this so that the h1 and h2 headings do not overlap. Be sure to change the URL of the file to match the actual URL.
      body{
      background: #8B4513;
      font-family: Verdana, "Trebuchet MS", Arial, Helvetica,
      sans-serif;

      margin: 5% auto;
      width:770px;
      }

      #header{
      background: url('{site_url}images/square.png') no-repeat top
      left;
      background-color: #DEB887;
      height: 151px;
      margin-bottom: 30px;
      }

      #header h1{
      color: black;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 300%;
      font-weight: bold;
      text-align: left;
      margin-top: 25px;
      margin-left: 225px;
      }

      #header h2{
      color: #8B4513;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 200%;
      font-weight: bold;
      text-align: left;
      margin-left: 225px;
      }

      #content{
      font-size: 80%;
      width: 70%;
      float: left;
      }

      #content h3{
      color: #F0E68C;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      }

      #content p{
      margin: 1%;
      }

      .contentinner{
      background: #DEB887;
      border: 2px dotted #FFEFD5;
      }

      .footnote{
      color: #F0E68C;
      font-size: 75%;
      text-align: right;
      }
  8. {site_url} is an ExpressionEngine variable that, when the CSS is loaded by a browser, will be converted into the actual URL of your site (in this case, http://localhost/ or http://www.example.com/). By using this variable, we can avoid hard-coding the URL name of the website in our CSS file.

  9. Going back to our page after making these updates, we can see that our website is looking a lot more visually appealing. You may have noted, however, that the website may not exactly look like the following screenshot. This is because different browsers and different operating systems and different screen resolutions can all make a difference on how the final product looks. The key is not to try and make it look identical on all platforms, but to make it usable on all platforms.
  10. If everything appears to match with the folowing screenshot, except the background color of the heading is not a light-tan, be sure that in the #header, the background line comes before the background-color line. Otherwise, the background line takes precedence over the background-color declaration.

    Building Websites with ExpressionEngine 1.6

Summary

In this article, we have demonstrated some of the most basic features of ExpressionEngine, including templates, weblogs, and tags. To summarize, tags go in templates to point to weblogs.

Everything you do in ExpressionEngine must eventually be viewable in a template. To create a new weblog, you first create the weblog, and then place tags into a template that will pull the weblog data into the browser.

Templates map directly to URLs that visitors can see. Within templates, you can write standard HTML and CSS. The stronger your HTML skills, the better your site will look.

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

About the Author :


Leonard Murphy

Leonard Murphy was one of the earliest adopters of ExpressionEngine when it was first released in 2004, and was the author of a series of free tutorials that helped other new users to see what ExpressionEngine had to offer. The tutorials were a hit, and over the years, ExpressionEngine became more and more popular, so in 2008 Leonard expanded his tutorials into the first edition of Building Websites with ExpressionEngine. Two years later, with the release of ExpressionEngine 2, Leonard is back with a completely revised new edition.

Leonard started his career in the UK, graduating from the University of Wales, Aberystwyth. In 2004, he moved to the United States and currently works for Summit Credit Union (a not-for-profit financial institution headquartered in Madison, Wisconsin). He also provides consulting and technical support for small business websites.

Books From Packt

 

PHP and script.aculo.us Web 2.0 Application Interfaces
PHP and script.aculo.us Web 2.0 Application Interfaces

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

Flash with Drupal
Flash with Drupal

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Plone 3 Theming
Plone 3 Theming

eZ Publish 4: Enterprise Web Sites Step-by-Step
eZ Publish 4: Enterprise Web Sites Step-by-Step

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

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

 

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