Paypal Buttons Distorting

  • I’m hoping someone can help me. I’m not sure if my problem is a Thesis issue or WordPress. I have created some Paypal buttons for my services but when I add the code for them, they are really big and blurred, not the button size I created at all (I’ve created my own buttons in photoshop). It’s not the buttons because I use the same buttons on my other sites (not wordpress, another platform) and they work fine. I can get them to work in the sidebars when I embed the code into a text widget, but not within a post.

    I followed the advice of another podt similar to this but it didn’t work for me. It advised to add .paypal input {width:auto;}to the bottom of style.css which I did and also to…

    When you use PayPal button script, try changing:

    <form method=”post” action=”https://www.paypal.com/cgi-bin/webscr&#8221; style=”text-align: center;”>

    to

    <form method=”post” class=”paypal” action=”https://www.paypal.com/cgi-bin/webscr&#8221; style=”text-align: center;”>

    which could do becasue my Paypla code didn’t have the <form method=”post” action=”https://www.paypal.com/cgi-bin/webscr&#8221; style=”text-align: center;”> to adjust.

    Here’s my paypal code…
    <form action=”https://www.paypal.com/cgi-bin/webscr&#8221; method=”post”>
    <input type=”hidden” name=”cmd” value=”_s-xclick”>
    <input type=”hidden” name=”hosted_button_id” value=”5VNH854F9XPZ2″>
    <input type=”image” src=”https://www.maverickcreative.com.au/assets/images/webelements/paypalbuttons/LLB_BuyNow.jpg&#8221; border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online.”>
    <img alt=”” border=”0″ src=”https://www.paypal.com/en_AU/i/scr/pixel.gif&#8221; width=”1″ height=”1″>
    </form>

    Any advice would be most appreciated, I don’t want to use text links to Paypal, I’d prefer to use Buy Now buttons.

Viewing 12 replies - 1 through 12 (of 12 total)

  • A link to a page on your site that uses these buttons would help.

    Thread Starter victoria-hansen

    (@victoria-hansen)

    Sorry, I read your post about this a few months ago you said the same thing, you’d think I’d tweak. I followed your instructions but got a bit confused. This page isn’t suppose to be published yet and I’ve inserted the paypal button so you can see what’s happeneing. Thanks for your help…
    https://victoriahansen.com/recipe-development-and-testing

    I assume you’ve tried adding the .paypal input class to the CSS AND added class=”paypal” to the input tag for your image? Those would both have to be in place at the same time and from what you wrote it’s hard to tell if you tried them simultaneously or individually.

    So, to clarify you would make the change to style.css

    AND change

    <input type="image" src="https://www.maverickcreative.com.au/assets/images/webelements/paypalbuttons/LLB_BuyNow.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">

    to

    <input type="image" class="paypal" src="https://www.maverickcreative.com.au/assets/images/webelements/paypalbuttons/LLB_BuyNow.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">

    Try adding:

    input[type=image] {width:auto;}

    to your stylesheet.

    Thread Starter victoria-hansen

    (@victoria-hansen)

    OK, SS_Minnow and esmi, thanks for your help. Here’s what I did. I did add the .paypal input at the very end of my style.css, like this…

    /*—:[ self-clearing floats from Dan Cederholm ]:—*/
    ul#tabs:after, #content_box:after, #sidebars:after, .format_text:after, .teasers_box:after, .prev_next:after, ul.sidebar_list:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; }

    .paypal input {width:auto;}

    I didn’t add class=”paypal” to the input tag for my image, didn’t know I had to, or didn’t read the instructions correctly. I’m actually not a programmer guys, I’m a cook who likes technology so while I can figure out bits and pieces, sometimes the jargon eludes me, sorry, so bear with me here.

    I’m the sort of person who can changes bits and pieces within an existing code but notnecessarily figure out how to add extra stuff or know exactly where it should be placed, so I need quite definite instruction please.

    SO in terms of the class=”paypal” to the input tag for my image, can you please explain exactly where in that code sequence that would go, and with regard to the <input type=”image” class=”paypal” src=”https://www.maverickcreative.com.au/assets/images/webelements/paypalbuttons/LLB_BuyNow.jpg&#8221; border=”0″ name=”submit” alt=”PayPal – The safer, easier way to pay online.”> where exactly in my style.css do I put that, overtype it please?

    Sorry to sound blonde.

    If you use the code Esmi posted you do not need to add the class to the input because it will affect all input images. It looks like a very nice solution. Just try putting what Esmi posted into the style.css instead of .paypal input {width:auto;} and see if that does it for you.

    Thread Starter victoria-hansen

    (@victoria-hansen)

    Do I add this at the end of the style.css sheet or somewhere in the middle?

    Thread Starter victoria-hansen

    (@victoria-hansen)

    OK, did this but didn’t change my paypal code at all and it’s still distorting the image

    It should not matter where it is in the CSS. Let’s see if Esmi has other ideas.

    Thread Starter victoria-hansen

    (@victoria-hansen)

    Guys thanks so much for your help but I’ve resolved the problem, not by adding code but by adding an image and using the Paypal Email link to link it to the payments page. It was all getting too hard. Don’t know why I didn’t think of it earlier. If I can link text, I should be able to link an iage. Thanks again, much appreciated.

    ESMI,

    I had the same issue and your suggestion to use input[type=image] {width:auto;} in the css file worked brilliantly. The PayPal button image now displays with the correct/native size.

    Thanks!

    Nice to see that an old topic is still useful. ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Paypal Buttons Distorting’ is closed to new replies.