g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

WebCards Ecard Software Ecard Preview

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 FacebookR 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





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 © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor