| Use these instructions and examples as guides to help you customize. Scroll down for Standard and Expert Customization™ options. Your code must be HTML 4.0+ compliant. |
| Troubleshooting Tips:
The dynamic code for page content, %*%PAGE CONTENT%*%, must *always* be on a line by itself in your HTML code.
Page Content automatically displays inside its own table. The code looks like: <table><tr><td>page content displays here</td></tr></table>.
For best results, your HTML code should begin with <table> and end with </table>
If your customized page does not look as intended, click View/Source in your IE browser and review the "live" page code. If you use an editor for web page creation, copy the source code, paste it into your editor, and run your editor's error checking to help find the problem(s) in your code. Most problems are a result of a missing or misplaced end tag. |
| |
Simple Customization Instructions
Add your banner to the top of the pages |
| If you are using FrontPageŽ to create your customization code, click here for important instructions. |
| Step 1:
Complete the form with your choice of font face/size and color settings. If you do not know what colors to use to match your web site, go to a page on your site and click View/Source (in IE). Your site's colors should be listed in the <body> tag near the top of the page. It will look something like this: <body bgcolor=#FFFFFF Link=#6600cc ALink=#33cc66 VLink=#ff99ff> There may be additional <body> tag attributes in your site's <body> tag. If so, copy them over to the customization form as well. Typically these will be attributes like marginheight and marginwidth. Copy those attributes into the Other <body> tags field on the customization form. |
Step 2:
If your banner is already displaying somewhere on the Web, go there and right click your banner. Select Properties. Find the Address (URL) of your banner. It will look something like: http://webhelps.com/images/banner.gif. Write down this URL.
If your banner is saved on your computer, login to Site Maker and use the File Upload function to upload your banner. Once uploaded, the URL (link) to your banner will display in the File Manager. It will look something like: http://hostinghelps.com/username/banner.gif. Write down this URL. |
| Step 3:
Click the Create/Modify Code link for Extreme Customization. In the HTML customization box, using the URL you wrote down as the image source for your banner, enter HTML code as follows:
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td><img src="http://hostinghelps.com/username/banner.gif" width="468" height="60" border="0"></td></tr><tr><td style="padding-top:15px">%*%PAGE CONTENT%*%</td></tr</table>
If you want a click on your banner to take visitors to your web site's homepage (opening in a new window), make your banner image a link. The code will look something like this:
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td><a href="http://webhelps.com" target="_blank"><img src="http://hostinghelps.com/username/banner.gif" width="468" height="60" border="0"></a></td></tr><tr><td style="padding-top:15px">%*%PAGE CONTENT%*%</td></tr></table> |
| Step 4:
Click Save |
Standard Customization Instructions
Add your banner to the top of the pages and navigation bar to the bottom of the pages |
| If you are using FrontPageŽ to create your customization code, click here for important instructions. |
| Step 1: Repeat Steps 1-2 above. |
| Step 2: Click the Create/Modify Code link for Extreme Customization. In the HTML customization box, create a table that includes (a) HTML code for your top banner, (b) dynamic code for page content (on its own line), and (c) HTML code for your bottom navigation links. |
| You can copy the HTML code from an existing page (click View/Source in IE), create the code using a web page-building program like Site Maker, GoLiveŽ, FrontPageŽ, or the WYSWYG Editor. The WYSWYG Editor is very easy to use, especially if you are familiar with Microsoft WordŽ. |
Your HTML code will look similar to this:
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td><a href="http://webhelps.com" target="_blank"><img src="http://hostinghelps.com/username/banner.gif" width="468" height="60" border="0"></a></td></tr>
<tr><td style="padding-top:15px">
%*%PAGE CONTENT%*%
</td></tr>
<tr><td align="center">
<table width="75%" cellpadding="4" cellspacing="0" border="0"><tr>
<td><a href="http://webhelps.com">HOME</a></td>
<td><a href="http://webhelps.com/company">About Us</a></td>
<td><a href="http://webhelps.com/privacy.html">Privacy Policy</a></td>
<td><a href="http://webhelps.com/terms.html">Terms of Use</a></td>
</tr></table>
</td></tr></table> |
| Step 4:
Click Save |
Expert Customization™ Instructions
Follow these steps to make your pages match your web site |
| If you are using FrontPageŽ to create your customization code, click here for important instructions. |
| Step 1: Repeat step 1 from Simple Customization Instructions above to complete your font face/size and color settings |
| Step 2: Create a Customization Template. A customization template is a web page that has an empty column where you want page content (e.g. forum, chat room, classifieds, calendar, community member directory) to display.
The easiest way to create a Customization Template that matches your web site, is to (a) copy the HTML code from an existing web page (generally a page other than the homepage works best), and (b) remove the text/graphics from the main area of the page, leaving an empty column where dynamic page content is to display. If you do not have the HTML code for one of your site's pages on your computer, you can go to the page using your web browser, then click View/Source (in IE) to display the HTML code for the page in Notepad. |
| If you have not yet created your web site, you can use the same template you plan to use for your site to customize your web tools and/or community/wiki pages. This can be a template you purchase, get for free, or create with a site-building program. If you will be using Site Maker to build your site, you can use the One-Click Customization method to apply a Site Maker template. |
| Place the dynamic code for page content, %*%PAGE CONTENT%*%, in the empty column of your Template. Be sure to put the code on a line all by itself. Save. |
| Step 4: Copy the HTML code between <head> and </head> on your customization template. Save. Click the link to add custom <HEAD> Tags. Paste your saved <HEAD> Tag code into the form. |
| Step 4: Click Save |
| Step 5: Click the Create/Modify Code link for Extreme Customization. Copy HTML code from your Customization Template beginning just after <body> and ending just before </body>. Paste the copied code into the HTML customization box |
| Step 7: Click Save |
