7 min read

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.

Building Websites with ExpressionEngine 1.6

    1. Select the news template group, and then click on the index template to edit it.
    2. 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 >
 <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>

The indentation helps to demarcate related sections and therefore make the code more readable, but is certainly not required.

    1. Click Update and Finished to save our updates.

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.

    1. 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}).

Building Websites with ExpressionEngine 1.6

    1. 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:

Building Websites with ExpressionEngine 1.6

    1. 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.

       

    2. Revisit http://localhost/news or http://www.example.com/news, and you can now see the author name underneath both entries.

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>

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.

    1. 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.

Building Websites with ExpressionEngine 1.6

    1. 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.

Building Websites with ExpressionEngine 1.6

    1. 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.

Building Websites with ExpressionEngine 1.6

  1. 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>
Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here