In this tutorial, we will work on customizing the header and footer of the template.html file to appear more like the website that this fan page reflects.

Let's add our header image, which happens to be 510 pixels wide, at the top of the webpage. We will put the code for the image just after the table code. We can also make this image a link that goes back to the main page of the Facebook Fan Page.

WebCards likes to have full path urls for images but it also makes it easy by giving us some template variables. The {{url}} variable supplies the https://www.domain.com/webcards/ information which is followed by the templates folder name and a slash. The {{template}} variable will provide the folder name for the default template (we set our template as the default template). From this point, we just need to add a slash, the name of the images folder, another slash and the name of the logo image.

{{url}}templates/{{template}}

<img src="{{url}}templates/{{template}}/images/logo.jpg" />

When the page is generated, the url for the image will look like this.

https://www.domain.com/webcards/templates/name_of_your_template/images/logo.jpg

So, if we want to add the img tag and the link code, we will put this after the opening table code.

<a href="https://www.facebook.com/pages/..."><img src="{{url}}templates/{{template}}/images/logo.jpg" width="510" height="107" alt="Name of your fan page" /></a>

One last change we need to make in this template.html file is to change the copyright information in the footer div.

<div id="footer">
<p>{{cpy}}</p>
</div>

We can see that we have another template variable {{cpy}} inside a paragraph tag. This will display the WebCards information. We can add some of our own copyright information. For example, we will want to add a <br> tag to start a new line and the put © 2011 Name of Your Website or Company.

<p>{{cpy}} <br> © 2011 Name of Your Website or Company.</p>

Next, we will start working on the menu links.

If you choose to omit the search box at the top of the page, you can easily comment out the form tags.

https://www.mywebcards.net
WebCards screenshots used by permission.