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.

UL and LI killed my style CSS help

Gravity Support Forums » Plugin Support » Gravity Forms

  1. AlikA
    Member

    I have a site:
    http://migrationlawyers.co.za/contact-form

    I styled my Them's UL LI and gravity forms picks it up.
    I dont know of a way i can remove the CSS styling i made site wide to allow Gravity forms to function properly.

    This code should let you see what I am after... the FLOAT and WIDTH is killing me!

    /*Gravity Forms */
#content ul li {
	background: none;
	float: ?
	margin: 0;
	padding: 0 0 22px 14px;
	text-align: left;
	width: 45%!important;
}
    Copy

    http://i.imgur.com/pM3SBA4.jpg
    ^^ This is what I would like to achieve

    Posted 11 years ago on Friday April 26, 2013 | Permalink

  2. Kevin Flahaut
    Administrator

    Looks like you need to be a lot more specific with your style rules.. try this and see how far it gets you..

    [css]
body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
	float: none !important;
}

body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields,
body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
	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;
}

body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
	padding: 0 0 22px 14px !important;
	width: 45% !important;
}

body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields > li.gfield:before {
	content: "";
}
    Copy

    my quick test.. http://i.imgur.com/L0H3rta.jpg

    Also, I see you have some left half/right half ready classes applied to some list items.. if you're not planning a 2 column layout for those then you probably want to remove them to prevent other inheritance issues.

    Hope that points you in the right direction.

    Posted 11 years ago on Friday April 26, 2013 | Permalink

  3. AlikA
    Member

    Wow, thanks... That is Awesome way of targeting the Li fields, thanks for that.

    I do plan on using 2 fields, and that is my main concern really...
    I am very much lost on how to actually make those 2 fields work.

    >>> Another topic - is it me? or id Gravity Forms somewhat difficult to style?

    Posted 11 years ago on Friday April 26, 2013 | Permalink

  4. David Peralty

    It is difficult to style only because we have to work around the stylesheets of every single WordPress theme out there in the market today... We are always refining things though, so if you have suggestions, please let us know.

    I don't know what you mean by your question about the "two fields".

    Posted 11 years ago on Friday April 26, 2013 | Permalink

  5. AlikA
    Member

    The FLOAT is one element that i really dont understand if you remove the following 2 floats everything works, but there is no way that you CAN remove them because any atribute given messes it up.

    Any input will be greatly appriciated!

    body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
    float: none;
}
    Copy

    and

    #content ul li {
    float: left !important;
}
    Copy
    Posted 11 years ago on Friday April 26, 2013 | Permalink

  6. AlikA
    Member

    @David Peralty

    Sorry I meant 2 columns

    in column one i have the form <<< Align Left
    in column two I have an HTML box >>>> Aligned Right
    As shown in the image attached in the first post. http://i.imgur.com/pM3SBA4.jpg

    Posted 11 years ago on Friday April 26, 2013 | Permalink