New Code Support FAQ [June 2009]

[Ross]

• Can I have a different skin on just one board?
  
  Yes, with the use of CSS. You can use the generator found here to produce the necessary code for you. Then, in the Header of the board you want it to apply to, insert:
  

  <style type="text/css">
  <!--
  CSS Code From the Generator Here
  -->
  </style>

  
  

[Ross]

• What TOS limitations are there in regards to codes?
  
  Since this has been brought up elsewhere that coders are not always aware of what does and what does not constitute a breach of the Terms Of Service I will do my best to clear this area up.
  
  
  • Google Banner Ads - These may not be hidden, removed, resized, moved or covered up.
    
  • iFrames - These may be used to load an external page so that it appears somewhere on your forum. eg. a shoutbox
    
  • AJAX - May not be used to fetch information from any ProBoards page, regardless of if ads appear on this page or not.
    
  • Automatic Refresh - Any form of this may not be used due to the stress added to the server.
    
  • User Created Forms - These may not be used to send information to the ProBoards server since ProBoards must be able to control the information submitted. This includes login forms that you may want to have on your own website.
    
  • Logging Information - You may log information about users who visit your site such as their browser, their IP address; this is how many stat counters work. However, you may not log/display what they are doing on the forum as this is seen as an invasion of their privacy.
    
  • Deletion of Accounts - You may not prevent users from deleting their accounts. It is their right to be able to remove this information.
    
  • Registration Agreement - You may not add to or remove from the registration agreement that users must agree to when registering. However you may add a separate set of rules elsewhere on this page.
    
  • Removal of the "Delete" or "Modify" Post Buttons - You may not remove both of these buttons as it is seen as a members right to be able to remove any information they have posted. However, you may remove just one of these buttons
    
  
  
  If you do break the ProBoards TOS, then you will risk your forum being deleted. If in doubt, then feel free to ask

[Ross]

• Can I get an "Official Code Helper" title?
  
  You may have noticed some of our code helpers with "Official Code Helper" as their custom title. This isn't something that we give out to anyone who asks. It's used to show recognition for their work here and to let members know that they can be trusted.

[Ross]

• Showing Users in the Chat Room
  
  The following code can be inserted anywhere on your forum to show either the users or number of users currently in the addon chat room. Customize the colored parts to suit your forum, an explanation of each is below.
  

  
  <iframe name="schwho" src="http://client4.addonchat.com/scwho.pl?id=177360&comma=1&countonly=0&nousermsg=No Users in the Room" width="728" height="25" frameborder="1" scrolling="auto"></iframe>
  

  
  
  URL: This is the server on which your addonchat room is hosted. It would have been provided to you when you registered for the service.
  Chat Room ID: This is the ID of your chat room. Again, provided when you register for the service.
  Mode: Use "1" to show the number of users online or "0" to show the usernames of those online.
  Empty: The message shown when the chat room is empty
  Size: Customize the width and/or height of the box to suit your forum.
  

[Michael]

Aug 15, 2005 8:12:02 GMT -8 Magic Carrot said:

-= A Guide to Using Money on your Proboard =-
By MagicCarrot

Ver. 3.0 (11/09/2005)

-+=========+-
Contents
-+=========+-

I. Disclaimer
II. Introduction
III. Installation and Setup of Money Hack v3
IV. Creating a Shop
V. Stocking the Shelves
VI. Hiring Shopkeepers
VII. Keeping the Books
VIII. Conclusion

-+=========+-
I. Disclaimer
-+=========+-

<LEGAL>This document is to be used by Proboards members only and is not to be re-printed, distributed or duplicated anywhere other than Proboards unless given written consent by the author. Author assumes no responsibility for any damage, irrepairable or otherwise, to your message board as a result of using this document. This document is not valid in Guam, Puerto Rico, the US Virgin Islands, or North Dakota. All Rights Reserved. Many will enter, few will win... Erm.. </LEGAL>

-+=========+-
II. Introduction
-+=========+-

This is a guide to setting up a working monetary system within your forum community. As of the time of this guide, there are no compatible automatic shop hacks available for Proboards. The closest thing we currently have is Money Hack v3 created by Peter, continued by Ross.

This code allows any members who can edit profiles to remove and give monies through the Modify Profile area for any member. It also allows you to set the name of your money, and how many monies members recieve for each post. It shows this number in both the profile and the mini profile under their avatar.

The problem is that there is no front-end for this hack. No place for members to 'spend' their earned monies. So in order to guide people into creating a working money system in your forum, I've written this. I hope it helps people.

Let's get started!

-+=========+-
III. Installation and Setup of Money Hack v3
-+=========+-

Okay, so you have a forum, and wanted to reward your members with ability to collect, give and recieve money. The first thing you will need to do is install Money Hack v3, which can be found here. (The 'here' is clickable, so click it.)

To conserve space, I'm not going to post the entire code here, but will refer to certain parts of it. You will need to place the code in your Global Footer. I've placed mine right at the top, so it has top priority, but you may need to try different locations to get all your codes working properly.

You'll notice there are places in the code where they placed comments to let you know where you can edit the code to look how you want it. Here's the editable part of the code (Parts you can edit are in red.):

====================+-

// The value of money a member should gain for each post
var MoneyPerPost = 5;

// What do you want to call your money?
var NameOfMoney = 'Money';

// The symbol that will appear next to the money
var SymbolOfMoney = '£';

====================+-

The bits that are red can be changed, depending on what kind of money you want your forum use. You could change the 'Money' option to 'Drachmas', 'Gil', 'Gold' or 'Dollars'.

Remember that only members who have the ability to edit profiles can give or take away money.

Once you have changed the options in the code, save your headers and footers and bounce back to the main page of your board.

Now you should be able to pick a random thread and see the money display in your members mini-profile and profile. This amount should be their post count times the number you entered above. If you see that, you should also be able to see a place at the bottom of their 'Modify Profile' area to give or remove money.

To remove or give money, edit a members profile and you should see something like this:



Just type in a number, choose whether you want to add or subtract and click 'Update'. Thats it! Congratulations! You've just installed Money Hack v3. If some or all of the features didn't show up, go back and double check your footers or ask for help on the Proboards Coding Support Board.

If everything is functioning, lets move on...

-+=========+-
IV. Creating a Shop
-+=========+-

Okay, so now all the people in your land have some coin in their pockets, besides playing tiddlywinks, what are they going to do with it? Well, I will tell you what I have done with it and you can go from there. I'm not saying I have all the answers or my way is the only way, but hopefull I will give you some ideas and start you in the right direction. remember, every board is different!

First off, create a new forum called 'Ye Olde Shop', or whatever you want your shop to be called. Make it so only registered users can post, (Guests are broke.) and only staff can post polls or create new topics. (This is capitalism, the people don't need polls.)

You will need to create a Sticky topic in this forum listing the items in your store, as well as descriptions and prices and if you want, how many are left in stock. Name the thread some thing like 'Ye Olde Shop Prices and Inventory'. Also create a 'Money Transfer' and 'Customer Orders' thread.

In the 'Customer Orders' thread, let members know how to purchase items. Let them know that all they need to do is make a post requesting an item for sale in the shop and it will be filled in a professional and timely manner. This single thread opton will make it much easier for your Shopkeepers to keep track of orders.

In the 'Money Transfer' thread, let your members know that they can request money transfers from one member to another. This will allow for members to create games, be philanthropic and be charitable.

Now your shop is built and you need to give the people things to buy...

-+=========+-
V. Stocking the Shelves
-+=========+-

This is where you need to get creative. You need to think of things that you as an admin or Gmods or mods can give to regular members that they can't get for themselves. Here are some examples:

Create a private 'Oasis' forum and charge your members to have access to it.

Find a code to change members names to a different color, and charge them to change it.

Sell custom titles.

Just find codes or think of things you can do for individual members and come up with a price for it. Again, try and be creative.

As soon as you've populated your inventory with items and posted them in your thread, you're ready to hire some people to fill orders for you.

-+=========+-
VI. Hiring Shopkeepers
-+=========+-

Obviously, make sure that the people you want to run the store are trustworthy members who were around long before you ever gave the masses money. You may want to create a new user group called 'Shopkeeper' and give them powers relevant to giving items you created and giving money and taking away money.

Again, they will need to be able to edit profiles.

-+=========+-
VII. Keeping the Books
-+=========+-

As with all Proboards hacks, things happen. Certain amounts of excrement always manage to hit the proverbial fan. And you may find youself fending off rioting villagers who lost their lifes savings because you wanted to split the categories.

Built into Proboards is an account notes feature. USE IT. And force everyone involved to use it. This will save alot of headaches. If MemberB buys a custom title for $50, then the shopkeeper will go into that person profile to remove the 50 bucks and change the title so while he's in there, he can type in the notes:

8/12/05: -$50/CustomTitle by Shopkeeper4

Thats it. If this is done everytime there is a transaction, then you will always know how much money a person is supposed to have. If Member3 wants to give Member7 $5. The Shopkeeper would note that as well. Like this:

8/13/05 -$50/toMember7 by Shopkeeper5

And don't forget to edit Member7's notes:

8/13/05 $50/fromMember3 by Shopkeeper5

At this point, it might be a good idea to create a private forum just for shopkeeper business. That way any discrepancies or problems that arise can be taken care of out of public view. Also to keep all the practices you'd like your shopkeepers to use.

-+=========+-
VIII. Conclusion
-+=========+-

Remember, this is just a guide to get you started. Where you go from here is limited only by your imagination. Graphics, codes and just plain ingenuity can go a long way in making any board an interactive and engaging experience! I will update this guide if I notice anything out of place or just plain wrong, or if people send me ideas that they would like included in this guide.

Good luck!

[Michael]

Working with Multiple Skins

So you want to use multiple skins? Along with different codes for each skin? Well, it's complex but hopefully this tutorial will be able to help you understand how to go about it.

Getting the Skin ID
There are many ways to get the skinid of the skin. One favoured way is to change to the skin in your profile page. Then you can type javascript: alert(pb_skinid); in the address bar, and press enter. The Skin Id will then be alerted. Keep note of them - you'll need them later.

Javascript Codes:
These begin with:
<script> or <script type = 'text/javascript'>. These are the codes that modify things on your forum.

To prepare for the multi skins code, you need to make your current Javascript codes ready to use. To do that, make sure you remove the following parts from the code:

<script type = 'text/javascript'>
<script>
<!--
//-->
</script>

For example:

<script type = 'text/javascript'>
<!--
/*An Example Code*/

var d = document.getElementsByTagName('a');
for(a = 0; a < d.length; a++){
    if(d.width == '1%' && d[a+1].width == '1%'){
        d.style.display = 'none';
    }
}
//-->
</script>

Would become:

/*An Example Code*/

var d = document.getElementsByTagName('a');
for(a = 0; a < d.length; a++){
    if(d.width == '1%' && d[a+1].width == '1%'){
        d.style.display = 'none';
    }
}

Do that for each code.

Now that you have all of the 'javascript' codes done. Let's move on to things like side tables, HTML Tables etc..

Side Tables

Most table codes would look something like:

<table border = '0' cellspacing = '1' cellpadding = '3' class = 'bordercolor' width = '92%'>
<tr>
<td class = 'titlebg'>
Text Here! =D
</td>
</tr>
<tr>
<td class = 'windowbg'>
Thie is the main text that will appear.
</td>
</tr>
</table>

Well, that table can't be placed inside the code like that. So what we have to do, is we have to put inside a 'div' with a set 'id'. That's easier than it sounds. It just means putting <div id = 'unique_id_here' style = 'display: none'></div> with the text in the middle.
This would be done for each table etc. And then in the JS Code, we will simply set those things to be shown.

So with the 'div' it would look like:

[red]<div id = 'unique_id_here' style = 'display: none'>[/red]
<table border = '0' cellspacing = '1' cellpadding = '3' class = 'bordercolor' width = '92%'>
<tr>
<td class = 'titlebg'>
Text Here! =D
</td>
</tr>
<tr>
<td class = 'windowbg'>
Thie is the main text that will appear.
</td>
</tr>
</table>
[red]</div>[/red]

That will now hide your table. Don't worry, it's not lost.

No 2 divs or items should have the same ID. If they do, change one of them.

Now for each skin, you would want to display certain things, well to do that we use a small bit of code:

document.getElementById('[red]unique_id_here[/red]').style.display = '';

Changing the red part for each different ID you have assigned to the div. Remember, it doesn't need the <script> tags, because we removed them in step 1!

Now that we have got that done, we can move onto the CSS!

CSS - Styling

To start with, we may be adding a gradient to the menubg, or to the catbg. Let's take an example code:

<style type = 'text/css'>
.menubg {
    background-image: url('URL HERE');
}
</style>

Now to convert it to work with our multi skin code - we have to put it all on one line, and replace ALL single quotes (')

with double quotes ("). Then place it inside: document.write('[red]CSS HERE[/red]');.

So the code would now be:

document.write('<style type = "text/css">.menubg { background-image: url("URL HERE");}</style>');

And that's how you do it for the CSS. Now to bring it all together! And make it work!

Finishing Off

Well, let's say that all of the codes that I have posted above are for a skin with ID 3. Which I have found by using one of the earlier steps to find it. So we now bring the codes together dependant on skin:

<script type = 'text/javascript'>
/*Multiple Skins & Codes
By Wrighty - Tutorial*/

if(pb_skinid == 3){
    /*An Example Code*/

    var d = document.getElementsByTagName('a');
    for(a = 0; a < d.length; a++){
        if(d.width == '1%' && d[a+1].width == '1%'){
            d.style.display = 'none';
        }
    }
    document.getElementById('unique_id_here').style.display = '';
    document.write('<style type = "text/css">.menubg { background-image: url("URL HERE");}</style>');
}
</script>

That would work for skin 3. But what if we have more skins? Just add an 'else if' function to the end. eg:

<script type = 'text/javascript'>
/*Multiple Skins & Codes
By Wrighty - Tutorial*/

if(pb_skinid == 3){
    /*An Example Code*/

    var d = document.getElementsByTagName('a');
    for(a = 0; a < d.length; a++){
        if(d.width == '1%' && d[a+1].width == '1%'){
            d.style.display = 'none';
        }
    }
    document.getElementById('unique_id_here').style.display = '';
    document.write('<style type = "text/css">.menubg { background-image: url("URL HERE");}</style>');
}[red]else if(pb_skinid == 4){

    /*Execute some code here */

}[/red]
</script>


You would have to do this for the Headers AND Footers, and Main and Global. If you have any questions, do not hesitate to post them below.

Tutorial (c) Wrighty 2008 - do not repost, rip, claim or edit.

[Jordan]

• Expand/Collapse Content with Memory
  
  This will collapse any HTML elements on the page and remember what has been collapsed when you leave the page and come back.
  
  Here's an example of using a hyperlink to collapse a division element. Adding onclick="toggle('element_id');" to the hyperlink's tag makes it collapse the division element which has an ID that matches what is in parenthesis.
  
  <div id="element_id">
        This will be collapsed when you click on the link below.
  </div>
  
  <a href="Javascript:void(0);" onclick="toggle('element_id');">Expand/Collapse</a>
  
  To collapse a table, you'll need to add the ID attribute to the <tr> (table row) that you want to collapse. Below I added the onclick attribute to the <td> tag instead of using a hyperlink so you can click anywhere on the cell.
  
  <table width="92%" align="center" cellspacing="1" cellpadding="4" class="bordercolor">
        <tr>
              <td class="titlebg" align="center" style="cursor: pointer;" onclick="toggle('row_to_collapse');">
                    <font size="2">Title</font>
              </td>
        </tr>
        <tr id="row_to_collapse">
              <td class="windowbg">
                    Main content
              </td>
        </tr>
  </table>
  
  Here's the main script which needs to go under everything that is using it.
  
  <script type="text/javascript"><!--
  
  var cookie_data = document.cookie.split(";");
  
  for(a = 0; a < cookie_data.length; a++){
        if(cookie_data.match(new RegExp("id:(.+?)=0($|","i"))){
              if(document.getElementById(RegExp.$1))
                    document.getElementById(RegExp.$1).style.display = "none";
        }
  }
  
  function toggle(_id){
  
        var obj = document.getElementById(_id);
  
        if(obj.style.display == ""){
              obj.style.display = "none";
              document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 3000 12:12:12 UTC; path=/;";
        } else {
              obj.style.display = "";
              document.cookie = "id:" + _id + "=0;expires=Sat, 20 Jan 2000 12:12:12 UTC; path=/;";
        }
  }
  //--></script>

[Trublu]

• Can I edit a code that has a copyright notice?
  
  If the code has a copyright (ex., (c) Trublu 2010) you may edit the code. It is advisable to add a note to the header of the code so that it is noted that edits were made.
  
  If, however, the code says: Do Not Edit / Modify, you may not edit any part of the code without the author's consent.

[Wormopolis]

• How do I add a scrollbar into a DIV element?
  

So you have a div element with a bunch of text/images in it, and you want to set it to a certain height/width and make a scrollbar on one side (or bottom)...

typically, you will want to determine which direction you want it to scroll. if you want the scrollbar on the right side so you can scroll down, you will want a defined width and height, and an overflow-y:

<div style="width: 300px; height: 400px; overflow-y: auto;">content</div>

if you want something that scrolls side to side, you will want to go the other direction, setting the height and width and using overflow-x:

<div style="height: 100px; width: 300px; overflow-x: auto">Content</div>


if you want to get crazy, you can add scrollbars on the right AND bottom:

<div style="height: 100px; width: 300px; overflow: auto">Content</div>

notice that one just uses overflow