 |
|
Home | Freeway actions | Contact Us | [1]
|
|
|
|
|
|
|
|
|
|
Form Element Styler is aFreeway action for making the styling of form elements very simple to implement.
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 text areas 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.
The images shown on this page are taken from Freeway 5 Pro and v1.5b of this action, if using Freeway 4 Pro you will need v1.31b which looks a little different and offers a few options less.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1# A copy of the 'Form Element Styler' action. Download page
2# A copy of Freeway 5 Pro (For Freeway 4 Pro use version 1.31b of the action) - 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 pallet 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' many simply be selecting 'override' from the menu.
Any options on the action that are left without a value will not be used.
^-- Top
|
|
|
|
|
|
|
|
|
|
... we have added the style to the text fields and text areas 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 texture...
^-- Top
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The action palette for the 'Form Element Styler' action:
|
|
|
|
|
|
|
|
|
|
|
The actions inspector shows the options for the 'Form Element Styler' attached to the texture of our example.
We have override selected in the 'Suggested for' menu but selecting texture 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', a border style of 'solid' line, width of '1' entered for the line, a border colour and background colour. We haven't 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Some examples:
|
|
|
|
|
|
|
|
|
|
|
This is how the form might look without the 'Form Elements Styler' action.
|
|
Name:
|
|
|
|
|
|
|
|
|
|
|
|
Email:
|
|
|
|
|
|
|
|
|
|
|
|
Message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
... and with the 'Form Elements Styler' action.
|
|
Name:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Email:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
...another example...
|
|
Name:
|
|
|
|
|
|
|
|
|
|
|
|
Use any colour for the field border and fills... alter the border thickness...
|
|
Email:
|
|
|
|
|
|
|
|
|
|
|
|
Message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
...another example...
|
|
Name:
|
|
|
|
|
|
|
|
|
|
|
|
Make the border solid... or dotted....
|
|
Email:
|
|
|
|
|
|
|
|
|
|
|
|
Message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
...another example...
|
|
Name:
|
|
|
|
|
|
|
|
|
|
|
|
Try giving the focus to the different fields in this example to see how you can change the fill colour simply by clicking through the elements... this is set using the onFocus and onBlur color selections of the action.
|
|
Email:
|
|
|
|
|
|
|
|
|
|
|
|
Message:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
...an couple of examples using images (Change the text)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Use an image, keep it left with padding for text >
|
|
Add:
|
|
|
|
|
|
|
|
|
|
|
|
...keep it left with padding for text and change fill colour >
|
|
Add:
|
|
|
|
|
|
|
|
|
|
|
|
...repeat an image >
|
|
Name:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Here we have a couple more examples of what is possible with the action in Freeway.
|
|
Text area 1 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Text area 2 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Safari textarea resize has been set to off on this one >
|
|
Text area 3 >
|
|
|
|
|
(This helps stop users from expanding the teaxtarea and
|
|
|
|
|
|
breaking your page up)
|
|
|
|
|
|
|
|
|
|
|
|
|
You can change the background colour onFocus and to another onBlur and even change it onFocus or onBlur. Place your cursor in 'Text field 1 >' or 'Text field 2 >' examples to see the affect.
|
|
Text field 1 >
|
|
|
|
|
|
|
|
|
|
|
|
Text field 2 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Text field 3 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Button 1 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Button 2 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Button 3 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Menu list 1 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Menu list 2 >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
^-- Top
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Copyright © Mike Brackenridge 2006 - 2024 || Freeway is a registered trademark of Softpress Systems Limited.
|
|
|
|
|
|
|
|
|
|