https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts Gravity Support Forums Topic: What are the basics for changing colors, fonts? en-US Mon, 20 Apr 2026 06:25:50 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-179832 Thu, 21 Mar 2013 15:53:52 +0000 Chris Hajer 179832@https://legacy.forums.gravityhelp.com/ <p>I'm sorry, we don't do any sort of client work or consulting. You can find help on our job board here <a href="http://www.gravityhelp.com/forums/forum/job-board" rel="nofollow">http://www.gravityhelp.com/forums/forum/job-board</a> or on one of the many WordPress or web design related boards out there. The work is not specifically related to Gravity Forms. You need someone good with CSS. </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-177371 Tue, 19 Mar 2013 21:53:41 +0000 esmith813 177371@https://legacy.forums.gravityhelp.com/ <p>dang!.....do you charge for your services? how much? </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-177229 Tue, 19 Mar 2013 19:30:22 +0000 Chris Hajer 177229@https://legacy.forums.gravityhelp.com/ <p>You're going to have to learn some of this CSS yourself. The examples we provided are intended to point you in the right direction; to show you how things can be accomplished. The actual styling will have to be done by you. If it's beyond your capabilities at this time, you may need to get assistance from someone more familiar with CSS.</p> <p>Our styling documentation is very good and shows you how to target every element in a Gravity Form: <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-177163 Tue, 19 Mar 2013 17:35:45 +0000 esmith813 177163@https://legacy.forums.gravityhelp.com/ <p>Thank you very much! Thank god you are willing to create the CSS because it will take me months to learn this stuff. I really thought that this product would allow me to easiy create a nice looking form with all the colors , spacing..</p> <p>Here is my form page: <a href="http://dev3.celeer.com/free-consultation/" rel="nofollow">http://dev3.celeer.com/free-consultation/</a></p> <p>I need a form like this: <a href="http://screencast.com/t/2kMh0Gv5" rel="nofollow">http://screencast.com/t/2kMh0Gv5</a>.<br /> Can you create the CSS so it looks like this?<br /> - I believe each container is about 500 px wide. Light blue color with darker blue border<br /> -3 Containers: Personal Information, Contact Information, Other Information<br /> -Adjust the spacing so everything fits clean in the containers<br /> - Yellow highlight on focused field</p> <p>My theme has an area where I can easliy insert custom CSS. It worked for the CSS that you gave me before.</p> <p>Thank you very very much! </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-174787 Mon, 18 Mar 2013 01:29:48 +0000 Chris Hajer 174787@https://legacy.forums.gravityhelp.com/ <p>The dotted lines are coming from your theme stylesheet line 148:</p> <pre><code>[css] /* Line 148 */ #content ul li { background-color: transparent; background-image: url(&quot;images/li-bullet.png&quot;); background-repeat: no-repeat; background-attachment: scroll; background-position: 5px 18px; background-clip: border-box; background-origin: padding-box; background-size: auto auto; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: #d4d4d4; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 15px; }</code></pre> <p>You can override that with the following:</p> <pre><code>[css] body #content .gform_wrapper ul li { background-image: none; border-bottom: none; }</code></pre> <p>For the blue border and background, add this:<br /> <pre><code>[css] body #content .gform_wrapper input { background-color: #ECF5FD; border: 1px solid #AFD2FA; }</code></pre> <p>For the yellow highlight on currently focused fields, add this:</p> <pre><code>[css] body #content .gform_wrapper input:focus { border: 2px solid yellow; }</code></pre> <p>This is all the CSS in one place so you can copy and paste.</p> <pre><code>[css] body #content .gform_wrapper ul li { background-image: none; border-bottom:none; } body #content .gform_wrapper input { background-color: #ECF5FD; border: 1px solid #AFD2FA; } body #content .gform_wrapper input:focus { border: 2px solid yellow; }</code></pre> <p>That is how you target those individual elements. Take a look at the source of your page with the form on it and you will have an idea of how to target each individual element. You can always begin your selector with <strong>body #content .gform_wrapper</strong> which should make your rules specific enough to override other rules in the Gravity Forms CSS and your theme's CSS. </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-174642 Sun, 17 Mar 2013 22:01:33 +0000 esmith813 174642@https://legacy.forums.gravityhelp.com/ <p>Ok, my current form exists on page: <a href="http://dev3.celeer.com/free-consultation/" rel="nofollow">http://dev3.celeer.com/free-consultation/</a><br /> Please provide the style elements to:<br /> -- Remove the dotted lines after each field<br /> -- Put light blue background-color: #ECF5FD; border: 1px solid #AFD2FA;<br /> -- When you are in a particular field the field boarder changes color to yellow (pick whatever web yellow color and i can change later) so easy for person to see which field they are in. </p> <p>Thank you! </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-174620 Sun, 17 Mar 2013 21:27:08 +0000 Chris Hajer 174620@https://legacy.forums.gravityhelp.com/ <p>You cannot add the actual CSS in the form (in Form Setting&gt;Advance&gt; "Class Name") - that is where you could add a class, like "black" or something. Then, in your theme's stylesheet, you could define a class named ".black" and create your style there. Then that style would apply to any field where you added the class. So, in the form settings is where you would add this class. Adding the class there would not do anything until you add the class to your stylesheet.</p> <p>All your styles will be defined in your theme's stylesheet. Here is an exhaustive list of how to style your form elements: <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a></p> <p>If you post a link to the page on your site where a form exists, and let us know what you want to change, we can help you style the element so you know how to do them all. </p> https://legacy.forums.gravityhelp.com/topic/what-are-the-basics-for-changing-colors-fonts#post-174606 Sun, 17 Mar 2013 21:11:12 +0000 esmith813 174606@https://legacy.forums.gravityhelp.com/ <p>Hi,<br /> Please explain the basics of changing form background color, fonts..?<br /> I am not clear on where to add the CSS. Can you add CSS to Form Setting&gt;Advance&gt; "Class Name" field? Or only in the theme style.css file? </p>