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.

CSS Overriding Layout

  1. howardhyoung
    Member

    I've read through the forums and I think I have the same problem that a lot of others have experienced where the theme's CSS is overriding the layout. The preview looks perfect but when it's placed on a page it doesn't look good.

    I went through the style.css but I'm not sure where the problem lies. I'm assuming it's in this section of code. Any thoughts?

    /* #Forms
    ================================================== */
    
    	form {
    		margin-bottom: 20px; }
    	fieldset {
    		margin-bottom: 20px; }
    	input[type="text"],
    	input[type="password"],
    	input[type="email"],
    	textarea,
    	select {
    		border: 1px solid #ccc;
    		padding: 6px 4px;
    		outline: none;
    		-moz-border-radius: 2px;
    		-webkit-border-radius: 2px;
    		border-radius: 2px;
    		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    		color: #777;
    		margin: 0;
    		width: 110px;
    		max-width: 100%;
    		display: block;
    		margin-bottom: 20px;
    		background: #fff; }
    	select {
    		padding: 0; }
    	input[type="text"]:focus,
    	input[type="password"]:focus,
    	input[type="email"]:focus,
    	textarea:focus {
    		border: 1px solid #aaa;
     		color: #444;
     		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
    		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
    		box-shadow:  0 0 3px rgba(0,0,0,.2); }
    	textarea {
    		min-height: 60px; }
    	label,
    	legend {
    		display: block; }
    	select {
    		width: 120px; }
    	input[type="checkbox"] {
    		display: inline; }
    	label span,
    	legend span {
    		font-weight: normal;
    		font-size: 13px;
    		color: #444; }
    Posted 7 years ago on Saturday January 5, 2013 | Permalink
  2. I'm not sure of the official way to do this, but I ended up overriding all of the GF styles by making sure I placed an !important in my declarations. So for example, this works quite nice:

    .gfield input[type="text"] {
        border: 1px solid #CCCCCC !important;
        border-radius: 2px 2px 2px 2px !important;
        color: #888888 !important;
        font-family: inherit !important;
        font-size: 16px !important;
        padding: 6px !important;
    }
    Posted 7 years ago on Saturday January 5, 2013 | Permalink
  3. You can use the !important rule any time you find yourself unable to use a more specific selector to override a theme or plugin style. Normally, you can do something like this to have a more specific rule in your stylesheet:

    [css]
    body .gform_wrapper form .gform_body
    .gfield input[type="text"] {

    The more specific your rule, the better chance you have of your rule being applied above all others. You can read more about CSS specificity here: http://css-tricks.com/specifics-on-css-specificity/

    Posted 7 years ago on Sunday January 6, 2013 | Permalink