CSS and Sidebar Widget « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

ckracht
Member

I use the Headway framework and I would like to use custom CSS for the sidebar widget. The form is simple with one required input box and a image as the submit button. I want to able to do the following:

1. Customize the size of the input box and font inside
2. Be able to use the ClearIt css so the Enter Email Address code disappears on click
3. Put the image submit button to the right of the input box
4. Remove the * for the required field and any other Gravity form text. So a simple input box and submit button.

In general I would like to learn more about CSS for these forms. So even if I have something embedded on a page I want to be able to do more CSS styling.

Thanks and I look forward to your replies,
Chris

An example of non-working code is available at http://www.itcalliance.com/dev/envidagroup
I tried to copy and edit code from the preview form source code and I am having issues.

Posted 14 years ago on Saturday December 11, 2010 | Permalink
Kevin Flahaut
Administrator

I'm not sure what you're asking for here. Looking at the page you sent me, the form isn't a standard Gravity Form - it looks like you've pasted markup in there and tried to change it. That won't work. If you want to put a working form in your sidebar, then I could give you some guidance if you need.

If you're interested in learning more about how the forms are structured, we have a visual guide that might help you out.

http://www.gravityhelp.com/documentation/visual-css-guide/

Most fields either have a unique ID or a class that you can target with CSS rules. For the few items that don't have a class or ID applied, you can simply use CSS inheritance from the parent ID or class to style the element.

http://www.webdesignfromscratch.com/html-css/css-inheritance-cascade/

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

One of the browser tools like Firebug for Firefox or the built in Safari/Chrome developer tools will make it easier to inspect the form and play around with styles on the fly. If you don't use those already, I'd give it a shot.

http://getfirebug.com/

http://j.mp/gDFZxK

Posted 14 years ago on Saturday December 11, 2010 | Permalink
ckracht
Member

I will take a look at what the links you provided and let you know. Yes if this is a guide that shows what CSS to change that would be helpful. Can some of the items just be included in the same class or div tag to keep them next to each other? Sorry flying all day in the snow so I don't have time until later to read further but wanted to say thanks for the reply.

Posted 14 years ago on Sunday December 12, 2010 | Permalink
Kevin Flahaut
Administrator

You can't change the markup the form outputs. The structure and classes are already set. You would just need to inspect for the class names/ID's you need to manipulate then target those via CSS and apply new rules.

Posted 14 years ago on Sunday December 12, 2010 | Permalink
ckracht
Member

At a quick glance it looks like I might be able to use ginput_left and ginput_right to override the default css for the form. So it sounds like as you add a field you can just use the custom class within the form setup like ClearIt css code. Sorry a bit tired been flying all day and have more to go. Thanks for your help.

Also, if you want to override the default settings for a particular can this be done by adding custom css in the custom.css file?

Chris

Posted 14 years ago on Monday December 13, 2010 | Permalink
Kevin Flahaut
Administrator

yep, put any custom CSS in your theme's style.css or custom.css file.

Posted 14 years ago on Monday December 13, 2010 | Permalink