Some hints and tips for RIBI Template Practitioners



The following panels cover some of the less commonly used facilities of the Template and which seem to be perennials on the Webmasters Forum

The other panels on this page will assume you have some basic skills, notably

Having multiple programs running and being able to switch (or toggle) between them.

- I do this with my PC and Windows - yours may be different so I can't give you specific tips on this

Being able to open files with more than one application (specifically Open .htm file with Notepad)

- I use Windows Explorer or My Computer and right click on the file I want to open

When you get to creating and editing Paypal buttons you may find it convenient to do your trial and error within Notepad - ie.

Copy Paypal cade and paste it int a blank notepad file; save the page as mypage.(b)htm

Open that page with your browser. (Double click in Explorer).

Edit the page with Notepad, Save it and Refresh your Browser. Repeat these as needed that Select all, Copy and Paste into your template page.

You can edit an htm page by rightclick in Explorer and Open with..Notepad.
An Event always has two components plus an optional one.

They are


You start by cretaing the Event page and the Registration Page then Activate the event on the homepage.

The Event Page


This is created and edited under Public Pages - Events
It is like a What We Do page plus a start and finish time for the event
Make sure the start date is in the future.
I think of it as being in two halves.
the upper half is descriptive with images etc - the poster for your event
the lower half has the facilities for buying tickets giving the visitor the cahnce to buy NOW!
the easieat way to do this is to copy the Registration Page into the lower half so you can leave that blank in the first draft, copy it in when it is working.



The Registration Page


This might be on another web site but t can be a What We Do page so we'll take that route.
This is a normal Active Non-sticky What We Do Page
Its purpose is give immediate access to the Paypal buttons with the least clicks for experienced visitors
Initially I suggest you rough it out with

******

ADD TO CART

******
where you want that button to go (and same for **** ViEW CART *****)

You need to know its URL so Save the page and go Club Home - find the page under What We Do and make a note of the URL



The Homepage Event Link (Public - Home Page Options - event highlight area


The template offers you a pull down where you select your Event Page
In Button Test - put something like Buy Tickets Now
In Button Link URL - put your Registration Page's URL



Now - go to Club Home Page and your event should be featured, try the Event Details and Buy Tickets Now button to get a feel for what is where.

Edit the two pages until you are happy with their appearance, albeit with dummy buttons.

Then create the Paypal code as descibed in the relevant Panel

Then put the Buttons into your Regstration Page - see the relevant Panel

Check the functioning of the buttons on the Registration Page

Then copy the code of the Registration Page and Paste it at the bottom of the Event Page - see the relevant Panel




You will need

You can spend some time getting Not With Profit accrediation at Paypal which reduces your fees and can help with getting tax relief on donations but you don't need that to make working buttons

Open Paypal in a fresh tab in your browser and login


This is the sequence I followed after logging into Paypal



For starters - create an Add to Cart button. Don't get hung up on details - just try what seems right - (you can always come back and change things)

Give your button a name. You might have several buttons in due course so they need an identity.

In stage 3 you will need the URL of your Registration Page as the page to return to after Paypal

Press the button to Select the code and copy it (Ctrl+C)

Go back to the Template Registration page in Club Admin Area and Update Page

Swich to code view (</>) - at this time I find fullscreen best.

Look down your page for the ***** ADD TO CART ***** dummy entry

To make it more readable you can put in breaks (Enter) like this

Look down your page for the dummy entry


*****

ADD TO CART

*****



Now delete ADD TO CART and paste in the Paypal code (Ctrl+V) It should slot in beteween the two asterisk lines like this (this is my button and my italics)


*****

<form target="paypal" 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="TPF7UD2KM4BSW"><table><tr><td><input type="hidden" name="on0" value="Entrants">Entrants</td></tr><tr><td><select name="os0"> <option value="Santa Dash (Adult)">Santa Dash (Adult) 10.00 GBP</option> <option value="Santa Dash (Junior)">Santa Dash (Junior) 10.00 GBP</option> <option value="5K Run">5K Run 10.00 GBP</option></select> </td></tr><tr><td><input type="hidden" name="on1" value="Entrant's Name">Entrant's Name</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr></table><input type="hidden" name="currency_code" value="GBP"><input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1"></form>

*****




Lastly Delete the asterisks reduce the screen to normal, change back to Editor view (</>) and save (update page )

Preview the Registration page - try the button if you like - you don't have to buy!

Toggle back to Paypal and generate a button for View Cart - Select and copy the code (Ctrl+C)

Toggle back to Registration Page and Update it as above for **** ViIEW CART *****.

You can now edit the page to get the appearance to your liking. Don't touch the buttons with the Template editor

When you are happy you can consider copying the Registration Page and pasting it in at the bottom of the Event Page. Do that in code view (</>)

There is a Panel on customising Paypal buttons.











Here is the HTML code for a Paypal button just as generated by Paypal.


<form target="paypal" 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="TPF7UD2KM4BSW">
<table>
<tr><td><input type="hidden" name="on0" value="Entrants">Entrants</td></tr><tr><td><select name="os0">
<option value="Santa Dash (Adult)">Santa Dash (Adult) 10.00 GBP</option>
<option value="Santa Dash (Junior)">Santa Dash (Junior) 10.00 GBP</option>
<option value="5K Run">5K Run 10.00 GBP</option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Entrant's Name">Entrant's Name</td></tr><tr><td><input type="text" name="os1" maxlength="200"></td></tr>
</table>
<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

Your browser will show it like this


Entrants
Entrant's Name




You can edit it in the template page editor but your efforts are then in public view so I suggest you do your editing in Notepad until you are happy then copy and paste into your Registration Page.

so
Start Notepad;
copy your button code from Paypal;
paste into Notepad.;
File save - anyname.htm (I use Cart.htm but the .htm is the critical part)
Open Explorer or My computer and find anyanme.htm
Double click on it

Now practice switching between these programs - Notepad, your browser (we're finished with Explorer so you can close it). Finish in Notepad

Notice that your button's code starts at <form and ends with </form>

I've put in some line breaks (Enter) and colours to emphasis the structure of the form.
(you can put line breaks in anywhare for readability, the browser will ignore them.)

When you make changes, make small changes, Save your Notapd - switch to your browser and Refresh

The lines in red are Paypal's - don't touch them

Between the red header and the red footor is a table - it starts at <table> and ends with </table> .

The table has four rows (<tr> to </tr>)

Each row has one column (<td> to </td>)




<form target="paypal" 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="TPF7UD2KM4BSW">


<table>


<tr>
<td>
<input type="hidden" name="on0" value="Entrants">Entrants
</td>
</tr>


<tr>
<td>
<select name="os0">
<option value="Santa Dash (Adult)">Santa Dash (Adult) 10.00 GBP</option>
<option value="Santa Dash (Junior)">Santa Dash (Junior) 10.00 GBP</option>
<option value="5K Run">5K Run 10.00 GBP
</option>
</select>
</td>
</tr>


<tr>
<td>
<input type="hidden" name="on1" value="Entrant's Name" >Entrant's Name
</td>
</tr>


<tr>
<td>
<input type="text" name="os1" maxlength="200">
</td>
</tr>






</table>




<input type="hidden" name="currency_code" value="GBP">
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>



You could start by correcting the error in the row one - It asks for Entrants, it should be Event?


Here is a customised Paypal Add to Cart Button. As before to make it readable I have broken it into lines. I've removed the paypal on;y lines form top and bottom.



<table border="1" >
    <tr>
        <th>
        Event ?
        </th>
        <td>
         <select name="os0">
         <option value="Santa Dash (Adult)">Santa Dash (Adult) 10.00 GBP</option>
         <option value="Santa Dash (Junior)">Santa Dash (Junior) 10.00 GBP</option>
         <option value="5K Run">5K Run 10.00 GBP</option>
        </select>
        </td>
    </tr>
    <tr>
        <th>
         Entrant's Name ?  
        </th>
        <td>
        <input type="text" name="os1" maxlength="200" required placeholder = "Dasher's name">
        </td>
    </tr>
</table>



The changes were:


to put a border round the table
to change the table to two rows of two columns
to change the 'title' cells to be 'headers' which are bold and centred
to pad the Entrants Name? with leading and traing spaces ( )
to make the entrant's name a required input
to put a prompt in the Entrant's name




And in your browser it looks like this


Event ?
 Entrant's Name ?  



This all standard HTML - there are several good websites you can visit - try www.W3schools.com
This is a layman's guide to domains and sites. Please think twice before you pass it on as gospel.

A telephone number is not the person you are calling.
There are directories where you can look up your friend's name and get his number.
Call that number and you are connected to his phone

A domain is like your friend's name.
A web site is like your friend's phone
There are world wide directories of domain names giving the 'number' of the web site for that domain.
When you ask your browser for a domain it looks up the directory goes to that site and shows you the home page for that site.

To cloud the issue /add to the fun there are search engines (like Google) to which you can give a more or less vague clue as to the site you want and they will look up their directories and offer you a choice of domains/pages.

At the top of your browser screen is the space where you enter the domain you want, it looks it up in the directory and it then shows you the full address of the page it ihas found. (That is called its URL = universal resource locater)
(A 404 error is like number not recogised.)

bscomputers.co.uk is a domain name.
rotary-ribi.org is domain name.
https://www.rotarygbi.org/my-rotary/?return=//www.rotary-ribi.org/login.php is not a domain name - it is the URL of a page within a site

Right now your browser will be showing something like bscomputers.co.uk/rotary/tips.htm
That is the URL of a page (tips.htm) in a folder (rotary) on the website which bscomputers.co.uk points to. (URL = universal resource locater)

The URL of the home page of my club shows as rotary-ribi/clubs/homepage/ClubId=27 (which is not quite the same but does the same job).

That is not very memorable or concise so we have registered a domain dunfermlinerotary.club and made it point to rotary-ribi/clubs/homepage/ClubId=27

So now your browser looks up dunfermlinerotary.club and up you are put through to our template homepage.

To achieve that we had to register dunfermlinerotary.club. There are many many registrars and they all charge much the same. The price for .club or .org is higher than for .org.uk or .co.uk and the price is renewable every one or two years

If you haven't got a domain name registered Chris Sweeney's company 121Technologiy can help you.

To make your domain point to your template homepage you will use 'web forwarding'.

Not every registrar includes web forwarding in its cheapest package so before registering your domain make sure that web forwarding is included.

For instance bscomputers.co.uk has been registered at Plusnet for 20 years with forwarding but they turned me away for dunfermlinerotary.club which is registered at GoDaddy.

If you have already got a domain registered you will need to know who the registrar is and the user or account id and password.

If that info is not readily availabe there is an online facilty called whois which will tell you who the registrar is and who it is registered to. You might need to find the (former) member who did that.

If all else fails -register a new name and start again. The existing name wiil lapse inside 2 years and you might then buy it. You can have more than one domain name all pointing to the same site.

In your registrar's management pages for your domain you will have to find web forwarding and put in your club's template site - use https://rotary-ribi/clubs/homepage/ClubId=your club number.

You may be asked why the name changes in the URL. You can answer 'because' or you can explain all the above plus 'masking'

Masking is a refinement of forwarding. On bscomputers we have masking so you always see bscomputers in the URL though that is not the actual location of the pages. Because we are a simple design this works but it is not a good idea for the template. With masking you can't use the URL from your browser in links, which you might want to do from Facebook etc.


These are the personal thoughts of Bill Spence (bspence@bscomputers.co.uk)

Please let me know if you think any changes shoould be made (i.e.any mistakes by me) or if you have a topic which you think should be included I'd be happy to add your panel or try create one do so - Click here to email me

Please do not raise questions about these notes via the Webmasters' Forum

This page is an accordion. The advantage of an accordion page is that you can have lots of topics, each in a panel instead of in separate pages.

You can 'hand crank' an accordion page and there is help in the template's Tutorials.

Alternatively you can use my Accordion Wizard - you can download it Here (free).