logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

Add Customizing+the+Header+and+Footer+for+WebCards to Twitter Add Customizing+the+Header+and+Footer+for+WebCards to Facebook Add Customizing+the+Header+and+Footer+for+WebCards to MySpace Add Customizing+the+Header+and+Footer+for+WebCards to Del.icio.us Digg Customizing+the+Header+and+Footer+for+WebCards Add Customizing+the+Header+and+Footer+for+WebCards to Yahoo My Web Add Customizing+the+Header+and+Footer+for+WebCards to Google Bookmarks Add Customizing+the+Header+and+Footer+for+WebCards to Stumbleupon Add Customizing+the+Header+and+Footer+for+WebCards to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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.

g


g features
Photorealistic Digital Art for Digital Stamp

Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor