Advanced Customisation of WebCards

One of the best things about WebCards is that it is a “white-label” product. This means that you can totally brand it as your own. You don’t have to keep the footer link back to the WebCards website and you can make any changes to the source you like. However, you cannot redistribute any source code either for free or paid.

Give WebCards a name
The first step in customising WebCards is to rename it. Login to your admin centre and click “Layout Options”. You can then choose what to call a WebCard on your website.

The name should refer to a single e-card, so you should use a value such as “Chuck’s Super E-card” or even just plain “e-card” will be fine.

Save this setting by clicking “Update Configuration” at the bottom of the page.

Customise The Templates
If you plan to change the templates you should first of all create a backup of your current theme. This means you can revert back any changes if you make a mistake.

We will go through each template file and see where it is used. The files are listed here roughly in the order you will probably want to edit them. The areas highlighted in red indicate the area of the page that is coded for in the template.

When you go through each template file the ids and classes can be styled using the stylesheet webcards.css that is present in each theme directory.

This is the global template and is the one you are most likely to need to edit. It codes the header and footer that is used on every WebCards page. It also holds the javascript that is used throughout the system.

The main global template


When a user is logged into their account they have access to their own Control Panel.

Template for User’s Account

This template is used to code the header and the left-hand menu for every page of the user Control Panel.


This template is used on the main front page that lists the new and popular images and the search cloud.

The main front page template

The main form is shown when the user composes their WebCard. It is where they enter their information and that of the recipient. They enter the message for the recipients at the bottom of the page.

Template for the main form


This template selects the image to send when browsing categories. It does not code for the main frontpage (this is coded).

Template for the select image page


The card rendering template is the one that displays the actual card sent to the recipient. It is also used in the preview page too.

Template for the card render

This template is used to preview the card just before it is sent. Note that the section in the middle (the actual card) is not coded for in this template. See the template render_card.html for this section.

Template for the card preview

WebCards uses a standard login page whenever the user reaches a members-only area.

Template for the login page

The registration template is used when the user is registering for an account.

Template for the registration page

This template is employed when a user resets their password.

Template for the password reset page

This template is used when a user uploads an image into their own personal gallery. It is not required if you have disabled user uploads.

The upload image template

This contains the full content of the card that will be emailed. This template is only used if the setting is enabled in the admin centre.