Most of the exercises throughout this book have more than one solution. The following are the example solutions to some of the exercises in this book. Where a solution has not been provided, the instructions in the chapter can be adapted to complete the exercise.
Chapter 3 described how to set up your first blog and introduced the use of CSS within Expression Engine.
To post a new entry to a weblog, log into the control panel at http://localhost/admin.php
(or http://www.example.com/admin.php
), and select Publish from the menu at the top of the screen. Select the weblog you wish to post to (in this case Toast News), and type in the new entry. Hit Submit when you are done.
To create a second weblog, follow the instructions in Chapter 3 to create a new weblog and post a starting entry to it. Then create a new template group. Copy the index
template from the news
template group into the new template group's index
template and change the following line so that it points to the short name of the new weblog:
{exp:weblog:entries weblog="toastnews"}
You can also change the title of the page to reflect the different content.
Exercise 3 involves modifying our CSS. To change the color scheme of the templates, select some complimentary colors and then edit toast/toast_css
to replace your original colors with new tones. In the following screenshot, the original browns have been dubiously replaced with shades of yellow:
To move your entries so that they no longer leave space for the menu, you can change the following line in our CSS so that it reads 100%:
#content{
font-size: 80%;
width: 70%;
float: left;
}
To play around with a different photo size, you will first need to copy or upload the new photo to your images
folder.
Next, you need to change the toast/toast_css
template. The header
element should point to the new image, and you will need to adjust the header
height to match the height of the new image (for example, 200px
).
If the image overlaps with our page headings, you will also need to adjust the margin-left
property of your #header h1
and h2
elements. In the following screenshot, the margin-left
was set to 275px
as shown next:
#header{ background: url('{site_url}images/square.png ') no-repeat top left; background-color: #DEB887; height: 200px; margin-bottom: 30px; }