• Hi all,

    For some reason my submit button gets overridden with a gradient no matter what I do. My index.php has a rogue piece of css in it that looks like it styles a button but I have no idea where it came from or how to remove it! You can see it here.

    Any ideas on how to get rid of it or how to override it with my own button would be greatly appreciated!
    Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi there Brabuhr,
    I took a look at your site for you and the css code that will help you is this

    input[type=”submit”] {
    background: red;
    }
    input[type=”submit”]:hover{
    background: blue;
    }

    This code will change all submit buttons on your site, If you wish to change a specific button you can simply put the class the submit button is under right in front of this code and it will work for that button only. You can change the background to anything you wish, be it an image or a color, i simply put red and blue so that you can see the code in action. As a friendly reminder always make sure that all css changes you make to your theme are done through a child theme or a plugin such as Jetpack. If you don’t know how to make a child theme simply go here

    https://codex.www.ads-software.com/Child_Themes

    The WordPress codex does a pretty good job explaining how to create one. Hope this helps. If you have any further questions don’t hesitate to ask.

    Wolf’s Brain (^_^)

    Thread Starter brabuhr

    (@brabuhr)

    Hi Wolf’s Brain,

    Thanks for the quick reply. Unfortunately I have code similar to that in my stylesheet already (using contact form 7):

    .wpcf7-f890-p788-o1, input[type=submit] {
    background: #3498db;
    border-radius: 10px;
    font-family: Lato, sans serif;
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-transform: uppercase;
    } '

    But it doesn’t override the default gradient that’s being applied somewhere. It’s in some random inline stylesheet that I can’t figure out where is. This is it:

    a:link, a:visited,
    		.primary-color,
    		.menu-main .current_page_ancestor > a,
    		.menu-main .current-menu-item > a { color:#387f6f; }
    		.primary-color-bg,
    		.menu-portfolio .current-cat a { background-color:#387f6f; }
    
    .button-default, .button-default:link, .button-default:visited, input[type=submit] { background:#387f6f;
    			background:-moz-linear-gradient(top, #387f6f 0%, #064d3d 100%);
    			background:-webkit-linear-gradient(top, #387f6f 0%,#064d3d 100%);
    			background:linear-gradient(to bottom, #387f6f 0%,#064d3d 100%);
    			filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#387f6f', endColorstr='#064d3d',GradientType=0 );
    			text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5); border-color:#064d3d; }
    		.button-default:hover, input[type=submit]:hover { background:#387f6f; }

    Thanks for your help!

    Hi again Brabuhr
    If the code still isn’t working and is being overwritten you can always try to use !important. Such as:

    input[type="submit"]:hover {
    background: blue !important;
    }

    That should overwrite any other css that might be affecting it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Theme Intuition] Submit button style overriden’ is closed to new replies.