WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Remove border and centre Paypal button (8 posts)

  1. wallacemarino
    Member
    Posted 1 year ago #

    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

  2. wallacemarino
    Member
    Posted 1 year ago #

    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

  3. wallacemarino
    Member
    Posted 1 year ago #

    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>
  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    But also be aware that "align: center;" is deprecated code -- so not advisable to use it.

  6. wallacemarino
    Member
    Posted 1 year ago #

    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

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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

  8. wallacemarino
    Member
    Posted 1 year ago #

    Thanks I'll give that a go.

Topic Closed

This topic has been closed to new replies.

About this Topic