Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You make your changes in the Child Theme style.css file; overriding old styles with new ones.
Yes, thanks Andrew. I am looking to make the changes in my child CSS (which I linked to in my first post).
The screenshot doesn’t seem to help because it’s not code in the CSS and it doesn’t control the look of the Send button. It does however, show where the loading image is stored (arrows going round and round).
Any ideas on how to replace/change the send button?
Ah-ha! I figured it out. For anyone else, here’s the code in my child theme that I changed (clearly, in the theme’s CSS):
/* Buttons */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
background: #5DC2A5; /* Old browsers */
background: -webkit-linear-gradient(top, #5DC2A5 0%, #3a997e 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #5DC2A5 0%, #3a997e 100%); /* W3C */
border: none;
border-bottom: 3px solid #3a997e;
border-radius: 2px;
color: #fff;
display: inline-block;
padding: 11px 24px 10px;
text-decoration: none;
}
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus {
background: #5DC2A5; /* Old browsers */
background: -webkit-linear-gradient(top, #5DC2A5 0%, #3a997e 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #5DC2A5 0%, #3a997e 100%); /* W3C */
outline: none;
}
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
background: #5DC2A5; /* Old browsers */
background: -webkit-linear-gradient(top, #5DC2A5 0%, #3a997e 100%); /* Chrome 10+, Safari 5.1+ */
background: linear-gradient(to bottom, #5DC2A5 0%, #3a997e 100%); /* W3C */
border: none;
border-top: 3px solid #3a997e;
padding: 10px 24px 11px;
I changed all of the hex color codes.
