Pay Pal button: too much space between your text and button

Don’t be frightened by this long answer. Once you understand it, it’s really a simple answer to a sometimes maddening problem: what’s all this extra white space doing around my PayPal button?

Well, here’s the deal on how to fix that:

First, create a PayPal Button by logging in to your Pay Pal account (easy to open if you don’t have one already), and then using the menu items along the top, go to “Tools/All Tools” and then click “PayPal Buttons” where you can create your button. You will eventually get a button code to paste into your Rapidweaver page. That code will look something like this. With your viewing window stretched out wide, it is 6 lines as shown below:

On your Rapidweaver page, paste that code in a text box, as close as you can to another text box with text in it, and it will appear as shown below:

Notice the big space between the text and the button. Of course, that’s not what you want! Note: this would appear the same way as shown below even if you put both your text and button code in the same text box, which I wouldn’t recommend (see the “Extra important trick” at the bottom of this post for the reason why).

The problem has to do with line spacing in the PayPal code.

And this isn’t as obvious as it should be in looking at the PayPal code because the code for a line break (which is actually just a line space, which is our problem) is “< br>” or “< br />” and you don’t see that in the code PayPal had you paste in your page. But if you go to your browser and look at the source code in that browser, you will see the line break code (either “< br>” or “< br />”).

Anyhow, here’s the simple fix:

Run lines 2, 3 & 4 together, as if they were just one line of code (lines 2, 3 & 4 all begin with “<input type”). What you’ve done is close up 2 line breaks. With your viewing window stretched out wide (note: line 2 was so long it ran around to the next line, but it is still just 1 line), you will now have 4 lines of code (instead of 6) as shown below:

On your Rapidweaver page, paste that code in a text box, as close as you can to another text box with text in it, and together it will appear as shown below. Which is the way I expect you’d like it to be.

Extra important trick:

Here’s a cool way to really fine tune the space between text and button and a slightly different way of addressing our space problem. Run all the lines of the PayPal code together, as one line of code, and your text and button would have no line space between them. Try it. They would be as tight together as they could be. Then, assuming the text and button code are each in their own separate text boxes, using the margins/bottom adjustment feature, you could fine tune the space between the 2 items to whatever you want. This is just another way to work on this. And in the end, it might be your best way of dealing with the “too much white space” problem.

Well, that’s it.
I guess I could of just posted the one small “Extra important trick” paragraph and let it go with that. But I wanted you to fully understand the whole deal and what the problem is. I guess that goes for life as well.
Hope this helped.

7 Likes

Thank you so much!! This really worked for me. I couldn’t find the answer anywhere else.

Hi Ellen. Glad my post helped out.

It’s interesting to me that it’s been over a year since I posted my Pay Pal button info, and you’re the very first person who actually mentioned having this problem on this forum. Although I do see 7 likes on my original post, so I guess there were a few other folks who had a problem with this too. But still, I guess very few people thought that extra white space was an issue at all. Or perhaps they figured out another way to fix the problem. I’d be interested to know if there is another answer to all this. I’m a graphic designer and as such I’m always trying to make all the page elements look and work the best that they can.

2 Likes

Hi Don and Ellen…

From what you are describing RW is seeing your buttons as text and not code which means every line return will be “rendered.” (shown)

I’m just curious… when you paste in the code are you highlighting it and “clearing” or “ignoring” formatting (Format menu) - The number of lines you have split the code into is irrelevant if you make sure RW sees it as code and not text. ANY code pasted into a text area should be set as “ignore” formatting.

From what you are describing RW is seeing your buttons as text and not code which means every line return will be “rendered.” (shown)

You can really close things up if you also set your text on the same line as the paypal code, making sure the code only is “cleared” of formatting.

“Ignore” formatting is good to use as it will “highlight” the code which indicates that the code is in fact being interpreted as “code” by RW and not text…

1 Like

I used the grid stack drop-in to look like this…

which resulted in this…


by using html stack with
for spacing the item
and padding for the cart
and the “extra important trick” for aligning the paypal button.
Thanks to all who contributed on this topic.

oops…should read
“by using html stack with a line break tag for spacing the items in left column.”

Also looks good on iphone 8…

Hi David
Just for everyone’s general info, using the code explanation I posted above on Jan 2017, here’s how my button looks on one of the latest sites I’m working on. By the way, I used a customized button that I created, that kept my site color scheme. Here’s that website address, which is still in the working stage: http://thedesignbeacon.com/kikiet.com/

And here’s how to reach the pay pal button:

Home page… click menu button:
k-1

On the center menu column, click the “Purchase A Handbag” link:
k-2

This page appears. Click an image:
k-3

And you get to the page with the Pay Pal Button:
kikiet-4

And finally here’s how the code looks like in RapidWeaver.
Which is the same page as the above image:
k-5

Thanks Don,
Very smart site. You can tell I’m not a graphic designer :cry:, but I am selling information/training in a small niche market. I have noticed my sales declining on a reciprocal rate to the advent of smart phone usage. My old sites were not mobile friendly, so I have just begun rewriting and found RW and this is my first effort. Not live yet till I get the SEO stuff in place. Very happy so far with RW.
Much of the info I need I find on the forum and was glad to find your article on Paypal button placement. It worked well for me…thanks for sharing.
I hope that RW 8 will incorporate a fix to the publishing/orphan files issue.
David

Thought I’d just mention this about Paypal buttons:

you can create any kind of button you want

and don’t have to use the default orange button that Paypal gives you in its coding. The button can be round, square, or any odd shape you want, with any text inside that button.

I posted a site here last week, two postings above this, http://thedesignbeacon.com/kikiet.com that showed a kind a normal looking, but still custom colored, button. Thought I’d show another site with a different kind of “custom” button, this time my own artist watercolor painting website, that I’ve been working on. The buttom is a simple watercolor background with type over it that I created in Photoshop . Thought it went with the watercolor theme of the site.

Here’s what it looks like:

paypal%204

And here’s the site address where this button was used: http://donkingartist.com
In the menu bar of this page, click on the “Purchase” menu button at the top of the page, and you’ll be directed to the Paypal buttons page. Here’s a screen shot of part of that page showning my “watercolor” button:

And finally, if you’re interested, here’s how I create that custom button.
Started with a simple watercolor:

paypal%203

And in Photoshop I modified its shape to make it skinnier, changed the color a little, and added text. In this case I kept the edges squared off, but could have silhouetted the shape and made it fit the outline of the color so it didn’t have straight edges.

Then the image was uploaded and added to my site files (I use Cyberduck).

And lastly, I created the code for this new custom button in the Paypal button section.
Here’s how that was done:

Here’s the line I used in the “Use your own button image” section, circled in red above:

Notice in the file name (comments In red above) I said the image can be a .png or .jpg. You can use either. I always use a .png (pronounced “ping”… because the white background becomes transparent in the Photoshop final when you save it as a .png)

Well that’s it.
Hope this helped out in understanding that you aren’t locked in to using that awlful looking (but yes it does stand out and people are used to it) orange Paypal button. For me, I’ll always choose what looks better on the site. And in my opinion, being the professional artist that I am, orange most times doesn’t look good.

The bottom line on all this:
using the coding I posted here on Jan 2017 (above posting) and using a custom button you created… you can position a button any way you want and create any visual look you want for that button!!!

Don,
as we say in Australia, Maaaate, you’re a LEGEND!
Thanks for sharing your very informative tips on Paypal Stuff. They will be filed away somewhere in that computer between my ears, and hopefully will re-emerge at the appropriate time in the future. For now I have to get on with creating a site that is mobile friendly, fully responsive and SEO and Google compatible. For the moment the generic paypal buttons will stay cos they have been incorporated already and have been tested and are working. I will get it all working first and then beautify it later.
Thanks for your time and jelp in educating a 75yo newbie.
Regards,
david

After a long time looking at this “watercolor” button, I realize it would look soooooo much better on a white background than the black background I’m using it in right now. Redoing the entire site soon, so I just might make the new site background white!