So you've gotten your color schemes, fonts, etc. set up and your message boards are looking good. The problem is that they still don't look like the rest of your site (unless your site uses frames, in which case this how-to is not for you). Your organizations website likely has a sitemap/navbar running down the side or across the top as well as special text or grafix at the bottom.
To make your services look like the rest of your site you must integrate them by using actual HTML code from your site.
Start by selecting a page from your existing website that you would like your services to look like. While viewing this page, select "View Source" from the right click menu or the main menu of your browser. This will open a text document containing the HTML source code for the page.
The source is usually broken into 3 main parts: header, content and footer. For the purposes of this How-To, the content section contains only the information unique to this page. In other words, any sitemaps/navbars, graphics, or text that appear on every page of your site are not considered part of the content section.
The next step is to modify your source code to work with your services.
Start by selecting the entire content section and replacing it with the following two lines:
<!-- BeginContent -->The next step is to replace all relative URLs in the remaining source with explicit URLs. A relative URL one that points to another file on the same website. They do not contain the "http://www.yourdomain.com" part and usually look something like "/images/myimg.gif". To make it an explicit URL, you must add the "http://www.yourdomain.com" part. The reason you must do this is that the Community Builder services all run on our server and not yours and thus all relative URLs would try to point to files on our server.
The next step is to add the modified source to your Community Builder account. To do this, go to the General / Appearance / HTML page of your Control Panel. You can access your Control Panel by clicking the following URL:
http://community.hunin.com/cpOn this page you will see two fields labeled "HTML Top" and "HTML Bottom". To edit them, you must check the "Use Custom HTML" box. You may want to copy the contents of the HTML Top field (particularly the stylesheet) to a new text file on your computer so you'll have a backup to use when tweaking your integration.
Now go back to your modified source code and select all the text from the top down to the BeginContent line you added. Copy this to the clipboard and paste it (overwriting the current code) into the HTML Top field in your Control Panel.
Then go back to your modified source code and select all the text from the EndContent line you added down to the bottom of the file. Copy this to the clipboard and paste it (overwriting the current code) into the HTML Bottom field in your Control Panel.
Click the Save button and go to one of your services. It should now look like the rest of your site. If any of the images or links appear to be broken, go back to the Control Panel and confirm that the URLs are complete. You can verify this by cutting and pasting the URL into another browser and seeing if the image or page comes up.
To get back to the default HTML, uncheck the "Use Custom HTML" box on the General / Appearance / HTML page of your Control Panel and click save.
After adding the source and testing it, you may want to open the backup you made of the original HTML Top field and take a look at the stylesheet.
This stylesheet has specific settings that directly affect the look and feel of the services. If you decide to use the stylesheet, make any modifications you need to and cut and paste it just above the <body> tag in your new HTML Top field.
At this point you can customize the integration of an individual service by going to that service's Options page (i.e. Services / Message Boards / Options) in the Control Panel, checking the "Overwrite Main HTML" box and editing the HTML Top and HTML Bottom fields below it. However, you should only do this if you really need to because if you change the look and feel of your existing site after doing the integration, you will have to make the same changes to every place you've modified in your services. If you don't customize each service, you only need to make the change on the General / Appearance / HTML page.
One reason to do this would be if you wanted to make your polls pop-up windows. You probably wouldn't want the sitemap/navbar to show up on the pop-up window so you can delete that part of the source from the HTML for your polls.
To get back to the main HTML, uncheck the "Overwrite Main HTML" box on the service's Options page of your Control Panel and click save.
The last step is to add links to the services to your existing website. When a visitor clicks the link on your site, the service should come up looking just like the rest of your site.
The only give-a-way is that the URL in the browser will show our domain instear of yours. This can be hidden by creating a frameset page on your site that just has one frame containing the service. This way, even the URL looks like your site.
At this point, your services should be seamlesly integrated into your existing site! If you are having problems integrating, please post a message on our support message boards and we will do our best to get them resolved.
Also, if you have any suggestions/tips that might make this document better, please email them to doc@hunin.com.