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.
https://www.mywebcards.net
WebCards screenshots used by permission.
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.
https://www.mywebcards.net
WebCards screenshots used by permission.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 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.
