Line around Paypal button

HTML & CSS
1

I have a paypal button on my site, but for some reason my theme creates a box around the button, which isn’t how it is supposed to look according to the display at the paypal site. I’ve tried the button with other themes and they doesn’t create the box around it.

I would like to get rid of this box but don’t know enough about css to make the change.

Could anyone advise?

The button is on this page: http://wisdomangermanagement.com/the-wisdom-of-anger/

2

Hi,

You’ve applied a rule to apply borders to all inputs and textareas here:


input, textarea {
background:url("images/img03.gif") repeat-x scroll 0 0 #F9F8F1;
[B]border:1px solid #D2BA29;[/B]
color:#2D2D2B;
font:bold 1em Georgia,"Times New Roman",Times,serif;
padding:2px 5px;


}

Your choices are to add a class to the paypal image and negate the border.

e.g.


    <input [B]class="paypal"[/B] alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" type="image" />

Add this to the css file:


input.paypal{border:none}

Or without changing the html you can do it for modern browsers (ie7 upwards) by addressing only inputs that are type="image.

e.g.


input[type=image]{border:none}

Or remove the border styles from the original rule and apply it selectively as required by adding classes to the necessary elements. Of course this is a lot more work than the other methods and best avoided.

3

Hello there and thanks for your help. I understand how to add the code you say to “add to the css file”. But I don’t know where to “add a class to the paypal image”. Do I add that directly into the paypal button code?

4

Yes, just alter the code as shown, changing this:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" type="hidden" value="_s-xclick" />
<input name="hosted_button_id" type="hidden" value="PW83H86SPCF8U" />
<input alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" /><br />
</form>

to this (see in red):

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" type="hidden" value="_s-xclick" />
<input name="hosted_button_id" type="hidden" value="PW83H86SPCF8U" />
<input[COLOR="Red"] class="paypal" [/COLOR]alt="PayPal - The safer, easier way to pay online!" name="submit" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" type="image" /> <img src="https://www.paypal.com/en_US/i/scr/pixel.gif" border="0" alt="" width="1" height="1" /><br />
</form>
5

OK great, that did it. I don’t want to push my luck, but there is something else there now that doesn’t look quite right. Now there is a slight grey shading remaining around the “pay now” button, which is subtle but still makes it feel not quite right nonetheless. Somehow the style of my site creates that. Is it equally easy to fix?

6

Hi,

It’s the same rule I showed you that’s applying a background image and a background colour to all inputs and textareas.

Cancel the background out in the same class that you added.


input.paypal {
[B]background:none;[/B]
border:none;
}