In this tutorial, we will customize the render_card.html template. This template is used to displays the ecard in two places. First, it will display the ecard as a preview for the sender before the ecard is sent. Secondly, the ecard is displayed for the recipient when the link in the email notification is clicked.

As with the send form, we have the problem that the content is too wide for our Facebook^R iframe, which is only 510 px wide. In a previous tutorial, we made a few adjustments to the webcards.css file which moved the send form underneath the ecard preview. However, we will need to solve the problem in a different way for the render_card.html.

webcards/templates/webcards/render_card.html

If you look at the code, you will see that the layout is not, as in the previous example, controlled by the style sheet. This time the layout is controlled by a table. The first row of the table has two cells. The first cell displays the ecard and the second cell to the right displays the sender's message. We can move the message underneath the ecard by adding another table row. We will leave the ecard in the first table row and move the sender's message to the new table row below. This is easily done by adding a </tr> tag to close the first table row and adding a <tr> tag to start the new table cell.

<tr>
<td align="left" valign="top" style="background-color:{{bg_colour}};">
{{pic}}
</td>

</tr><tr>

<td align="left" valign="top" width="100%" style="background-color:{{bg_colour}};">
{{stamp}}
{{message}}
</td>
</tr>

Now that we only have one cell per row, we don't need to span the last row (now the third row) across two cells. We should remove the colspan="2" code.

<tr>
<td colspan="2" align="left" style="background-color:{{bg_colour}};">
<div id="audio_block">
<p>{{audio_freetext}}</p>
{{audio_block}}
</div>
<p>||card_sent_date|| <i>{{date}}</i> ||by|| {{sender_name}}</p>
</td>
</tr>

Also we need to remove the black border from around the ecard. This is optional and only for cosmetic purposes. We will do this by setting the border style to zero in the webcards.css file.

webcards/templates/webcards/webcards.css

Now, if we refresh the browser on the preview page, the border is gone and the sender's message is below the ecard.

http://www.mywebcards.net

WebCards screenshots used by permission.