Article
2439
Forms and Workflows Get a Facelift for Teaming 2.1
As part of the upgrade to Teaming 2.1, we have updated the look and feel of our forms in the Teaming Library. The changes include background color, dividers, and borders. In this article we give you some quick, easy pointers on how to make these changes for your own site.
You can update the look of your site by using the HTML element, which is under the “Layout Options” when adding a new element.
Click “HTML” to open the HTML editor. The HTML element creator then prompts you for the caption and the name.
Enter a Caption (not required).
Enter a Data Name (required).
Notice two text boxes. HTML Top represents the HTML tags that come before the elements that are set inside the HTML element. HTML Bottom represents the HTML tags that come after the elements.
The first two enhancements to the form are background color and border. Any color can be used for the background. All that is required is the HTML code for that specific color. The HTML color that we used is “f4f4f4” (light gray). We used this code on our HTML element:
<table cellpadding=“4” borders=“1” bgcolor=“#f4f4f4” width=“700”><tr><td>
</td></tr></table>
This specifies the size in pixels of the border (border=“1”), the background color (style=“background-color: #f4f4f4” or bgcolor=“#f4f4f4”), the width of the form in pixels (width=“700”) and the distance between cells in the table (cellpadding=“4”) in pixels. This is a really handy code that can be used on any form to give it a more professional look.
The break and divider are two other elements you can use to quickly improve the look of your form. The break causes a space between two elements, so they're much easier to read. The code for an HTML break is very simple:
<br/>
Use this in a new HTML element and place it in the designer where you want a little extra space.
You might find the Divider layout element doesn't always create the amount of space that you want, so you may want to also add a break. This HTML divider has a break before and after it. It is simply a break, then the code for the divider, then another break. No HTML bottom is required for this code because nothing will be placed inside this element.
This gives a little more space above and below the thin gray line in the form.
We used these simple enhancements, to upgrade some of the forms to give them a better look and feel. Feel free to look through them and send us any questions that you have.
Disclaimer: As with everything else at Cool Solutions, this content is definitely not supported by Novell (so don't even think of calling Support if you try something and it blows up).
It was contributed by a community member and is published "as is." It seems to have worked for at least one person, and might work for you. But please be sure to test, test, test before you do anything drastic with it.
Related Articles
User Comments
- Be the first to comment! To leave a comment you need to Login or Register
- 2439 reads
0