| 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.|
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.
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.
Join us in the Digital Art and Design forum.
WebCards screenshots used by permission.