https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget Gravity Support Forums Topic: CSS and Sidebar Widget en-US Mon, 20 Apr 2026 06:31:32 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget#post-14269 Mon, 13 Dec 2010 00:03:32 +0000 Kevin Flahaut 14269@https://legacy.forums.gravityhelp.com/ <p>yep, put any custom CSS in your theme's style.css or custom.css file. </p> https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget#post-14266 Sun, 12 Dec 2010 20:33:15 +0000 ckracht 14266@https://legacy.forums.gravityhelp.com/ <p>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. </p> <p>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?</p> <p>Chris </p> https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget#post-14259 Sun, 12 Dec 2010 13:19:38 +0000 Kevin Flahaut 14259@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget#post-14256 Sun, 12 Dec 2010 13:00:56 +0000 ckracht 14256@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget#post-14236 Sat, 11 Dec 2010 17:36:19 +0000 Kevin Flahaut 14236@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>If you're interested in learning more about how the forms are structured, we have a visual guide that might help you out.</p> <p><a href="http://www.gravityhelp.com/documentation/visual-css-guide/" rel="nofollow">http://www.gravityhelp.com/documentation/visual-css-guide/</a></p> <p>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.</p> <p><a href="http://www.webdesignfromscratch.com/html-css/css-inheritance-cascade/" rel="nofollow">http://www.webdesignfromscratch.com/html-css/css-inheritance-cascade/</a></p> <p><a href="http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/" rel="nofollow">http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/</a></p> <p>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.</p> <p><a href="http://getfirebug.com/" rel="nofollow">http://getfirebug.com/</a></p> <p><a href="http://j.mp/gDFZxK" rel="nofollow">http://j.mp/gDFZxK</a> </p> https://legacy.forums.gravityhelp.com/topic/css-and-sidebar-widget#post-14232 Sat, 11 Dec 2010 15:08:06 +0000 ckracht 14232@https://legacy.forums.gravityhelp.com/ <p>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:</p> <p>1. Customize the size of the input box and font inside<br /> 2. Be able to use the ClearIt css so the Enter Email Address code disappears on click<br /> 3. Put the image submit button to the right of the input box<br /> 4. Remove the * for the required field and any other Gravity form text. So a simple input box and submit button.</p> <p>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.</p> <p>Thanks and I look forward to your replies,<br /> Chris</p> <p>An example of non-working code is available at <a href="http://www.itcalliance.com/dev/envidagroup" rel="nofollow">http://www.itcalliance.com/dev/envidagroup</a><br /> I tried to copy and edit code from the preview form source code and I am having issues. </p>