https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic Gravity Support Forums Topic: Widening Elements in a Sidebar Widget's Embedded Form with Conditional Logic en-US Mon, 20 Apr 2026 07:12:20 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic#post-55880 Thu, 19 Apr 2012 17:20:55 +0000 Rob Harrell 55880@https://legacy.forums.gravityhelp.com/ <p>I hear ya - all the more reason to surround yourself with great people! Good luck and have fun. </p> https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic#post-55877 Thu, 19 Apr 2012 17:07:12 +0000 EvelynB 55877@https://legacy.forums.gravityhelp.com/ <p>Thanks again, Rob. I will see how naturally this comes to me. I love to learn, it is more a matter of time management, as I operate my own small business and wear many hats, as I am sure you can imagine. Thanks, Evelyn. </p> https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic#post-55800 Thu, 19 Apr 2012 11:59:58 +0000 Rob Harrell 55800@https://legacy.forums.gravityhelp.com/ <p>You would want to place those styles into custom.css - so right there.</p> <p>This selector is for your labels: .gform_widget .gform_wrapper .right_label .gfield_label</p> <p>Thess selectors are for your inputs and selects .gform_widget .gform_wrapper .right_label input.medium, .gform_widget .gform_wrapper .right_label select.medium</p> <p>This selector is for your description: .gform_widget .gform_wrapper .right_label .gfield_description</p> <p>Notice I started all the selectors with .gform_widget - That means they will only pertain to your widget form in the sidebar.</p> <p>The reason I stated the hiring piece was I wasn't sure of your interest in learning CSS. If you are you can see these resources here:</p> <p><a href="http://www.gravityhelp.com/documentation/page/Design_and_Layout" rel="nofollow">http://www.gravityhelp.com/documentation/page/Design_and_Layout</a><br /> <a href="http://www.gravityhelp.com/other-resources/" rel="nofollow">http://www.gravityhelp.com/other-resources/</a> (After the plugins section) </p> https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic#post-55798 Thu, 19 Apr 2012 11:33:35 +0000 EvelynB 55798@https://legacy.forums.gravityhelp.com/ <p>Hi Rob</p> <p>Thanks for your timely reply. As I am "not supposed" to touch my wordpress main theme style sheet, I understand that I can add code to a file called custom.css which should override related default coding in the main file. Do you think that I can just copy your above coding suggestions and paste them to the wordpress custom.css file? Could you also quickly clarify which coding snippets lines relate to my various questions? Will the above wrapper code affect all my forms, or both "uses" of this particular form, or will it know to just apply it to the version of this particular form that is embedded in the sidebar (as previously mentioned the form also exists in a full page version-links were provided above)? Also, is there a reason you are recommending that I consider a "professional" at this time, ie am I doing things wrong, or asking "obvious" questions? ;-) Thanks in advance. Evelyn </p> https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic#post-55766 Thu, 19 Apr 2012 09:34:03 +0000 Rob Harrell 55766@https://legacy.forums.gravityhelp.com/ <p>Try dropping this into your theme's stylesheet:</p> <pre><code>[css] .gform_widget .gform_wrapper .right_label .gfield_label { float: none; width: auto; display: block; text-align: left; } .gform_widget .gform_wrapper .right_label input.medium, .gform_widget .gform_wrapper .right_label select.medium { width: 98%; } .gform_widget .gform_wrapper .right_label .gfield_description { margin-left: 0; width: auto; }</code></pre> <p>The blue background is on your sidebar div:</p> <pre><code>[css] #sidebar { border-left: none; background: url(http://johannesen.ca/explanationsunlimited/wp-content/uploads/2011/09/sidebar-gradient.png) no-repeat; color: black; }</code></pre> <p>That's the background image right there. You might want to consider hiring someone to further style your site as you need fit. </p> https://legacy.forums.gravityhelp.com/topic/widening-elements-in-a-sidebar-widgets-embedded-form-with-conditional-logic#post-55722 Wed, 18 Apr 2012 16:52:58 +0000 EvelynB 55722@https://legacy.forums.gravityhelp.com/ <p>Hi Gravity Forms,</p> <p>I am doing my best to develop a Wordpress website (Empire Theme by Woo Themes), and am continuing to work on my Gravity forms. I have a few questions regarding how I might make better use of the full width of my sidebar for my embedded form that uses conditional logic. Please note that I am actually using the same form in 2 places, embedded in the sidebar as well as on its own full page. (If required, I assume that I can duplicate the form and name them 2 different titles if the following requests would require that.) </p> <p>Here are the links to my form:<br /> Embedded sample: <a href="http://explanationsunlimited.com/mathematics-tutoring-toronto/" rel="nofollow">http://explanationsunlimited.com/mathematics-tutoring-toronto/</a><br /> Full Page: <a href="http://explanationsunlimited.com/how-can-we-help-you/" rel="nofollow">http://explanationsunlimited.com/how-can-we-help-you/</a></p> <p>To see the form expand, select the “Tutoring Enquiry” option in the first drop-down field. </p> <p>Questions:<br /> Q1. For my drop-down fields, some of the choices are wider than the actual field width and are therefore hard to read in the embedded form. There appears to be space to the right of the field, so can you instruct me on how to widen the field width so users can read more of the drop-down choices while filling out the embedded form? As you may recall, I am a non-coder/non-developer, and have yet to change things in my custom.css or elsewhere, so your guidance is appreciated, such as what to change &amp; where to find the file.</p> <p>Q2. Can I also increase the width of the field LABEL to reduce the number of rows the label takes up in the embedded form? If so, how?</p> <p>Q3. Similarly, for the field descriptions, can I “fully justify/align” them so that they can spread out the full width of the sidebar starting from the left side underneath the field label, and continuing to the far right. I am unsure how to use padding, margins, borders, etc</p> <p>Q4. I am also wondering how to put a border around the embedded form &amp; how to adjust the sidebar’s blue background fade, as some of the lower fields seem to be floating on white.</p> <p>Your timely assistance with these specific items is greatly appreciated. Cheers, Evelyn </p>