beta widget styling « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

thesportsphysio
Member

I have been playing around this afternoon with the new beta version and need some advice re styling.

Help.... How do I go about styling it, currently it looks really bad and it takes up too much space on my side nav.

Here is the site http://www.ablogfrommydog.com

I have no idea where to start - except i notice that i have an inactive and empty widget css

gravityforms/css/forms_widget.css (inactive)

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

Have to say do like the new features and mailchimp integration... Keep up the good work

adam

Posted 13 years ago on Saturday August 28, 2010 | Permalink
Carl Hancock
Administrator

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.

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.

For example on your site something like this would change the button style for a form appearing as a widget in your site:

.widget-wrap .form_footer .button {background-color: #000; color: #FFF;}

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.

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.

Posted 13 years ago on Monday August 30, 2010 | Permalink
thesportsphysio
Member

cheers carl... thought your answer would be something like that....

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 :-)

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.

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?

a

Posted 13 years ago on Monday August 30, 2010 | Permalink
Carl Hancock
Administrator

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.

Posted 13 years ago on Monday August 30, 2010 | Permalink
Kevin Flahaut
Administrator
You can do what you'd like with a little CSS absolute positioning. Just append the following to your theme's style sheet.
```
#gform_widget-3 .gform_wrapper {position: relative}
#gform_widget-3 .gform_footer {position: absolute; width:64px; top:60px; left:155px}
```
test screenshot
Posted 13 years ago on Monday August 30, 2010 | Permalink
Kevin Flahaut
Administrator

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.

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.

Posted 13 years ago on Monday August 30, 2010 | Permalink