Viewing 20 posts - 1 through 20 (of 21 total)
  • Author
    Posts
  • #14587
    questions
    Member

    PayPal “BUY NOW” buttons have too much space above and between the lines…

    How do I remove the extra white space?

    #14611
    Sakin
    Keymaster

    @questions: Sorry I don’t know how you are using paypal button in your site. So, can you send me your site URL where you have added paypak button.

    #14640
    questions
    Member

    I’m just pasting in the code provided. I can’t provide the link to the site however.

    I think if you paste any PayPal button into your free “Catch Everest” theme then you can see that there is too much space above and below it and between each line. I need just 1 natural line break above 1 line between and 1 line below (or one natural <P> size above, between, and below.) I’ve already removed the borders from the tables css using the code you provided in another forum posting.

    Here’s the code I’m using:

    <form action=”https://www.paypal.com/cgi-bin/webscr&#8221; method=”post” target=”_top”><input type=”hidden” name=”cmd” value=”_s-xclick” /><input type=”hidden” name=”hosted_button_id” value=”X8BTVWTUBKXMP” />
    <table>
    <tbody>
    <tr>
    <td><input type=”hidden” name=”xx1″ value=”Quantity” />Quantity</td>
    </tr>
    <tr>
    <td><select name=”xx2″><option value=”Single”>Single</option><option value=”Buy Two”>Buy Two</option><option value=”Buy Three”>Buy Three</option></select></td>
    </tr>
    </tbody>
    </table>
    <input type=”hidden” name=”currency_code” value=”USD” /><input type=”image” alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif&#8221; />

    </form>

    #14642
    questions
    Member

    The biggest problems in spacing here are:

    1) way too much space rendered above this code:

    <td><input type=”hidden” name=”xx1″ value=”Quantity” />Quantity</td>

    2) way too much space above the image for the button:

    <input type=”hidden” name=”currency_code” value=”USD” /><input type=”image” alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif” />

    3) way too much space below the whole set of code, after:

    </form>

    I need a way to just modify the margings/padding or whatever you call it just for this particular PayPal button so that nothing else in the site is changed.

    #14643
    Sakin
    Keymaster

    @questions: Sorry I cannot help without check in your site URL? As it depend on how you have use it. You can build test site or password protected page and send me the url.

    #14645
    questions
    Member

    I can email you the site URL, but it can’t be posted to a public forum.

    But I already told you how I used it. There is no other code on the page. I just copy/pasted the PayPal BUY NOW button code from PayPal into WordPress using your free Catch Everest theme. Just try it yourself and you’ll see “too much spacing”.

    Another way you can help is to tell me how to remove the space around tables. I don’t want any space around the tables (above or below).

    Then you can tell me how to remove the space above and below forms <form></form>.

    I know there is some easy CSS for this.

    #14646
    questions
    Member

    Also there is too much space at the bottom of each page/post, between the page/post content and the footer.

    #14650
    questions
    Member

    Never mind, I answered my own question. Here is how I applied the CSS to have a single image (not all images) without a shadow. I did this because your empty white space is not consistent. With some pages its one way and with others its another way. So I had to insert a spacing image(box) to correctly space and align my page.

    #14651
    questions
    Member

    (cont’d)

    here’s the code that I applied to get a single image (not all) without a shadow effect:

    < img style=”box-shadow: none;” src=”yourimage.png” >

    #14683
    Sakin
    Keymaster

    @questions: I don’t understand why you want to hide the site url. You are using Open Source GPL theme and then hiding site URL. This is strange. Catch Everest Theme is spacious design. So, you will see lot of white spaces.

    For HTML Demo see this http://catchthemes.com/demo/catch-everest/html-elements/.

    I added in your paypal form in Catch Everest Theme, I don’t find any spacing issues. Maybe you have added paragraph tag and all.

    #14708
    questions
    Member

    Regarding the questions about too much white space around tables and forms in your theme:

    http://catchthemes.com/demo/catch-everest/html-elements/

    Scroll down to the table… it has lines (you call the borders) between each row (I already removed those lines in the custom CSS in my site) but now it has 2-3 normal <br> line break space between each table row and it has 4-5 normal <br> space above the table and below the table… how do I change the spacing between the lines in a table? Can you give example of no whitespace, and another separate example of just 1 line of whitespace (above, between rows, and below a table)?

    If you use a <form></form> or <input> it puts even more whitespace above and below a form area. How do I adjust the spacing above, between, and below a form and input fields areas? Can you give example of no whitespace, and another separate example of just 1 line of whitespace (above, between rows, and below a form and input fields)?

    I’m sure these are just simple CSS modifications. I like your theme a lot! Thanks!

    #14746
    Sakin
    Keymaster

    @questions: You can remove the padding in the table by adding in the following CSS in “Appearance => Theme Options > Custom CSS” box.

    .entry-content td {
        padding: 0;
    }

    If you cannot give me the real sire url then you can upload it in your test url and send me.

    #14749
    questions
    Member

    That helped a little. Your code reduced the padding between the input form field and the table row above it, but now there is still too much white space here in these following locations:

    1) above the table and below the table (your code didn’t affect this)

    2) and too much white space below the input (select) form field

    <div style=”display: inline; margin: 0px; padding: 0px;”><span style=”text-decoration: underline;”>text above paypal button</span> xxxxxxxxtext above paypal buttonxxxxxxxxxx<br></div>
    <div style=”display: block; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;”></div>
    <div style=”display: block; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;”></div>
    <div style=”display: block; margin: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;”><span style=”text-decoration: underline;”>BUY SHIRTS</span></div>
    <form action=”https://www.paypal.com/cgi-bin/webscr&#8221; method=”post” target=”_top”><input name=”cmd” value=”_s-xclick” type=”hidden”><input name=”hosted_button_id” value=”x” type=”hidden”><p></p>

    <!— note: <p></p>(above) is not in the code, it’s rendered/added by WordPress —>
    <!— your theme html is rendering too much white space here — >

    <table>
    <tbody>
    <tr>
    <td><input name=”on0″ value=”Number of Shirts” type=”hidden”>Number of Shirts</td>
    </tr>
    <tr>
    <td>
    <select name=”os0″>
    <option value=”1″>1</option>
    <option value=”2″>2</option>
    <option value=”3″>3</option>
    <option value=”4″>4</option>
    <option value=”5″>5</option>
    <option value=”6″>6</option>
    </select>
    </td>
    </tr>
    </tbody>
    </table>

    <!— your theme html is rendering too much white space here — >
    <!— note: <p></p>(below) is not in the code, it’s rendered/added by WordPress —>

    <p><input name=”currency_code” value=”USD” type=”hidden”><input alt=”PayPal – The safer, easier way to pay online!” name=”submit” src=”https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif&#8221; type=”image”></p></form>

    !— your theme html is rendering too much white space here — >
    <!— note: <p></p>(above/below) is not in the code, it’s rendered/added by WordPress —>

    <p><span style=”text-decoration: underline;”>text below paypal button</span> text below paypal button<br>
    text below paypal button</p>

    #14750
    Sakin
    Keymaster

    @questions: Can you paste your code in http://pastebin.com/ and share here.

    #14756
    questions
    Member

    Ok, I set up a private test site.

    http://174.120.146.138/~guigodso/wptest/?page_id=4

    There is too much space:

    1) under BUY SHIRTS

    2) above the BUY NOW graphic button

    #14785
    Sakin
    Keymaster

    @questions: Thanks
    If you change the space below “Buy Shirts”, it will reduce to all paragraph tag as you have added it in paragraph. If you want to change to all paragraph then css will be as below
    #entry-content p { margin-bottom: 4rem; }

    To reduce the space above the BUY NOW graphic button, you need to add the following css in “Appearance => Theme Options => Custom CSS” box.

    .entry-content table, .entry-content td {
        margin-bottom: 0;
    }
    #14786
    questions
    Member

    no, I didn’t put it in paragraph, WordPress adds that code itself.

    #14793
    Sakin
    Keymaster

    @questions: When you write content, just change to text mode in your editor. See this to change your editor to text mode http://en.support.wordpress.com/editors/. After you change the editor to text mode, you need to paste your code without any enter.

    #14807
    questions
    Member

    yeah, I know about that, WP still puts in <p></p> around things

    #14808
    questions
    Member

    try it yourself, you’ll see

Viewing 20 posts - 1 through 20 (of 21 total)
  • The topic ‘PayPal "BUY NOW" buttons have too much space above and between the lines…’ is closed to new replies.