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.

Using Calculations to Determine Child Support

  1. Cara Jeanne
    Member

    I understand the basics of creating a form using calculations. I have seen: http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes & http://www.gravityhelp.com/resources/cssguide/css_guide.html
    however, I still would appreciated some assistance with my project.

    Here is what I have created so far by using the 'number' field:
    http://www.thecivillawcenter.com/forms/

    What I want to do is move field boxes to the right of the sentence text like this example:
    http://www.beaumontdivorce.com/metairie/louisiana-child-support-calculator/worksheet-a

    I did use the label placement option but instead of one long sentence and a box to the right of it, it broke my sentence up as if the div was quite smaller than my page. If I have to increase the div space how do I do that? Also is there a way to set up dollar signs on the forms?

    I understand that your theme is supposed to take on styling for the forms but my forms all look horrible. I want to adjust the space between each line and the size of the boxes, can you tell me where to find any tutorials on further styling outside of the links above?

    Thanks for your help. I have just purchased my license and look forward to using Gravity Forms on my projects!

    Posted 12 years ago on Friday November 9, 2012 | Permalink
  2. Please put the label option back to left, and we'll take a look at it then. With the top label placement, we're going to be much further away than we need to be. Left label placement will get you closer. We should be able to change the size of the div in your theme's stylesheet.

    I'm not sure what you mean about dollar signs. Where would you want them?

    And I don't think your forms look horrible. If you'd like help making them look different, please let us know what elements you're unhappy with, on which page, and we'll take a look for you.

    The resources you linked to have the best information available for styling your Gravity Forms, especially this page http://www.gravityhelp.com/resources/cssguide/css_guide.html

    Posted 12 years ago on Monday November 12, 2012 | Permalink
  3. Cara Jeanne
    Member

    Chris,

    Here is an example of the label option set at left: http://www.thecivillawcenter.com/forms/
    Forget the dollar signs, I would like to focus on styling instead.
    In this example:
    http://www.beaumontdivorce.com/metairie/louisiana-child-support-calculator/worksheet-a
    the enter fields will all contain numbers so their size is small and placed at the far right. All of the questions are on one line and to the left. This is the format I am looking for.

    Really appreciate the help. ~Cara

    Posted 12 years ago on Monday November 12, 2012 | Permalink
  4. Try adding this CSS to your theme's stylesheet. I believe your theme has an options page where custom CSS can be added.

    [css]
    body .gform_wrapper .left_label .gfield_label {
        width: 80%;
        font-size: 14px;
    }
    body .gform_wrapper .left_label .instruction {
        float: right;
        padding-right: 10px;
    }

    That CSS will target the elements. Adjust as desired for your tastes.

    Posted 12 years ago on Tuesday November 13, 2012 | Permalink
  5. Cara Jeanne
    Member

    Awesome - take a look at the form now: http://www.thecivillawcenter.com/forms/
    Much better!

    One more thing - I want to adjust the line height and the css I am putting in doesn't work.

    Here is what I have now:

    [css]
    body .gform_wrapper .left_label .gfield_label {
        width: 80%;
        font-size: 14px;
        font-weight: normal;
        color:#4c4c4c
    }
    body .gform_wrapper .left_label .instruction {
        float: right;
        padding-right: 10px;
    }

    I have tried (placed under font size above):
    line-height: normal;
    line-height: 1;
    line-height: 90%;

    Thanks for your help!

    Posted 12 years ago on Wednesday November 14, 2012 | Permalink
  6. David Peralty

    Looks like you have a rule in http://www.thecivillawcenter.com/wp-content/uploads/dynamik-gen/theme/dynamik-min.css?ver=1352919657

    body {
    line-height: 1.7;
    }

    You would have to override that if you want the line height to be different.

    Posted 12 years ago on Thursday November 15, 2012 | Permalink
  7. Also, be sure you use a unit of measure for your line height.

    To override any rule in your theme's stylesheet, you can always add the !important declaration to the rule, like this:

    [css]
    line-height: 1.2em!important;
    Posted 12 years ago on Saturday November 17, 2012 | Permalink
  8. Cara Jeanne
    Member

    Changing the line height within the themes css affects other elements that I do not want to change for example the paragraph height on the home page will become too tight at 1.2 whereas 1.2 may be perfect for my form. Is there a way to adjust the line height specifically for my Gravity Form?

    Posted 12 years ago on Monday November 26, 2012 | Permalink
  9. Of course. For the rules you add to your theme's stylesheet, just get more specific than the ones already in the stylesheet, and your rules will win. Or, as I mentioned previously, you can add the !important declaration to your rule, and your rule will then override them all. You can target nearly everything in your Gravity Form by using this at the beginning of your CSS rule:

    [css]
    body .gform_wrapper form YOUR_SELECTOR_HERE {

    That would make your rules apply only to elements inside the "body .gform_wrapper form".

    The suggestions David and I made were not intended to have you change you existing body rule; just override the line-height for your Gravity Form, as shown here.

    Posted 12 years ago on Tuesday November 27, 2012 | Permalink
  10. Cara Jeanne
    Member

    This post title has turned out to be misleading! I do need further help with calculations, shall I start another thread? This one really covers styling. Thanks, C

    Posted 12 years ago on Thursday November 29, 2012 | Permalink
  11. There is no harm in starting a new topic for a new issue. It will help us focus support on the task at hand. Thank you.

    Posted 12 years ago on Saturday December 1, 2012 | Permalink

This topic has been resolved and has been closed to new replies.