Tutorial: Using the Form Element Styler action in Freeway 

 

 

 

 

Home | Freeway actions | Contact Us | [790]

 

 

 

 

 

 

 

Form Element Styler is aFreeway action for making the styling of form elements very simple to impliment.

Make the elements on your form as you want them to be, the width, height, border colour, background fill, font etc.

This is a free action that will allow you easily make textfields, textareas, menus and buttons wider. In text fields and textareas you can easily set border width and colour, background fill colours and font with font size.

Note: Styling options very on all browsers, there is a 'Suggested for' menu that will help try and sort what options are reasonable safe to use throughout the browser range although you can set any of the disabled styles simply be selecting 'override'. Styles will depend on browser style compatibility.

 

 

 

 

*

What do I need to use the Form Element Styler action in Freeway?

 

 

 

 

 

1# A copy of the 'Form Element Styler' action. Download page

2# A copy of Freeway 4 Pro - Softpress

 

 

 

 

*

Step 1: Add the 'Form Element Styler':

 

 

 

 

 

Select each element on your form you want to style and add the 'Form Element Styler' action to it. Enter values for the options on the action pallette for the 'Form Element Styler', you will need to do this for each form element the 'Form Element Styler' action is applied to.

Note: Depending on the browser the elements are viewed in some styling or styling properties may not be available, the 'Suggested for' menu in the action will enable the properties that are fairly generally available on most browsers, you can permit the action to enter the styling you want irrelevant of the 'Suggested for' meny simply be selecting 'override' from the menu.

Any options on the action that are left without a value will not be used.

 

^-- Top

fesstep1

 

 

 

 

 

... we have added the style to the textfields and textareas so we can change the border and fill colour, we also added it to the 'Send' button as we want it a little wider than it would be by default.

Thats all there is to it, you can see the effects by selecting the preview option in Freeway.

Below we show an image of what we have entered for the action attached to the textarea...

 

 

^-- Top

fesstep2

 

 

 

 

*

The action palette for the 'Form Element Styler' action:

 

 

 

 

 

The actions inspector shows the options for the 'Form Element Styler' attached to the textarea of our example.

We have override selected in the 'Suggested for' menu but selecting textarea will guide you to what is fairly safe to use over the range of browsers in general.

We make our width 212 px wide with a height of 60, border colour of #336633 and background colour of #DAFFEB. We havent selected any fonts to build a font family for the style but you can do this if you feel the need.

We recommend reading the READ_ME document that comes with the action download.

The next images will give you an idea of what the Freeway form looks like without and then with the 'Form Element Styler' applied.

 

 

 

 

 

 

 

 

^-- Top

fesstep3

 

 

 

 

 

*

Some examples:

 

 

 

 

 

This is how the form might look without the 'Form Elements Styler' action.

fesex1

 

 

 

 

 

... and with the 'Form Elements Styler' action.

fesex2

 

 

 

 

 

...another example...

fesex3

 

 

 

 

 

 

Here we have a couple of examples of what is possible with the action in Freeway.

 

 

 

 

 

 

 

 

 

 

 

-- End

fesex5

 

 

 

 

 

 

 

 

 

^-- Top

 

 

 

 

 

 

 

 

 

Copyright © Mike Brackenridge 2006 - 2008 || Freeway is a registered trademark of Softpress Systems Limited.

 

 

 

 

+