WordPress.org

1. heavystarch
   Member
   Posted 1 year ago #

   Theme: Thesis
   Site: http://www.reddragonaudio.com/products/m-500-monoblocks/
   PayPal button imgsrc: https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif

   On the page above the PayPal button/img loses transparency when it is inside a
   

   <form>
   <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif">
   </form>

   .
   (the form is part of code for PayPal)

   Posting the image in the body outside of the <form> tags allows transparency. <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif">

   Can something be done in CSS to allow .gif transparency in a <form>

2. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   CSS doesn't control transparency in a .gif file. It's encoded in the file itself. The white background is coming from:

   input, textarea {
   background:#EEEEEE;
   border-color:#AAAAAA #DDDDDD #DDDDDD #AAAAAA;
   border-style:solid;
   border-width:1px;
   color:#444444;
   font-size:1em;
   }

3. heavystarch
   Member
   Posted 1 year ago #

   esmi,

   Thanks for the quick response! I will give it a go.

4. heavystarch
   Member
   Posted 1 year ago #

   Well I have returned failing to find the CSS string you showed me. Where is that bit located?

   I plan to change background:#EEEEEE to background:#000000 but that seems like it may cause issues since this bit is about input, textarea

   Is there a better way to handle this issue than what I have suggested?

   Thanks again!

5. heavystarch
   Member
   Posted 1 year ago #

   .custom input, textarea {
   background:none;
   border:none;
   }

6. heavystarch
   Member
   Posted 1 year ago #

   Yep what I posted above did exactly what I thought it would; it blacked out my my contact form.
   

   .custom input, textrea{
   background: none;

   However I finally figured out what I needed to do! (looks like I need to take CSS-101)

   In my custom.css file I have added this line at the end:
   .custom .paypal_image { border:none; background:transparent; width:auto; }

   Then I added class="paypal_image to the HTML code inside the PayPal <form>

   <input type="image" class="paypal_image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" height="26" width="120" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
   <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
   </form>

Topic Closed

This topic has been closed to new replies.