[Pro]

HTML Markup & Paragraph Spacing

Hey FreewayTalk,

Currently we are using Bebosoft’s Forms to Go application to make are contact forms.

We are wanting to style the form’s error message by adding a background image or color to the div tag containing the HTML Markup Item for the error code. The Markup item is inserting PHP code to pull in the error message. The div tag’s height is undefined so the styled div is invisible initially and when the PHP is pulled in, the error message expands the styled div revealing the background image of the div.

We’ve created a style to add paragraph spacing on the error message when it is pulled in. The style has 10px of paragraph space before & after. The idea is to bring in padding within the borders of the div when the error message is generated. When we preview it in freeway the paragraph spacing seems to be taking effect but when actually previewed in Safari, it does not effect the error message. Adding standard padding to the div would make the div initially visible which is not an option for us.

We are not wanting to hand code into the PHP script. Paragraph spacing such as indent/leading all work correctly. Is there anyway we can get this paragraph spacing to effect the PHP generated text? Or is there someway of getting margins on the PHP generated code within the markup item without handcoding the PHP script?

Thanks,
Bernard


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

Is the php code generating tags for the text also? You could create styles
that target the tags.

If the div the result goes into is not colored (transparent) then no one
will see it until it is populated.

You could create styles that target the div container by id or class.


Ernie Simpson

On Mon, Jun 11, 2012 at 2:03 PM, TeamSDA
email@hiddenwrote:

HTML Markup & Paragraph Spacing

Hey FreewayTalk,

Currently we are using Bebosoft’s Forms to Go application to make are
contact forms.

We are wanting to style the form’s error message by adding a background
image or color to the div tag containing the HTML Markup Item for the error
code. The Markup item is inserting PHP code to pull in the error message.
The div tag’s height is undefined so the styled div is invisible initially
and when the PHP is pulled in, the error message expands the styled div
revealing the background image of the div.

We’ve created a style to add paragraph spacing on the error message when
it is pulled in. The style has 10px of paragraph space before & after. The
idea is to bring in padding within the borders of the div when the error
message is generated. When we preview it in freeway the paragraph spacing
seems to be taking effect but when actually previewed in Safari, it does
not effect the error message. Adding standard padding to the div would make
the div initially visible which is not an option for us.

We are not wanting to hand code into the PHP script. Paragraph spacing
such as indent/leading all work correctly. Is there anyway we can get this
paragraph spacing to effect the PHP generated text? Or is there someway of
getting margins on the PHP generated code within the markup item without
handcoding the PHP script?

Thanks,
Bernard


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

Hi Ernie,

Thank you for the suggestion. The issue is that Forms To Go doesn’t create a div tag that we can add a class too. The error message replaces the comment, , we insert into Freeway through a HTML markup item.

Any suggestions as to how to add a div tag to the php code?

Regards,
Bernard


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

The Markup item you added in FW will have an ID - you can target that using

#MyMarkupdiv { color:#f0f8ff; text-shadow:0px 2px 2px black; whatever:blah }

David


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

You could also put the markup item into a div in freeway, that you can
target via class or id. Or, add whatever tags you need inside your markup
item:

or

or

and so on.


Ernie Simpson
Please Feed the Artist

On Mon, Jun 11, 2012 at 8:03 PM, TeamSDA
email@hiddenwrote:

Hi Ernie,

Thank you for the suggestion. The issue is that Forms To Go doesn’t create
a div tag that we can add a class too. The error message replaces the
comment, , we insert into Freeway through a HTML markup item.

Any suggestions as to how to add a div tag to the php code?

Regards,
Bernard


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

On 12 Jun 2012, 12:11 am, DeltaDave wrote:

The Markup item you added in FW will have an ID - you can target that using

#MyMarkupdiv { color:#f0f8ff; text-shadow:0px 2px 2px black; whatever:blah }

David

Hey David,

Thank you for your help. I mentioned in the original post that we are trying to have the div initially invisible when the page loads. So the marginal spacing would need to be pulled in only when the text is error message is generated.

Our attempt was creating a style to target the error message that would add “paragraph” spacing before and after the paragraph. The problem is that it is not taking the “space before” & “Space after” attributes.

Is there a simple way to add spacing before & after a paragraph on the PHP generated error message?

Example of PHP generated error message

<p class="f-lp">Enter In Text Field<br />
Enter Email Address<br />
Select One From List<br />
Need To Upload A File - No file was uploaded
<!--SUCCESSMSG--></p> 

Thank you, Bernard


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

I think that Forms To Go has a placement tag also for NOT SUCCESS instances.


Ernie Simpson

On Tue, Jun 12, 2012 at 1:06 PM, TeamSDA
email@hiddenwrote:

Example of PHP generated error message

<p class="f-lp">Enter In Text Field<br />
> Enter Email Address<br />
> Select One From List<br />
> Need To Upload A File - No file was uploaded
> <!--SUCCESSMSG--></p>

Thank you, Bernard


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

Ernie,

That is correct, but that is the “NOT SUCCESS” instance. When it is successful the SUCCESSMSG text is replaced with the success text.

Example of Success instance

<p class="f-lp"><!--VALIDATIONERROR-->
Your Inquiry Has Been Submitted</p>

Preferably through styles, is there a simple way to add spacing before & after a paragraph on the PHP generated error message?

Thanks, Bernard


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

It’s helpful to understand what the f-fp and f-lp styles do. f-fp sets the top margin to 0 and f-lp sets the bottom margin to 0. You shouldn’t redefine these directly, but you could set up a more specific style to override their settings in the context of your error message area. Try this:

Draw an HTML box where you want your errors to appear. Make note of the name of this box in the Title field of the Inspector (I’ll use the ID ‘messages’ for this example). Now, either in the Styles palette or the Page / HTML Markup dialog, create a style to override these two class-styles:

#messages .f-fp, #messages .f-lp { margin: 1em 0; }

This will override the default styles, simply because they are scoped to your messages box and are therefore more specific than the defaults, which are set on the class name only.

Walter

On Jun 12, 2012, at 1:40 PM, TeamSDA wrote:

Ernie,

That is correct, but that is the “NOT SUCCESS” instance. When it is successful the SUCCESSMSG text is replaced with the success text.

Example of Success instance

<p class="f-lp"><!--VALIDATIONERROR-->
> Your Inquiry Has Been Submitted</p>

Preferably through styles, is there a simple way to add spacing before & after a paragraph on the PHP generated error message?

Thanks, Bernard


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

Walter,

Thank you for your input. Changing the margins through the f-fp & f-lp styles are behaving the same way as our previous style.

The left & right margins are behaving perfectly. They are adding margins to the paragraph text inside of the div. But the top & bottom margins are effecting the entire div rather than the paragraph text only. The margin properties are all defined in the same style but behaving differently.

Our goal is to have the error text populate inside of a div with an undefined height so its initially invisible. When the text populates, we don’t want the text to be flush against the edges of the div. So basically we need the paragraph text “only” to have marginal properties on it.

Unless you have another suggestion, it seems our only solution is to hand code a class into the php script or have Bebosoft assign a class value. Any kind help would be greatly appreciated.

Thanks, Bernard


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

Can we see it?

D


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

On 12 Jun 2012, 9:32 pm, DeltaDave wrote:

Can we see it?

D

Delta Dave,

Sorry for the delay. I put up an example of the basic functionality we want at the bottom of this post. If you go to the link below you will see a form. If you hit submit without filling in any fields, an error message will show up. This is how we want the error message to behave. The error message and its container will be initially invisible.

The error message is being called in through php using an HTML markup item. The Markup item is sitting inside of a div which has a background color. The div tag’s height is undefined. If you notice the actual error text, it has a 10px margin on the left. The margin is being applied through a style with an indent property.

Our issue is getting that same margin attribute from the top & bottom. Whenever we add margins to the top & bottom using a style with “space before” and “space after” we start noticing erratic behavior.

Is there a way to get margins on the top and bottom of the error message without initially revealing the div tag?

If there is another way of accomplishing this, any advice would be greatly appreciated.

Thanks, Bernard

(sutherlanddesignagency.com/Test/Bernard/Error/)


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

Our goal is to have the error text populate inside of a div with an undefined height so its initially invisible.

Maybe you should consider a different method of hiding this div.

Why not use a bit of javascript to reveal the error div using the onclick of the submit button - then you could style it how you like.

D


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

Hi Bernard,
Try this;
In your Freeway document on the form page insert the following code using Page > HTML Markup > Before (end head);

<style type="text/css">
<!-- 
.Prompt { margin: 20px !important; }
-->
</style>

You can find this code here as well if you download it;
http://www.freewayactions.com/code/?f=prompt.css

What this is going to do is to override the default style for the warning text (using the class Prompt) and set it’s margins to 20 pixels (or whatever value you choose). The important bit just tells the browser that it should keep the margin at this value regardless of what other styles want to do with it later on.
I hope this helps.
Regards,
Tim.

On 13 Jun 2012, at 01:41, TeamSDA wrote:

If there is another way of accomplishing this, any advice would be greatly appreciated.


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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

Maybe you should consider a different method of hiding this div.

Why not use a bit of javascript to reveal the error div using the onclick of the submit button - then you could style it how you like.

D

Hey David,

Thanks for your input. That would be exactly what we would want. Is there an action available to accomplish this? If not, could you explain further on getting this to happen?

Thanks, Bernard


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

On 13 Jun 2012, 9:39 am, Tim Plumb wrote:

Hi Bernard,
Try this;
In your Freeway document on the form page insert the following code using Page > HTML Markup > Before (end head);

Tim,

Thank you for your response on the issue. Completely relevant to our question and direction as stated above but I think we are going about this the wrong way.

No matter how we get the margins on around the error message, it seems it will always effect the containing div tag initially when the page loads revealing the colored div.

I think what David had recommended would be our desired direction. Do you have any input regarding this method that David states? Or do you have another method (preferably) through actions to accomplish this?

Why not use a bit of javascript to reveal the error div using the onclick of the submit button - then you could style it how you like.

D

David,

I’ve tried carrying out your recommendation through Target Show/Hide Layer but the submit button is unable to have target properties.

We would prefer using actions to accomplish this method but if it requires another way we are open to your suggestion.

Thank you all,
Bernard


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

Presumably you are submitting the page to itself.

The issue is that on submit the page is refreshed and the Target show/hide doesn’t persist. (BTW - you can use an image as a submit button and attach actions to that.)

Not sure what to suggest next.

Submit to a clone of the original page with the correct styling?

D


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

Hi Bernard,
OK I now see what you mean. Personally I would extract as much of the validation error and success message styling into the php includes that the and comments pull into the page. This would leave your host page clean of any extra content and styling until it was needed. Unfortunately I can’t think of a Freeway-like way to do this without resorting to pulling the code apart to make those includes.

One thing you could do is to add that style block I suggested and add it to each of the validation error and success message includes. So for example;

Enter In Text Field<br />
Enter Email Address<br />
Select One From List<br />
Need To Upload A File - No file was uploaded<!--SUCCESSMSG-->

<style type="text/css">
<!-- 
.Prompt { margin: 20px !important; }
-->
</style>

This will add the style as it is called in with the include. It will work but the page will fail validation as the style block should really be in the page head.

Actually as the page is running PHP we can inject that styling only on the submitted instance of the page.
Try this;
Paste the following code in Page > HTML Markup > Before

<?php
if (!empty($_POST)){
echo('<style type="text/css">
<!-- 
.Prompt { margin: 20px !important; }
-->
</style>';
}
?>

This should only echo the style to the page head when the form is submitted so leaving the panel hidden when needed and styled when shown.
I hope this helps.
Regards,
Tim.

On 13 Jun 2012, at 19:40, TeamSDA wrote:

Thank you for your response on the issue. Completely relevant to our question and direction as stated above but I think we are going about this the wrong way.

No matter how we get the margins on around the error message, it seems it will always effect the containing div tag initially when the page loads revealing the colored div.

I think what David had recommended would be our desired direction. Do you have any input regarding this method that David states? Or do you have another method (preferably) through actions to accomplish this?


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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

One thing you could do is to add that style block I suggested and add it to each of the validation error and success message includes. So for example;

Hi all,

Thank you for all your suggestions and input. Currently we are moving down a new direction as we received a response from Bebosoft directly.

If you view the link you will notice that it was updated
(sutherlanddesignagency.com/Test/Bernard/Error/)

Tim, I tried your method but I can’t seem to grasp exactly how to accomplish that. Bebosoft had recommended a method but we are still running into the same margin issues with top and bottom.

Here is the link to Bebosofts response

If anyone could give us a hand with this or even confirm that it will work. It would be greatly appreciated.

Again, thank you all for your help.

Bernard


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

Hi Bernard,
Looking at the link you provided to the discussion on the Bebosoft web site it looks like you just need to add the correct CSS styling to Freeway.

  1. In Freeway choose Edit > Styles
  2. Create a new style
  3. In the Tag field enter div#error span
  4. Remove anything in the Name field
  5. Click on Extended
  6. Click on New…
  7. Enter
    name: padding
    value: 15px 15px 15px 30px
  8. Click OK to get back to the Edit Styles dialog and again to get back to your document.

This will place the padding on the error span as intended. What I’ve missed out (for now at least) are the styles that add a background colour and image to the error panel. We can add these in if needed but adding the image may over complicate these instructions so try it with just the padding and see how you get on.

The image and background styling can be phase 2.
Regards,
Tim.

On 14 Jun 2012, at 23:12, TeamSDA wrote:

Tim, I tried your method but I can’t seem to grasp exactly how to accomplish that. Bebosoft had recommended a method but we are still running into the same margin issues with top and bottom.


FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com


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