[Pro] style a Markup element

Freeway
1

Hi,

Need some help,

I have to place a html code for a form (third party) on my website, also need to add java code for validation and error handling, but first part,

I placed the code in an Markup element, form is visible but I need to style this. Also like to make it some wider but don’t know exactly what is the easiest way.

Erik

http://www.hreducare.nl/test.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

When you insert code like this, Freeway doesn’t have any sort of “handle” on it, and can’t give you direct access to its elements for styling purposes. This means that you will need to make a set of CSS styles (in the of your page, in a manually-created tag) to affect these elements. The very simplest thing you could try would be to add the following to the page, using the Page / HTML Markup dialog, in the Before section:

<style type="text/css">
#form1253 {
  color: #666;
  font-family: 'Didact Gothic', sans-serif;
  font-size: 14px;
}
</style>

Fiddle with those values to see what else you need. The form is currently inheriting its text style from the body tag, which does not have any attributes set in your stylesheet, and so it is giving you the default Times 16px that you see here.

You could also define a new style in Freeway with the Tag set to body and the Name set to nothing (tricky bit there – you have to enter the Tag, then tab into the Name field, empty it and tab back out so Freeway confirms that you really mean to make this style have no Name attribute). In that new style, if you set your default font and size, the way you have done for the P tag elsewhere, you will get that style everywhere that you don’t otherwise define the style. This means that you could reduce your hand-coded style above to be merely the font size (assuming you want the form labels to be a little smaller than the base font size for the page). Everything else would be inherited from the body. You could also get rid of your P tag style if you do this, because it would inherit as well.

Walter

On Jul 29, 2014, at 8:37 AM, Erik wrote:

Hi,

Need some help,

I have to place a html code for a form (third party) on my website, also need to add java code for validation and error handling, but first part,

I placed the code in an Markup element, form is visible but I need to style this. Also like to make it some wider but don’t know exactly what is the easiest way.

Erik

http://www.hreducare.nl/test.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walter,

As always thank you very much for your help,
It looks much better,

Do you also have an idea how I can make the formfields the same width and line up nicely?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Sure. Add these lines inside the style block I had you create earlier. Place the following lines after the closing } brace of the first rule, so the next line is the beginning of these new rules, and the last brace of these rules is followed by the closing tag.

.mpQuestionTable { width: 100% }
.mpQuestionTable ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.mpQuestionTable input[type="text"] {
	width: 100%;
}
.mpFormLabel { 
	width: 40%; 
	text-align: right; 
	padding-right: .3em;
}

If this results in a set of fields that is too wide for your taste, try changing the percentage width of the outer form (first line of these style rules) and fiddle until you get it how you like it.

Walter

On Jul 29, 2014, at 10:12 AM, Erik wrote:

Hi Walter,

As always thank you very much for your help,
It looks much better,

Do you also have an idea how I can make the formfields the same width and line up nicely?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Hi Walter,

Thank you again,

It works fine now!

Erik

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options