SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Line around Paypal button...

    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/
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    input, textarea {
    background:url("images/img03.gif") repeat-x scroll 0 0 #F9F8F1;
    border:1px solid #D2BA29;
    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.
    Code:
        <input class="paypal" 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:
    Code:
    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.
    Code:
    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by fifthhouse View Post
    Do I add that directly into the paypal button code?
    Yes, just alter the code as shown, changing this:

    Code:
    <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):

    Code:
    <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 class="paypal" 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. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,486
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    input.paypal {
    background:none;
    border:none;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •