https://legacy.forums.gravityhelp.com/topic/beta-widget-styling Gravity Support Forums Topic: beta widget styling en-US Mon, 20 Apr 2026 00:51:12 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/beta-widget-styling#post-9157 Mon, 30 Aug 2010 11:58:23 +0000 Kevin Flahaut 9157@https://legacy.forums.gravityhelp.com/ <p>To add a little here... If you use the "top label" option on your form, the forms usually fit in a sidebar/widget area really well without any additional styling. The field widths are set as percentages of the available area so they adjust quite nicely in most situations. </p> <p>If you use the left/right label options, then things can get a bit crowded. Again, as Carl mentioned, this is the "out of the box" behavior but can be heavily influenced by the theme CSS. </p> https://legacy.forums.gravityhelp.com/topic/beta-widget-styling#post-9156 Mon, 30 Aug 2010 11:42:11 +0000 Kevin Flahaut 9156@https://legacy.forums.gravityhelp.com/ <p>You can do what you'd like with a little CSS absolute positioning. Just append the following to your theme's style sheet.</p> <pre><code>#gform_widget-3 .gform_wrapper {position: relative} #gform_widget-3 .gform_footer {position: absolute; width:64px; top:60px; left:155px}</code></pre> <p><a href="http://grab.by/grabs/2d20d076465d224e6fe6164f7004ab49.png" rel="nofollow">test screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/beta-widget-styling#post-9155 Mon, 30 Aug 2010 11:27:22 +0000 Carl Hancock 9155@https://legacy.forums.gravityhelp.com/ <p>Currently Gravity Forms has to output the form because of how it works. All the widget does is output the form and wrap it in the widget classes. For a lot of themes it should look find, some themes will require minor CSS tweaks and some things will require major CSS tweaks. It just depends on how the theme was setup from a CSS perspective. We don't have much control over that aspect of it as it depends on the theme. </p> https://legacy.forums.gravityhelp.com/topic/beta-widget-styling#post-9150 Mon, 30 Aug 2010 10:36:10 +0000 thesportsphysio 9150@https://legacy.forums.gravityhelp.com/ <p>cheers carl... thought your answer would be something like that.... </p> <p>I will just go out and get a new flux capacitor and fluffle valve before embarking on a trip to the dark side of css :-)</p> <p>This is a shame as I would like to use... but my skills of css are lacking - so at this point will think I will have to pass until I have more time to get down and dirty with some code.</p> <p>Would it be possible to look at the problem from the other side and produce a widget first that looks to gravity in the back end?</p> <p>a </p> https://legacy.forums.gravityhelp.com/topic/beta-widget-styling#post-9148 Mon, 30 Aug 2010 10:27:44 +0000 Carl Hancock 9148@https://legacy.forums.gravityhelp.com/ <p>Widgets are a difficult thing for us to provide default styles for. Your theme controls what widgets look like, and depending on your theme you are going to have styling issues. The Widget functionality is going to be one that requires customizations for a lot of users using themes that don't do a good job of styling Widgets.</p> <p>What you will have to do is edit your theme stylesheet and add styles to it to style the form when it appears as a widget. You would do this via CSS inheritance by targeting the form as a child of the widget class your site uses.</p> <p>For example on your site something like this would change the button style for a form appearing as a widget in your site:</p> <p>.widget-wrap .form_footer .button {background-color: #000; color: #FFF;}</p> <p>So you have to target the form using the .widget-wrap class by adding custom CSS to your theme stylesheet and then adjust it's styles until you are satisfied with them.</p> <p>Unfortunately the way CSS works the Widget is going to have this issue which is one of the reasons we have avoided adding it to the core plugin up until now. </p> https://legacy.forums.gravityhelp.com/topic/beta-widget-styling#post-9099 Sat, 28 Aug 2010 10:34:56 +0000 thesportsphysio 9099@https://legacy.forums.gravityhelp.com/ <p>I have been playing around this afternoon with the new beta version and need some advice re styling.</p> <p>Help.... How do I go about styling it, currently it looks really bad and it takes up too much space on my side nav.</p> <p>Here is the site <a href="http://www.ablogfrommydog.com" rel="nofollow">http://www.ablogfrommydog.com</a></p> <p>I have no idea where to start - except i notice that i have an inactive and empty widget css</p> <p>gravityforms/css/forms_widget.css (inactive)</p> <p>Any thoughts on a starting point of some code I can tweak? Ideally I would like possibly one line email address a small image alongside .. like the feedburner box below</p> <p>Have to say do like the new features and mailchimp integration... Keep up the good work</p> <p>adam </p>