Starter's Kit

Download

Download the standard template here.

Learn more

By studying the template, you will be able to get started building your Box very fast. You can also download another Box's zip file from the library to find out more.

Comments are also found in the template files to aid you, although the full documentation is already presented in this Developer's Handbook. You should first read the rest of the Handbook to understand fully how TBP reads your code and renders your Box, before you actually work on your Box.

How to find out your Box ID?

Register an account

You must be a registered member before you can create a Box. If you have not registered, click here to create an account.
 

Create a Box

Menu location: My Menu > Create content > Box

You need to create a Box before the Box ID is given to you, and the zip file is compulsory during the creation. On the other hand, you need a Box ID to code, and finally build the zip file. In this conflicting situation, you can create just any legitimate zip file with just one text file first. Create the Box using this zip file. You can later update your Box with the correct zip file. If you are not confident of creating such a zip file intially, you can download one here.
 

Figure 5 - Edit tab

Move your mouse over the Edit tab

Because you are the creator of this Box, you are allowed to edit this Box. You will see the URL in the status bar of your browser when your mouse is hovering above the Edit tab. The URL will be in the form of http://theboxes.paradise.sg/node/21/edit, where 21 is the Box ID.

Alternatively, you can click on the Edit tab, and the URL will appear in your browser URL field.

After you have edited your code and packed into a zip file, you can update your Box by submitting the updated zip file.

Box's File Structure

Figure 5 - Box File Structure

A full explanation of a Box's File Structure is presented here.

Html Files

All Html Files are compulsory. You must be able to render a Box with Title or without Title. Even if your Box doesn't need any special markup for the Title text, you must still create the mid.html, which in this case, will be empty. start_title.html must then contain duplicated contents from start.html. The rationale is that, in the case where the user does not know your Box support a Title, he must still be able to call out the standard set of API calls without any error.

The attribute values of your Html tags must be double-quoted. For example, <table width=100%> and <table width='100%'> are both wrong. <table width="100%"> is correct. TBP does not guarantee that your code will be rendered correctly if you do not adhere to this policy.

Even if your code here uses functions from extra javascript files, you should use it as though the functions were already available. This is because tbp_id_getHeader() will render the necessary extra javascript files to load on the actual web page where this Box is used, which will then expose those functions for you to use.

Res Files

style.css is compulsory. You are not restricted to the number of image files or javascript files. Most techiques do not need any extra javascript files, and just rely on CSS coding. JS files are entirely optional. If you do use, do remember to include them in scripts.html, delimited by spaces.

Root Level Files

map.jpg is compulsory.

The INC file is used for a Drupal Solution, and Box Developers are strongly encouraged to provide it. The JS file is a system automatic generated file. It uses information from the Html files to generate this file. This is the only file that a Box user needs to include in his web page to construct your Box. The file naming convention here follows theboxesparadise_id, where id represents your Box ID.

File sizes

The maximum disk space your Box can use is 5MB, which in most cases, is more than enough. If you feel that your Box needs more than 5MB in exceptional cases, email your case to our Review Team here, and TBP will get back to you asap.

Before submitting your Box

Here's a checklist for you before submitting your Box. We assume the Box ID is 3 in the discussion below.

Did you remember to do the following:

1. Rename the directory from res/rename_to_your_boxid to res/3?
2. Rename in your style.css the class names from .theboxesparadise_id to .theboxesparadise_3?
3. Rename the file from theboxesparadise_id.inc to theboxesparadise_3.inc?
4. Replace in your theboxesparadise_3.inc
   • the placeholder [theboxesparadise_id] with theboxesparadise_3,
   • the css codes with your own css codes,
   • the html codes with your own html codes?
5. Update map.jpg?
6. Remove in all Html files, under the html directory, the comment blocks?
7. Ensure in all Html files, your contents is at the first line of the file?
8. Ensure start_title.html is not empty even though your Box doesn't have any Title markup?

Tagging your Box

This is VERY important as it determines how easy your Box can be searched. There are common tags like Rounded, Shadow 120, Contents White, Blue Border, among many others. As you type a tag for your Box, TBP tries to autocomplete for you, giving you a list of suggestions that match the text you have typed so far.

If you type a new tag that does not exist, TBP will create your new tag for your Box. This new tag will also appear as one of the options in the Search page. Give meaningful tags to your Box, so that someone with a picture in his head can associate it with the tags available on the Search page.

If you need help

You can

1. read the FAQ in the next section of this handbook, or
2. create Help posts here, or
3. visit the menu link at My Menu > Create Content > Post. More information can also be found here, or
4. Do a search on this site before submitting your enquiry. It may be the case that your enquiry has been asked and resolved. The quick search is located at the top right of the TBP site.

FAQ

How do I know if my Box is submitted successfully?