Description:
Our first tutorial will deal with basic ubb integration into the rest of your website. As this evolves, we will get more in-depth and work on more complex examples of design integration.

Purpose:
Integration of your ubb into the rest of your site improves ease of use by making your users better able to navigate your site. It puts the navigation controls "at their fingertips" and gives your overall site a better feel of "completeness" and finish. You can also use this technique to emphasize parts of your site that you would like your visitors to visit more, such as your classified ads, auctions, memberlist, etc.

How To:
Basic design integration places navigation bars either at the top, bottom, left, or right side of your ubb (or a combination of some or all of these). This is accomplished using tables and is easily done by copying the correct parts of the tables into the "header" and "footer" boxes in your general settings part of your control panel. Basically, you start a table in the header, and end the table in the footer, placing your ubb in the middle.

Examples:
These examples (and the accompanying code) provide a very basic idea of how to do this. You are free to adapt this to your needs by adding/ subtracting links, graphics, other html coding, etc.

Left Navigation Bar:
This is the most common request for "how'd they do that?" we get in the design integration forums. Examples can be found here at this site, at Scriptkeeper , and at a developing site I am working on: TruckWerks . You can download an example file here . Just copy and paste the code between the "start" and "end" comments for both the header and the footer... voila! tables! You, of course, will want to add to (change) them to better reflect the rest of your site.

Right Navigation Bar:
This one I haven't seen at any other site, but I am thinking about putting it here and removing the frames for the site to improve search engine placement. This moves the navigation bar to the right side of the ubb and is accomplished by putting the code for the nav bar in the footer this time, instead of the header. You can download an example file here .

Top or Bottom Navigation Bar:
This type is easily accomplished by removing the side nav bars and placing your links across the top or bottom of your ubb. This is done by placing your navigation code in the header or footer of your ubb general settings. You can download an example file here . This example places the navigation coding in your header. You can easily place it in your footer by replacing/ adding to the copyright coding found in you footer.

Note:
I hope this has helped you in some way to get a start on design integration. As I said in the beginning, this is a very basic tutorial which will get better as the material evolves. Good luck and ask any questions you may have in the " design integration " forum.


------------------
Allen

- http://www.stand318.com