PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

What are the basics for changing colors, fonts?

  1. esmith813
    Member

    Hi,
    Please explain the basics of changing form background color, fonts..?
    I am not clear on where to add the CSS. Can you add CSS to Form Setting>Advance> "Class Name" field? Or only in the theme style.css file?

    Posted 7 years ago on Monday March 18, 2013 | Permalink
  2. You cannot add the actual CSS in the form (in Form Setting>Advance> "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.

    All your styles will be defined in your theme's stylesheet. Here is an exhaustive list of how to style your form elements: http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    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.

    Posted 7 years ago on Monday March 18, 2013 | Permalink
  3. esmith813
    Member

    Ok, my current form exists on page: http://dev3.celeer.com/free-consultation/
    Please provide the style elements to:
    -- Remove the dotted lines after each field
    -- Put light blue background-color: #ECF5FD; border: 1px solid #AFD2FA;
    -- 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.

    Thank you!

    Posted 7 years ago on Monday March 18, 2013 | Permalink
  4. The dotted lines are coming from your theme stylesheet line 148:

    [css]
    /* Line 148 */
    #content ul li
    {
      background-color: transparent;
      background-image: url("images/li-bullet.png");
      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;
    }

    You can override that with the following:

    [css]
    body #content .gform_wrapper ul li {
        background-image: none;
        border-bottom: none;
    }

    For the blue border and background, add this:

    [css]
    body #content .gform_wrapper input {
        background-color: #ECF5FD;
        border: 1px solid #AFD2FA;
    }

    For the yellow highlight on currently focused fields, add this:

    [css]
    body #content .gform_wrapper input:focus {
        border: 2px solid yellow;
    }

    This is all the CSS in one place so you can copy and paste.

    [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;
    }

    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 body #content .gform_wrapper which should make your rules specific enough to override other rules in the Gravity Forms CSS and your theme's CSS.

    Posted 7 years ago on Monday March 18, 2013 | Permalink
  5. esmith813
    Member

    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..

    Here is my form page: http://dev3.celeer.com/free-consultation/

    I need a form like this: http://screencast.com/t/2kMh0Gv5.
    Can you create the CSS so it looks like this?
    - I believe each container is about 500 px wide. Light blue color with darker blue border
    -3 Containers: Personal Information, Contact Information, Other Information
    -Adjust the spacing so everything fits clean in the containers
    - Yellow highlight on focused field

    My theme has an area where I can easliy insert custom CSS. It worked for the CSS that you gave me before.

    Thank you very very much!

    Posted 7 years ago on Tuesday March 19, 2013 | Permalink
  6. 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.

    Our styling documentation is very good and shows you how to target every element in a Gravity Form: http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Posted 7 years ago on Tuesday March 19, 2013 | Permalink
  7. esmith813
    Member

    dang!.....do you charge for your services? how much?

    Posted 7 years ago on Wednesday March 20, 2013 | Permalink
  8. I'm sorry, we don't do any sort of client work or consulting. You can find help on our job board here http://www.gravityhelp.com/forums/forum/job-board 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.

    Posted 7 years ago on Thursday March 21, 2013 | Permalink