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.

Can't justify forum to left with CSS off or on!

  1. Hi there Admin/Rob!

    I just bought the plugin (as well as woocommerce plugin) and am so excited. I ran into a few issues (a lot I was able to fix via support, but with my styling I am really struggling).

    I have tried this with Gravity Help CSS turned on and turned off. Because I want my gravity product options forum to look exactly like my theme, I have no decided to keep it off. Despite that, I am seeing indentations and bullets (the code below did remove the bullet on the "Engraving Option:" line; here is an example: http://doamore.wpengine.com/shop/adar/

    At the end of the day, I really want this to match the other drop down menus (woo commerce drop down menus)

    I have pasted all of this already:

    body .gform_wrapper form .gform_body ul,
    body .gform_wrapper form .gform_body ul li {
    	list-style-type: none !important;
    	list-style-image: none !important;
    	list-style: none !important;
    	background-image: none !important;
    	background: none !important;
    	padding: 0 !important;
    	margin: 0 !important;
    	border: none !important
    }
    .gform_wrapper ul li.gfield {list-style: none !important;}
    #gform_wrapper_5 ul {
    padding: 0;
    }

    Do you have any idea what to do? I am going in circles but really don't know how to change this. It is really important that everything is justified to the left and that the font color matches the rest of the theme.

    I appreciate it so much!

    Posted 12 years ago on Tuesday July 31, 2012 | Permalink
  2. David Peralty

    Try the following to remove the bullets:

    #content ul {
    margin-left: 0px !important;
    list-style: none !important;
    Posted 12 years ago on Tuesday July 31, 2012 | Permalink
  3. Thank you for the prompt reply! It did help me remove the bullets! You're very helpful!

    Could you please help the other concerns I had in my post? Mainly the below:
    1) How do I make the font for the Gravity Form (the radio buttons option) the same format,color, adnd font as my woo commerce options? It seems like they are definitely a different color right now - see: http://doamore.wpengine.com/shop/adar/
    2) How do I vertically align the radio buttons and the corresponding answer choices? Right now my radio button and answer choices are not vertically aligned properly. See same link: http://doamore.wpengine.com/shop/adar/
    3) How do I remove the indentation between the radio button and the answer choices?

    As a reminder when answering these questions, I have and need to keep Gravity Forms css turned off.

    Thanks :)
    Thank you!

    Posted 12 years ago on Thursday August 2, 2012 | Permalink
  4. Can you screenshot item 1 - I can't seem to see the discrepancy here.
    Item 2 seems to align fine when I pull it up in Chrome and Firefox.

    For item 3, drop this into your theme's stylesheet:

    [css]
    .gform_wrapper input[type="radio"] {
    width: auto;
    margin-right: 5px !important;
    }
    Posted 12 years ago on Thursday August 2, 2012 | Permalink
  5. Thanks Rob. Maybe I will just resort to a dropdown-- I appreciate the advice on the radio buttons.

    I want to give you a screenshot for items 1 and 2 -- how do I provide you the screenshot? I don't see a place I can upload attachments!

    Thanks!

    Posted 12 years ago on Friday August 3, 2012 | Permalink
  6. You can use a free service, such as http://tinygrab.com/ or http://skitch.com/

    Posted 12 years ago on Friday August 3, 2012 | Permalink
  7. If this works: https://www.dropbox.com/s/xtb3bd4zdcmhicu/Screenshot%20of%20Problems.jpg

    You will see that the "size" options are actual different font sizes.

    Also, the woocommerce product options are a gray color, but the gravity forms product options title is black.

    Thank you.

    Posted 12 years ago on Friday August 3, 2012 | Permalink
  8. Try these out:

    [css]
    .gform_wrapper .gfield_label {
    color: #757475;
    font-size: 14px !important;
    }
    .gform_wrapper select {
    color: #343434;
    font-size: 14px !important;
    }
    Posted 12 years ago on Friday August 3, 2012 | Permalink
  9. Sorry I am using two threads but I figured I will leave that one for the spacing, and this one for the font issues:

    From the code you provided, the color is 100% better. Thanks. But the font size/text are still different as you can see in the screenshot:

    https://www.dropbox.com/s/xtb3bd4zdcmhicu/Screenshot%20of%20Problems.jpg

    This is the code you provided that fixed the color, but not the font size/text:

    .gform_wrapper .gfield_label {
    color: #757475;
    }
    .gform_wrapper select {
    color: #343434;
    }
    Posted 12 years ago on Monday August 6, 2012 | Permalink
  10. I edited/updated my post to add in font-size declarations. Feel free to change the size value as you see fit.

    Posted 12 years ago on Monday August 6, 2012 | Permalink