1 reply to this topic

[93Corvette]

How To Add a "Buy Me a Coffee" (Donate) to Seamus Skin

for the Complete Idiot

*** Very Simple ***

Background.
1. I am using the Seamus skin
2. I want a donate button on my main forum page.
3. I want it easy that a total forum admin idiot (me) can actually do it.

History:
My forum website is to help moms and dads who's family member are in the U.S. Navy. My website never has asked for money from any member. I do it for free. Now, three years later, because of job cuts, I must ask for help. I have to think of a way for my members to help me pay for some of the cost just to keep the website going. I don't want a profit from it, just money to keep everything running and to add other cool things (ie hosting, buying skins, maintaining the website...etc)
Solution:
To add a "Buy Me a Coffee button at the top of my forum page.

Here is a picture of the non-modified Seamus skin:

(See attachement)

1. Paypal has already written the code to have members place on their forum webpage. It is just too simple, and this is coming from a guy that knows nothing about computers. Just go to this link and generate you own code.

*** Note: You must have a PayPal account to get to this link ***

htxps://www.paypal.com/us/cgi-bin/webscr?cmd=_donate-intro

(Note: I put a "x' in the above "https:" so it doesn't hyperlink)

--------------------------

The generated code below will look similar to this:

(Note: I removed my personal info with XXXX)

   <div id="newnavleft">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KXXXXXXXXXXXY">
<input type="image" src="http://www.navyfamilies.com/forum/images/Seamus/misc/PAYPAL_DONATION_BUYMEACOFFEE.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>  
   </div>
   <div id="newnavright">

2. I didn't want to use the stock "Donate" button that Paypal gives you. So I found one while search for a mod to do this. This is the one I'm using. You can easily edit it for your website by opening it MS Paint. This was the perfect size for my home page.




3. So now:

· You have the Paypal code
· You have the Image "Buy me a Coffee"


4, Upload the "Buy Me a Coffee" image to your Seamus/misc folder. Mine is located at:

htxp://www.navyfamilies.com/forum/images/Seamus/misc/PAYPAL_DONATION_BUYMEACOFFEE.png

*** Note: I put a "x" in the http to prevent it from hyperlinking ***

5. Now you need to copy the Paypal code and place it into your Seamus "header".
(Admincp > Styles & Templates > Style manager (select the skin you want to update) > Templates Options (pull down) > Edit Templates > header)
6. Below this code:

   <div id="newnav">'

and above this code

<div id="toplinks" class="toplinks" style="padding-right: 50px;">

ADD the below remark statement (so you can find it easy later)

<!--  ******** New PayPal Donate Code Below ***********  -->
<!-- ****************** The PayPal Code **************** -->


then add your Paypal code:

   <div id="newnavleft">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KXXXXXXXXXXXXY">
<input type="image" src="http://www.navyfamilies.com/forum/images/Seamus/misc/PAYPAL_DONATION_BUYMEACOFFEE.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>  
   </div>
   <div id="newnavright">


then end it with the following remarks:
<!--  ******** New PayPal Donate Code Above ***********  -->
<!-- ****************** End of PayPal Code ************* -->

In the end, you code should look like this:
<div id="blueWrap">
<div id="blueRight">
  <div id="blueLeft">
   <div id="newnav">
<!--  ******** New PayPal Donate Code Below ***********  -->
<!-- ****************** The PayPal Code **************** -->
   <div id="newnavleft">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KXXXXXXXXXXXXY">
<input type="image" src="http://www.navyfamilies.com/forum/images/Seamus/misc/PAYPAL_DONATION_BUYMEACOFFEE.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>  
   </div>
   <div id="newnavright">
<!--  ******** New PayPal Donate Code Above ***********  -->
<!-- ****************** End of PayPal Code ************* -->
  <div id="toplinks" class="toplinks" style="padding-right: 50px;">
<vb:if condition="$show['member']">

Here is a picture of the modified Seamus skin with "Buy Me a Coffee" button:



That's it....

[Sean James]

Thanks heaps for adding this very good and detailed tutorial mate.