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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Reducing the Width of the WebCards Send Form


In this tutorial, we will discuss the second option for resizing the send form to fit the FacebookR iframe. This option keeps the full size preview of the swf animation or image and moves the form down below the preview.

Option 2
If you open the main_form.html template, you will see that there are three divs: the form_image div which displays the preview, the form_block div which displays the form and the form_container div which contains the form_image and form_block divs. The form_container div displays the other two divs side by side. In order to move the form_block div below the form_image div, we need to change the style for the form_image div in the webcards.css file.

webcards/templates/webcards/webcards.css

In the webcards.css file, you will find the style for the form_image div. The float:left code is what tells the browser to put this div to the left of the second div (form_block). If we move the /* to the beginning of the line, we will comment out this code.

When you refresh the browser, the form is now below the preview.

We can further customize the form used to send an ecard. Because this will be within a Facebook iframe, we need to keep the form as uncluttered as possible.

If you take a look at the default WebCards form, you will see that the user has many extras that can be added to the ecard such as smilies, poems and stamps. We really only need to collect the information for the sender's name and email, the recipient's name and email and the sender's message.

We have already turned off the stamps, audio and poems in the Admin area by not uploading any files for these features. The system will notice that no images or audio files exist for these options and will automatically omit them from the form.

However, we still have the background color, smilies and the notification options displaying in the form. Let's remove these in the next tutorial.

http://www.mywebcards.net





Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.

Add Reducing+the+Width+of+the+WebCards+Send+Form to Twitter Add Reducing+the+Width+of+the+WebCards+Send+Form to Facebook Add Reducing+the+Width+of+the+WebCards+Send+Form to MySpace Add Reducing+the+Width+of+the+WebCards+Send+Form to Del.icio.us Digg Reducing+the+Width+of+the+WebCards+Send+Form Add Reducing+the+Width+of+the+WebCards+Send+Form to Yahoo My Web Add Reducing+the+Width+of+the+WebCards+Send+Form to Google Bookmarks Add Reducing+the+Width+of+the+WebCards+Send+Form to Stumbleupon Add Reducing+the+Width+of+the+WebCards+Send+Form 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
Designing a Montage Layout SVG Cut File

Review - 21-Day Drawing Challenge

How to Print and Cut Clip Art in Silhouette Cameo

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