WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Remove border and centre Paypal button

[Resolved] Remove border and centre Paypal button

  • Hi guys.

    I’m having trouble getting rid of the grey border that my theme is adding around my custom paypal button image. I know this problem has been asked about both here and on other forums all of which suggest adding various different lines of code to the themes’ custom CSS panel. I have tried every different variation I can find and none of them seem to work in my case. I’m no CSS expert so I was wondering if you guys could help me out.

    The button can be found here: http://www.stateofmindrugby.com/cmspages/contact/tshirts/

    The button code is as follows:

    <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="QU99P4XYG2RE8" />&nbsp;
    <table>
    <tbody>
    <tr>
    <td style="text-align: center;"><input name="on0" type="hidden" value="Sizes - What's Yours?" />Sizes - What's Yours?</td>
    </tr>
    <tr>
    <td style="text-align: center;"><select name="os0"> <option value="Small">Small </option> <option value="Medium">Medium </option> <option value="Large">Large </option> <option value="X-Large">X-Large </option> <option value="XX-Large">XX-Large </option> </select></td>
    </tr>
    </tbody>
    </table>
    <input alt="PayPal — The safer, easier way to pay online." name="submit" src="http://www.stateofmindrugby.com/cmspages/wp-content/uploads/2012/10/Buy-Tshirt1.png" type="image" /> <img src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" border="-10" alt="" width="1" height="1" />&nbsp;
    
    </form>

    Whilst I’m bugging you I’m also having trouble getting the button image to centre. When I first set the button up I managed to get it to centre by adding align=”middle” to the code for the image, but I’ve since changed the button and that no longer seems to work. Any suggestions?

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Ok so I resolved the issue with the border. All the CSS code examples I had seen on other forums dealt with the border settings, however in the case of my theme it was the padding that was causing the issue so adding this to the custom css fixed it:

    form input {padding:0px;}

    I am still struggling to get the button image to centre though, can you guys help me with that?

    Cheers

    RESOLVED

    Sorted the centering issue by surrounding the image code a div tag with an align command:

    <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="QU99P4XYG2RE8" />&nbsp;
    <table>
    <tbody>
    <tr>
    <td style="text-align: center;"><input name="on0" type="hidden" value="Sizes - What's Yours?" />Sizes - What's Yours?</td>
    </tr>
    <tr>
    <td style="text-align: center;"><select name="os0"> <option value="Small">Small </option> <option value="Medium">Medium </option> <option value="Large">Large </option> <option value="X-Large">X-Large </option> <option value="XX-Large">XX-Large </option> </select></td>
    </tr>
    </tbody>
    </table>
    <div align='center'>
    <input alt="PayPal — The safer, easier way to pay online." name="submit" src="http://www.stateofmindrugby.com/cmspages/wp-content/uploads/2012/10/Buy-Tshirt1.png" type="image" /> <img src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" border="-10" alt="" width="1" height="1" align="center" />&nbsp;
    </div>
    </form>
    WPyogi

    @wpyogi

    Forum Moderator

    do you mean the size button? It’s centered in Firefox. Make sure to clear any caches.

    WPyogi

    @wpyogi

    Forum Moderator

    But also be aware that “align: center;” is deprecated code — so not advisable to use it.

    In that case what would be the correct code?

    and no I was referring to the “buy it now” t-shirt image, I’ve never had any problem getting the size list to centre.

    Thanks

    WPyogi

    @wpyogi

    Forum Moderator

    For text, it’s “text-align: center;` For elements, it’s generally done using “auto” on the side margins — but the element must be block element and less than the width of the containing element for that to work.

    So in the case of your t-shirt image, you would need to add an id or class to the div containing the image:

    <div id="shirt">

    and then use that in the CSS:

    #shirt {
        margin: 0 auto;
        width: 240px;
    }

    The width would need to be set to approx the width of the image

    Thanks I’ll give that a go.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Remove border and centre Paypal button’ is closed to new replies.
Skip to toolbar