Donate Button Misaligned in Donate Bar

[Corinne O’Flynn]

Hi there,
I’ve just loaded the Foundation template and am enjoying the simplicity of the design.

I’m having trouble with the donation bar. The “donate” button is appearing as text in the upper left corner of the donate bar, instead of in a “button” of its own on the right side of the bar. Any thoughts?

Thank you
Corinne

[Bill Robbins]

Sorry for the trouble. Could you send me a link to where you’re working on it so I can take a closer look?

[Corinne O’Flynn]

Here is the site:
http://www.rowantreefoundation.org/rtfwp/

[Bill Robbins]

Corinne,

It looks like I created a bug in the button style on Friday. I’ve uploaded an update that you can download and use, or you can add the changes to your current version. Here’s how to do that:

1) Go to the appearance section and select edit to open up the theme editor.
2) From the list of files on your right, choose style.css
3) Look for this spot:

.action-form input.btn, #donate form h4 a, #donate h4 a:visited {
position: absolute;
right: 7px;
top: 5px;
background-color: #3d56d3;
border: none;
color: #fff;
font-size: 20px;
line-height: 1.6;
padding-left: 14px;
padding-right: 14px;
cursor: pointer;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 3px #141414;
-moz-box-shadow: 0px 1px 3px #141414;
box-shadow: 0px 1px 3px #141414;
text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
-webkit-appearance: none;
font-weight: normal;
font-style: normal;
}

and replace it with this:

.action-form input.btn, #donate form h4 a, #donate h4 a:visited, #donate h4 a {
position: absolute;
right: 7px;
top: 5px;
background-color: #3d56d3;
border: none;
color: #fff;
font-size: 20px;
line-height: 1.6;
padding-left: 14px;
padding-right: 14px;
cursor: pointer;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 3px #141414;
-moz-box-shadow: 0px 1px 3px #141414;
box-shadow: 0px 1px 3px #141414;
text-shadow: rgba(29,29,29,0.64) 1px 1px 0;
-webkit-appearance: none;
font-weight: normal;
font-style: normal;
}

4) Find this spot:

#donate form h4 a {
top: 10px;
line-height: 2;
}

and replace it with this:

#donate form h4 a, #donate h4 a {
top: 10px;
line-height: 2;
}

5) Save your changes.

Let me know if you have any other trouble.

[Corinne O’Flynn]

Hi Bill,
That seems to have fixed it, thank you!
I appreciate the quick response.
Corinne

[Bill Robbins]

So glad that worked. By the way, your site is really looking good. If I can help anymore, let me know c

[Corinne O’Flynn]

Thank you!

I was going to try to hack the mail chimp widget to work for my constant contact account, and then I was going to try to add an “e-news” button to the top of the social media bar. If you’ve already done this, I’d love to snag that code. 😉 Otherwise, I am loving this theme and can’t wait to get our site ported over into wordpress!

Thank you

[Bill Robbins]

I did make a Constant Contact sign up for another customer. The code is below:

I don’t have a lot of experience with Constant Contact so you may need to change the form action so it matches your account. Hopefully that will get you started.

[Corinne O’Flynn]

Awesome, thanks! I am totally new to wordpress, can you guide me on where to use this code?

I appreciate all of your help.
Corinne

[Bill Robbins]

Welcome to WordPress! Here’s how to use that code above. Use the theme editor like we did above and this time open up the file called newsletter-bar.php. Replace all the code in the newsletter bar with the code above. Make sure to delete all the existing code and to replace it with all the code above.

You’ll need to replace some of the values in the code above to make it link to your Constant Contact account. I’m afraid I don’t have a lot of experience with Constant Contact so, I’m afraid I don’t have more direction than that.

Let me know if you have trouble.

[Author]

Posts