Now that we have our WebCards system set up to run as a Facebook Fan Page, we can begin to think about how to customize the WebCards templates. At this point, we can make some general changes. Of course, we don't want to work on the original template. We will want to keep it as a backup.

To create our own template, we need to make a copy of the default webcards-fresh template and use this copy as a starting point for our custom template. You will find the webcards-fresh template folder in the WebCards directory.

webcards/templates/webcards-fresh

Rename the copy of the webcards-fresh folder to whatever you like (for our example, we will name it webcards) and open the info.txt file that you will find inside. There are four lines of text in this file which list the name of the template, version no, author and author's website. You will want to change the text to reflect your own information.

dCipollo Theme
Version 1.0
Diane Cipollo
email or website

Now we need to go back to the Admin control panel and set our template as the default. At the bottom of the menu, you will see the Templates section. Click on Manage Themes link to see that we now have both the WebCards webcards-fresh theme and our theme listed. Click the Activate link for our theme which will set it as the default theme. If you click the Preview link, you will not see any change to the look of the site because we haven't made any changes yet. Let's do that now.

There are several files in the template folder. Each template controls a specific part of the site.

template.html - controls the header, footer and loads all javascript - all pages use this
view_image_stats.html - controls the front page listing including search cloud
select_img.html - displays the left menu and thumbnails for a category
upload_image.html - displays the upload form to add an image to the ecard
preview_card.html - controls the menu links on the preview/view page
render_card.html - shows card including message for preview or pickup
main_form.html - controls the form used to send an ecard
login.html - displays the login form
register.html - displays the registration form
reset.html - displays the form to reset a password
account_overview.html - controls the left menu and title on the account page
email_card.html - template for including ecard in email

Let's begin by working on the header in the template.html file.

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