Remove Shadow/Glow around form? -...

User 2325151 Photo


Registered User
32 posts

Oops, I forgot to upload the example photos. :-) The shadow is appearing at the top and bottom of the form.
Attachments:
User 2325151 Photo


Registered User
32 posts

So, I removed all margin and padding from the html form page which is embedded in the iframe. This pushed the form up and is now hiding the shadow at the top of the form. Unfortunately, it still displays at the bottom of the form. I'd really like to remove this entirely, so I'm open to any ideas on that.

Also, does anyone have ideas for tightening up the excess space above and below (especially below) the form? It's a different amount in each browser, and I confirmed it's there because of the iframe height given by Web Form Builder. I get that it is trying to keep the bottom of the form from ever being cut off. But, I'd love to get rid of all that excess space.

Thanks again!

- Jeremy
User 629005 Photo


Ambassador
2,174 posts

Jeremy - Now I see what you were referring to. After just a quick poke at WFB (dinner is waiting ;)) I could only come up with using "Transparent Theme" to remove that. I will look into it more after I eat.
Living the dream, stocking the cream :D
User 2325151 Photo


Registered User
32 posts

I had thought about that... the only problem being that getting the form back to the look it has now (with re-spacing of elements, margins, padding, etc) would take entirely too long for something that should be very simple. There's got to be a way to just remove the shadow image, or whatever code is creating it. But, I'm at a loss as to seeing where either is located.

Very much appreciate the support. I'm almost out of hair to pull out. :-)

- Jeremy
User 629005 Photo


Ambassador
2,174 posts

I wonder (as a work-around, until you decide to redo the whole form) if you could comment out the code that is applying the shadow.

I think (keep in mind I've only slept 3 hours in the last two days) if you go to your "default.css" file and open it with either HTML Editor (if you have it) or any text editor (DON'T use MS Word), look for this section:

/* Theme CSS */
/* This rule will applied to the form container */
#docContainer {
margin: 40px auto;
padding:0px 0px 0px 0px;
width: 600px;
font-family: Helvetica, Arial, Sans-serif;
font-size:13px;
color: #333;
background-color: rgb(246,246,246);
border: 1px solid rgb(193,193,193);
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}


If you were to comment out the section from "border: to right before the }" for this section, I think it would kill that shadow. Would look like this:

/* Theme CSS */
/* This rule will applied to the form container */
#docContainer {
margin: 40px auto;
padding:0px 0px 0px 0px;
width: 600px;
font-family: Helvetica, Arial, Sans-serif;
font-size:13px;
color: #333;
background-color: rgb(246,246,246);
/* border: 1px solid rgb(193,193,193);
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
-moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.28);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; */

}


Save that file locally, then upload to your server via FTP. Load your page with the form on it in your browsers, and force a refresh.
Living the dream, stocking the cream :D
User 187934 Photo


Senior Advisor
20,239 posts

This should work.:) It's in the default.css

#docContainer {
background-color: #F6F6F6;
border: 1px solid #C1C1C1;
border-radius: 6px 6px 6px 6px;
/* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.28);*/
color: #333333;
font-family: Helvetica,Arial,Sans-serif;
font-size: 13px;
margin: 40px auto;
padding: 0;
width: 600px;
}

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2325151 Photo


Registered User
32 posts

Hey guys! Thanks for the help!

So, as it turned out, I had to comment out everything Phil suggested. But, I did try both.

It looks like I'm just going to have to deal with all that extra space at the bottom of the page. But, if anyone (or I) can come up with a solution, we'll just post back here. :-)

Thanks again! You guys are great!

- Jeremy
User 629005 Photo


Ambassador
2,174 posts

Excellent! I'm glad that worked out for you.

Don't know if it would apply to your form or not, but another user had posted (within the last week) a solution that made the form "breathable". Expanding out as needed. I will see if I can find the thread and add it to this post if I do.

Edit: Found it!

http://www.coffeecup.com/forums/web-for … ong-forms/

It actually implements an "accordion effect" into the form. Maybe useful to you as well(?). Good luck!
Living the dream, stocking the cream :D
User 2325151 Photo


Registered User
32 posts

That's a great effect! Thanks for the link (and all the help). Have a great day!

- Jeremy

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.