Button Color

[JohnnyIonic]

Hello,

I have a widget called Genesis - enews extended being used on my home page. I would like to change the color of the subscribe button but do not know how. Can anyone help please?

- johnny
(novice user)

Here is the site I need help with:

http://www.MonicaCityLiving.com

[nutsandbolts]

There should be some CSS rules in your stylesheet related to the eNews widget - it's difficult to tell where to find them since you're using Dynamik, but here is the rule you'd need to look for:

.search-form input[type="submit"], #subbutton {
background: #000000;
border: 1px solid #333333;
margin: 0;
padding: 10px 14px 10px 14px;
color: #FFFFFF;
font-family: 'PT Sans',sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 19px;
cursor: pointer;
text-decoration: none;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

Hi

I'm also looking to change the submit button color, but I can't find the css-code above in the Focus Child Theme I'm using.

Would you know what I should look for to change the submit button color using this child theme?

Best
Miki

http://www.naturaldads.com

[nutsandbolts]

Hi Miki,

Focus uses an image background for buttons, but you could easily remove the image and use a background color instead. Look for this in your stylesheet:

button.button.submit, input[type="button"], input[type="submit"], .genesis-feature a.more-link, .reply a {
background: url(images/button.png) 0 0;
border: 1px solid #859449;
color: #fff !important;
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 16px;
padding: 10px 12px;
text-decoration: none;
text-transform: uppercase;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

Hi Andrea

Thank you for responding. What would be appropriate for me to do here?

I imagine I replace something in this line: background: url(images/button.png) 0 0;

Best
miki

[nutsandbolts]

Yes, you'd want to replace it with the hex code of the color you want. So if you wanted black, for example, you'd change to this:

background: #000;

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

Great.

That worked!

And I see it changes all submit buttons (not just the enews one).

So two follow-up questions for me would be: is there a way to change only the enews submit button? And where would I change the hover color for the submit button?

Best
Miki

[nutsandbolts]

Yes, you can change only the enews button by doing something like this:

.enews input[type="submit"] {
	background: #000;
}

Hover for the enews button would be:

.enews input:hover[type="submit"] {
        background: #fff;
}

For the regular buttons, scroll down a little past the section you edited before (which you might want to change back if you only wanted to change the enews button) and look for this:

button.button.submit:hover,
input:hover[type="button"],
input:hover[type="submit"],
.genesis-feature a.more-link:hover,
.reply a:hover {
	background: url(images/button.png) 0 -40px;
	text-decoration: none;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

thank you again andrea.

i realize this is very specific and professional advice you're offering, and i appreciate your willingness to share.

i've looked at what you suggested.

there's currently no ".enews input" in the css file.

i'm wondering if i enter these fresh, as it were. if so, would you be able to tell me where (eg at the end of the style.css)?

best
miki

[nutsandbolts]

That's correct - you're adding a new specifier since there isn't one yet. Right now it's defaulting to the general style rules for input because there is nothing in the stylesheet to tell it otherwise.

I would put it in the enews section with all the other rules related to the enews widget. That makes it easy to find it if you need to change something later.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

Hello Again Andrea

So I tried what you suggested above and it turns out the settings for the regular buttons overrides the settings for the enews button.

At least if I understood you correctly above (and having changed the previous settings back to their original background image).

Do you think this is the end of the road for this attempt? If it is, I'll make a global change to all buttons as a compromize. If you still believe there's a way to change just the enews button, I'd love to hear how.

Best
Miki

[nutsandbolts]

Nope, you just need to force the enews button changes by adding !important to your style rules.

So, for example,

.enews input[type="submit"] {
	background: #000 !important;
}

(be sure it does before the semicolon at the end of each rule)

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

You're the Lucky Luke of support--faster than your own shadow. Thank you. I'll try that next.

Miki

[nutsandbolts]

If that doesn't work for some reason, let me know. There are a couple of potential reasons it may not, especially since you're using Dynamik.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

will do (though I'm using Focus Pro Child Theme from Genesis).

[nutsandbolts]

Extender plugin maybe? I'm seeing Dynamik's stylesheet when I look at the site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

I wonder how come? No, I'm not using a plugin called Extender. I'm using Optimize Press, a bunch of Genesis plugins, and a few others.

[nutsandbolts]

That's very strange... my browsers seem convinced you're using Dynamik. Not that it matters either way, except Dynamik's CSS is minified and harder to use to hunt down what's going on.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[miki dedijer]

my website is naturaldads.com.

from what i can tell, you're looking at monicacityliving.com.

[nutsandbolts]

Ah, that changes everything! I'm such a doofus. Let me try taking a look at the right site for a change! I kept thinking that didn't seem right but it's the first URL I saw in the thread.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts