https://legacy.forums.gravityhelp.com/topic/styling-the-address-block Gravity Support Forums Topic: Styling the Address Block en-US Tue, 07 Apr 2026 23:23:27 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15253 Fri, 31 Dec 2010 07:41:16 +0000 chucktho 15253@https://legacy.forums.gravityhelp.com/ <p>Thank you. That did it. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15241 Thu, 30 Dec 2010 18:34:48 +0000 Kevin Flahaut 15241@https://legacy.forums.gravityhelp.com/ <p>@chucktho - Here's some CSS rules that are targeted for that specific form. If I understand correctly, this is how you were trying to format it. You can remove whatever CSS you had implemented before, then append these to the end of the theme stylesheet and you should be good to go.</p> <pre><code>body #gform_wrapper_10 #input_10_3_1_container {width:48%!important; float:left} body #gform_wrapper_10 #input_10_3_2_container {width:48%!important;} body #gform_wrapper_10 #input_10_3_3_container, body #gform_wrapper_10 #input_10_3_4_container {width:32%!important; float:left} body #gform_wrapper_10 #input_10_3_5_container {width:31%!important;}</code></pre> <p>test screenshot: <a href="http://grab.by/88rc" rel="nofollow">http://grab.by/88rc</a></p> <p>You'll note that as Carl mentioned previously, each input is wrapped in a container with a unique ID. If you simply target those correctly, you can manipulate everything to suit your needs.</p> <p>If you want to become more familiar with the basic form layout and ID/Class structure. You can reference the visual guide via the link below.</p> <p><a href="http://www.gravityhelp.com/documentation/visual-css-guide/" rel="nofollow">http://www.gravityhelp.com/documentation/visual-css-guide/</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15237 Thu, 30 Dec 2010 18:09:19 +0000 Carl Hancock 15237@https://legacy.forums.gravityhelp.com/ <p>Yes there are id's that contain 3 level deep numbers like 10_3_2 however the sub elements of the Address field don't have an id that begins with "field". So what Kevin was saying is the field name is field_10_3 and that encompasses ALL of the address field.</p> <p>The individual elements of the Address field have different ids. For instance the spans that contain each element have an id that looks like this:</p> <p>input_10_3_1_container</p> <p>Which you would target with CSS like this:</p> <p><code>#input_10_3_1_container {my-css: goeshere;}</code></p> <p>Kevin is going to work up some CSS for you that you can use to accomplish what you want to do. Doing what you want to do requires knowledge of how to float CSS elements and how elements relate to each other via id's and classes and containers.</p> <p>He will post an update once he has the CSS completed. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15235 Thu, 30 Dec 2010 17:56:16 +0000 chucktho 15235@https://legacy.forums.gravityhelp.com/ <p>I don't know enough about this stuff. How will I move the fields around if they're all the same? i.e. if 10_3_4 is actually 10_3, what is 10_3_3 or 10_3_2? </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15233 Thu, 30 Dec 2010 17:49:06 +0000 Kevin Flahaut 15233@https://legacy.forums.gravityhelp.com/ <p>You need to view the page source to get the ID's. You can do this by right-clicking in the page somewhere and choosing "view source"or "view page source" from the contextual menu.</p> <p>If you view the source and search for "#field_10_3.4" you'll see that doesn't exist either. The actual field name is "field_10_3".</p> <p>screenshot: <a href="http://grab.by/88oi" rel="nofollow">http://grab.by/88oi</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15230 Thu, 30 Dec 2010 17:35:50 +0000 chucktho 15230@https://legacy.forums.gravityhelp.com/ <p>I just tried replacing the underscore with a dot to no effect. For example, I went from "#field_10_3_4" to "#field_10_3.4" </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15228 Thu, 30 Dec 2010 17:30:06 +0000 chucktho 15228@https://legacy.forums.gravityhelp.com/ <p>I'm trying to get both Address fields on one line and City, State, Zip on another.</p> <p>This is what appears for IDs in Fields for Form ID 10 when I access IDs from the Edit Forms panel. Am I misunderstanding something?</p> <p>Street Address 3.1<br /> Address Line 2 3.2<br /> City 3.3<br /> State / Province 3.4<br /> Zip / Postal Code 3.5<br /> Country 3.6 </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15223 Thu, 30 Dec 2010 17:08:29 +0000 Kevin Flahaut 15223@https://legacy.forums.gravityhelp.com/ <p>The problem with your rules is that the ID's you've specified don't exist.</p> <p>For example, there is no "field_10_3_1" in your markup, there is however a "field_10_3". If you target the ID's correctly, the rules should work.</p> <p>test screenshot: <a href="http://grab.by/88lf" rel="nofollow">http://grab.by/88lf</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15218 Thu, 30 Dec 2010 16:55:29 +0000 Carl Hancock 15218@https://legacy.forums.gravityhelp.com/ <p>Can you describe what you are trying to accomplish as far as styling goes? Looking at the CSS itself isn't as helpful as an explanation so we know what your goal is. </p> https://legacy.forums.gravityhelp.com/topic/styling-the-address-block#post-15216 Thu, 30 Dec 2010 16:39:36 +0000 chucktho 15216@https://legacy.forums.gravityhelp.com/ <p>I'm trying to style the Address Block on my form and having no success at all. Below is what I'm using. I've tried with both px and % using the same code I'm using for styling other parts of the same form. Your help is greatly appreciated.</p> <p>The form is here: <a href="http://tbfaa.devsite103.com/tbfaa/join-tbfaa/" rel="nofollow">http://tbfaa.devsite103.com/tbfaa/join-tbfaa/</a></p> <p>My CSS:<br /> <pre><code>/* Mailing Address1 */ body.custom #field_10_3_1 { width: 50%; float: left; } #input_10_3_1 { width: 90%; } /* Mailing Address2 */ body.custom #field_10_3_2 { width: 50%; float: left; } #input_10_3_2 { width: 90%; } /* Mailing City */ body.custom #field_10_3_3 { width: 60%; float: left; } #input_10_3_3 { width: 90%; } /* Mailing State */ body.custom #field_10_3_4 { width: 20%; float: left; } #input_10_3_4 { width: 90%; } /* Mailing Zip */ body.custom #field_10_3_5 { width: 20%; float: left; } #input_10_3_5{ width: 90%; }</code></pre>