g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

Customizing the Header and Footer for WebCards

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 http://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.

http://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="http://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.

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor