Tagged: catch everest, white space
- This topic has 20 replies, 2 voices, and was last updated 11 years, 1 month ago by Sakin.
-
AuthorPosts
-
September 16, 2013 at 6:30 am #14587questionsMember
PayPal “BUY NOW” buttons have too much space above and between the lines…
How do I remove the extra white space?
September 16, 2013 at 9:52 pm #14611SakinKeymaster@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.
September 17, 2013 at 2:33 am #14640questionsMemberI’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” 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” /></form>
September 17, 2013 at 2:38 am #14642questionsMemberThe 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.
September 17, 2013 at 2:39 am #14643SakinKeymaster@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.
September 17, 2013 at 2:59 am #14645questionsMemberI 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.
September 17, 2013 at 3:01 am #14646questionsMemberAlso there is too much space at the bottom of each page/post, between the page/post content and the footer.
September 17, 2013 at 4:54 am #14650questionsMemberNever 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.
September 17, 2013 at 4:55 am #14651questionsMember(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” >
September 17, 2013 at 6:08 pm #14683SakinKeymaster@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.
September 18, 2013 at 3:24 am #14708questionsMemberRegarding 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!
September 18, 2013 at 11:36 pm #14746SakinKeymaster@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.
September 19, 2013 at 2:35 am #14749questionsMemberThat 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” 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” 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>September 19, 2013 at 2:39 am #14750SakinKeymaster@questions: Can you paste your code in http://pastebin.com/ and share here.
September 19, 2013 at 6:45 am #14756questionsMemberOk, 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
September 20, 2013 at 2:55 am #14785SakinKeymaster@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; }
September 20, 2013 at 3:16 am #14786questionsMemberno, I didn’t put it in paragraph, WordPress adds that code itself.
September 20, 2013 at 10:53 am #14793SakinKeymaster@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.
September 21, 2013 at 2:35 am #14807questionsMemberyeah, I know about that, WP still puts in <p></p> around things
September 21, 2013 at 2:36 am #14808questionsMembertry it yourself, you’ll see
-
AuthorPosts
- The topic ‘PayPal "BUY NOW" buttons have too much space above and between the lines…’ is closed to new replies.