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
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance
Comedy Movies


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

Add WebCards+Ecard+Software+Ecard+Preview to Twitter Add WebCards+Ecard+Software+Ecard+Preview to Facebook Add WebCards+Ecard+Software+Ecard+Preview to MySpace Add WebCards+Ecard+Software+Ecard+Preview to Del.icio.us Digg WebCards+Ecard+Software+Ecard+Preview Add WebCards+Ecard+Software+Ecard+Preview to Yahoo My Web Add WebCards+Ecard+Software+Ecard+Preview to Google Bookmarks Add WebCards+Ecard+Software+Ecard+Preview to Stumbleupon Add WebCards+Ecard+Software+Ecard+Preview 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
Santos Cage Doll SVG Cut File - First Steps

SVG Cut File Design of Top Hat

Offset Path in Illustrator

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