Changing a color of a button

  • I have been trying to change the color of a button and cannot seem to do it. I have located the css code using my firebug and then I copied and pasted the code into my simple custom css editor, changed the color, updated, and nothing happened. I’m certain there is something I’m doing wrong.

    Specifically, I’m trying to change the “Submit” button on my Contact Page from green to blue. https://www.radtrainingassociates.com/contact-us/

    I copied and pasted this code into my custom css editor:

    #contactsubmit {
    background: #738c00 none repeat-x scroll 0 0;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    padding-left: 23px;
    padding-right: 23px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    transition: background 300ms linear 0s;
}

    What am I doing wrong?!?!?!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    The color appears perfectly fine on my end. Have you tried clearing your browser’s cache?

    Looking at the #738c00 color on https://www.colorpicker.com/ it appears to be a green color rather than a blue.

    Thread Starter radtrain

    (@radtrain)

    Apologies. The color I’m trying to change to is blue (I don’t want green). So the css I have inserted is:

    #contactsubmit {
    background: #2353A5 none repeat-x scroll 0 0;
    border-radius: 5px;
}

    …But, the color is still green instead of blue.

    Are you using a plugin to generate that button? You’ve got some inline CSS written directly to the <head> section and since it comes after your custom CSS plugin, those inline styles take precedence. If you’re using a plugin, you should check its options to see if there’s a way to change the color there.

    You’ve also got a syntax error in your custom CSS plugin just prior to the code you posted:

    .contact-us (
position: relative;
}

    should be

    .contact-us {
position: relative;
}

    Note the opening bracket instead of the parentheses.

    Thread Starter radtrain

    (@radtrain)

    Yes, I’m using a plugin, and I’ve checked the plugin options to see if there is a way to change the color there, but it doesn’t appear there is. That’s the reason for using the css….just haven’t been successful.

    Because I’m using a plugin, cannot overwrite it using css?

    Not exactly. What’s happening is that the plugin is loading its CSS after your custom CSS plugin. Because the plugin’s CSS is loaded last, those rules “win”. You could make your custom CSS more specific:

    #cuform #contactsubmit {
    background: #2353A5;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    padding-left: 23px;
    padding-right: 23px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    transition: background 300ms linear 0s;
}
    Thread Starter radtrain

    (@radtrain)

    Awesome! Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing a color of a button’ is closed to new replies.