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.

Stylesheet example,

  1. bram
    Member

    I installed gravity form and added it to my website, but the entire form looked distorted.

    As if i made a list it added bullet points and the titles were all over the place.

    Can i find a standard stylesheet that i can add to my current stylesheet so that it overrides the settings it's getting from the original stylesheet from the theme?

    /edit, okay so i removed the li buttons, but the rest is not right either.

    http://www.imagebam.com/image/2d378197146869

    If anyone could perhaps help me out with a standard list of css than this way i could paste this in my stylesheet and modify it.

    I've seen the documentation about the CSS codes btw.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  2. The screenshot doesn't really help to debug much here. If you can post a URL to the actual form it would be preferred.

    Gravity Forms comes with it's own default style sheet. It sound's like it's not being loaded on your theme page. You need to make sure that your theme has the wp_head() call in the header.php file, and the wp_footer() call in the footer.php file so the appropriate Gravity Forms styles and scripts can be loaded.

    http://codex.wordpress.org/Plugin_API/Action_Reference/wp_head
    http://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer

    If those do exist in your theme, you want to go to the Gravity Forms settings page, and confirm that the "output CSS" option is set to "yes"

    If you've confirmed both of these and still have issues, just let me know and we'll track down the issue from there.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  3. bram
    Member

    Hi Kevin,

    Thank you for your prompt response.

    Here's a link

    http://tinyurl.com/36vmnur

    It both has the header and footer calls. CSS output is turned on too.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  4. Wonderful. That helps immensely.

    It looks like the CSS is being loaded properly but you have a style on line 563 of your style.css file that floats all labels to the left. This is causing your layout problem.

    If you disable/remove that, you'll see that the default "top label" formatting works as intended.

    screenshot

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  5. bram
    Member

    im going to give it a go and report back.

    Thanks,

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  6. bram
    Member

    Alright kevin,

    as far as i can see it didn't jeopardize any of the other styling settings of the site.

    it made it look normal again.

    As far as the submit button goes. Do you have any idea on how i could turn the button into an image? and have it float on the right side?

    Thanks again.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  7. If you want to use an image for the form button you would edit your form, then edit the form settings (where you set the form name/description) and select the Advanced tab and you can choose to use an image button and set the path to that image.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  8. Following up on Carl's post.. once you've swapped to the image, you can float it to the right by adding this to your theme's style.css file.

    #gform_wrapper_1 .gform_footer input {float:right;}

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  9. bram
    Member

    thanks for the support guys,

    if only other developers were like this.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  10. bram
    Member

    im probably pushing my luck here,

    but since you are providing so many stylesheet options,

    do you have any codes that let me able to modify the titles and the actual input fields to represent the same look as what i had?

    This way i can start experimenting with the codes from the original style.css

    thanks again.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  11. Looking at your style.css file, the forms styles are on lines 734-780. They're specifically targeted to any forms inside an ordered list with the class "forms".

    You can try removing the "ol.forms" from the beginning of each rule and then your Gravity Forms should inherit those properties. You may have to tweak it a bit, but I think that will get you pretty close.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  12. bram
    Member

    i'll have a look at it thanks,

    as for the labels, the advanced pre-sets are great for the address and what not, but they are in english. Will there be a manual way to edit those in a future release, or am i looking in the wrong spot to alter those.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  13. You can change these with a filter. Check out this previous thread for more information.

    http://forum.gravityhelp.com/topic/uk-specific-address-help#post-2327

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  14. bram
    Member

    awesome

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  15. bram
    Member

    alright got that sorted, nice.

    got some more questions (A)

    - The form is somewhat centered, can i get it aligned to the left?
    - the address preset has a smaller font for the labels, can i make them as big as the rest?
    - although you can set the sizes for the individual forms to small, medium, large, is there a way to make all of the forms fit to a maximum size?
    - i have all the other fields pretty much the way i want, but .ginput_left and right doesn't seem to be listening to the code that i gave it. Same for ginput_full, it adds a border around the entire thing etc.
    - if you don't fill out a required field, the field jumps to the left
    - once submitted, the page keeps loading.

    Thanks again guys, it's almost integrated.
    im not much of a coder so pardon my persistency

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  16. bram
    Member

    - fixed the first bit, margin-left; - px

    edit, but doing so, when you don't fill out a required field, the red marking goes half missing on the left.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  17. I don't really understand what you're trying to do with the .ginput_left and right classes. I also didn't see the issue with the required asterisk.

    This should resolve the spacing issues and also set all of the field widths to the max.

    /* remove margins and padding from form list */
    
    ul.gform_fields {margin:0!important}
    ul.gform_fields li {padding:0!important}
    
    /* make all field size classes the same width */
    
    input.large, select.large, input.medium, select.medium, input.small, select.small {width:92%!important}

    I tested your form and it did take a few seconds to submit but was successful.

    screenshot

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  18. bram
    Member

    Hi,

    im trying to get every field to look the same.

    That's why im changing the css .large, etc etc,

    but when i add the same styling to input left and right it won't change the field size etc and look.

    and how could i make the smaller text font for the address to be the same as the rest.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  19. If I understand correctly, you want these fields to not be side by side, but displayed as large block fields like the .ginput_full class.

    If that's the case, try adding this to your stylesheet.

    .gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right {float:none!important; width:100%!important; margin:0!important; padding:0!important}
    .gform_wrapper .field_name_first input, .gform_wrapper .ginput_complex .ginput_left input {width:92%!important}

    my test screenshot

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  20. bram
    Member

    Hey Kevin,

    No i meant the height and the styling of the address, or any other field other than the regular, medium, large, etc.

    If you look closely, they look different than the rest of the fields.

    But i can't seem to find the code or ID to make the fields for the address to look the same as the rest.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  21. Missed the other part there.. this will adjust the sub-labels in the complex fields to be the same size and style as the others.

    .gform_wrapper .ginput_complex label, .gform_wrapper .gfield_time_hour label, .gform_wrapper .gfield_time_minute label, .gform_wrapper .gfield_date_month label, .gform_wrapper .gfield_date_day label, .gform_wrapper .gfield_date_year label, .gform_wrapper .instruction {font-weight:bold; font-size: 12px;}

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  22. Okay, you just use CSS inheritance for that.

    .gform_wrapper .ginput_complex input, .gform_wrapper .ginput_complex select {border:1px solid #D9D9D9; padding:5px}

    if you're not that familiar with using CSS inheritance and specificity, this is a good article to read up on it.

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

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  23. bram
    Member

    im okayish with editing pre existing code, but not from scratch im afraid.

    im gonna have a look at it.

    thanks again!

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  24. bram
    Member

    the sub label font doesn't want to get any bigger.

    Thanks again for all the support, top notch.

    Posted 9 years ago on Friday September 10, 2010 | Permalink
  25. You may have to use the !important statement on the rule to override the other value. Sorry, I didn't think about that the first time.

    .gform_wrapper .ginput_complex label, .gform_wrapper .gfield_time_hour label, .gform_wrapper .gfield_time_minute label, .gform_wrapper .gfield_date_month label, .gform_wrapper .gfield_date_day label, .gform_wrapper .gfield_date_year label, .gform_wrapper .instruction {font-size: 12px!important;}

    Posted 9 years ago on Saturday September 11, 2010 | Permalink
  26. bram
    Member

    everything else looks spot on, but the sub labels won't budge,

    they look off, other than the rest. with 12px they look too big, other font as found in the stylesheet makes them look weird too. I normally use inherit to get the right font.

    And the field text looks different for the address fields than other fields.

    i gotta fix this and than im good to go.

    Posted 9 years ago on Saturday September 11, 2010 | Permalink
  27. Give this a shot.

    .ginput_complex input, .ginput_complex select {font:inherit!important}
    .ginput_complex label {letter-spacing:normal!important}

    test screenshot

    Posted 9 years ago on Saturday September 11, 2010 | Permalink
  28. bram
    Member

    had to do a little tweaking but i think i got that now.

    Is there a way to get the sub titles from the address above the fields, instead of underneath it? It looks a bit weird. The city and zip code fields looks nice with the sub titles underneath the fields, but then for the address field it looks weird because the rest doesn't look like that.

    I also tried to move the right ginput a bit to the right by adding a margin-left: 2px; but it didn't move.

    thanks again for your help.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  29. looks like you left the main address field label off. You should be able to add that in the admin and it will look consistent.

    I used this to bump the postcode field over to the right. It worked okay for me

    #input_1_9_5_container {margin-left:3px}

    screenshot

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  30. bram
    Member

    I did that on purpose because it's confusing.

    All the other tags are on top of the field, and for the address section the address, zip etc are underneath it.

    any way of switching those round?

    im gonna give the code a try. I didn't include the 1 9 5 container.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  31. You can do this with some absolute positioning and margin tweaks. I used this to move the sub-label for the street field.

    /*--- move sublabel for street field --- */
    
    #input_1_9_1_container {position:relative}
    #input_1_9_1_container input {margin-top:21px; margin-bottom:8px}
    #input_1_9_1_container label {position:absolute; top:0px; margin-top:0;}

    screenshot

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  32. bram
    Member

    Thanks for all the help.

    I got everything the way i want it now and for the future i'll have a better idea how to use the code to modify the form.

    Maybe an idea to have these kind of codes in a document for beginners to make them more at home with CSS ?

    The only remainder is the language that i'd like changed with the pot file, but i mentioned this somewhere else.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  33. bram
    Member

    Kevin why is it possible that the input text is different for the address fields compared to the other fields?

    And is there a simple way to have to columns next to each other?

    I did

    #input_1_6 {float:left; width:25%;}
    #input_1_4 {float:right; width:25%;}

    but it won't have the right column next to 1_6

    ps: Im bookmarking all of this and make copies so that i can use it all on other forms too without having to have ask for everything in the future :P.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  34. There is a visual CSS guide that we make available for reference.

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

    The differences that I guess you refer to probably are just because of different containing elements and the way they are targeted in the CSS. For example, a lot of theme authors add styling like this..

    input[type=text] {color:red}

    and call it a day. In actuality, there are several other field types that won't inherit from this rule - tel, url, email, etc.

    We try to cover as much as we can with the default styles, but it's always going to vary somewhat based on what styles are inherited directly from the theme.

    To answer you other question, no, there's not really one "simple way" to create 2 columns everywhere. It depends on the types of fields that you want to break into columns, etc.

    Usually, you adjust the width & float the first containing <li > element and then every other one to create the 2 columns. You just have to get those li id's and then apply everything properly. It takes some tweaking and is generally form-specific.

    example from your form

    /* --- reset the width of the containing list items --*/
    li#field_1_6, li#field_1_4 {width:50%}
    
    /* --- float just the left one & the right will float up automatically --*/
    li#field_1_6 {float:left}

    screenshot

    Now, another note, you'll see that because we reduced the width on the containing list item, the input is smaller (the widths are defined in percentages) so you may have to tweak those values a bit to get them where you want them.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  35. bram
    Member

    took quite some tweaking here and there, i think i got it in the right place now.

    one field is set per percentage, the other with pixels.

    couldn't get it any other way fixed the proper way.

    I'll make sure I mention gravity forms to others when they are looking for a good form with a+ support.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink
  36. Cool Thanks. I'm happy I could help.

    Posted 9 years ago on Sunday September 12, 2010 | Permalink

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