SOHO Site Builder Custom Template Design Guide

SOHO Site Builder Custom Template Design Guide

How The SMT Interprets Template Information

Within the maintenance platform, users will only have access to the page “content” area for editing. This means that each site must have a template design that maintains continuity throughout the site. Automatic menu generation is built in to the site management tool so that auto-menu buttons and sub-page buttons can be defined within the template. This gives you the option of placing auto-menu systems vertically, on the left or right of the page layout, or horizontally, across.

You may also wish to custom-design your main navigation system and not use the auto-menu feature at all. This allows you to have total control over font, colors and sizes of your navigation structure. For even greater flexibility in design, different templates may be assigned to individual page.

Your template designs can take on any level of complexity that you wish them to have. However, please note that the user, via the management tool, cannot change any images, text, or links built into the template. Generally speaking, this is not a concern for the end-user, but should always be planned and noted well ahead of the build process.

In order for your template to work, you will be producing a series of images and an HTML template file to be uploaded via the SMT's File Upload module.

Templates in use:

The Design Process

Design is a purely creative endeavor, and is difficult to give exact guidelines in reference to the process. The more creative you become, the easier it is to work within the template criteria. During the design process, you may find the need to experiment with different layouts and other combinations in order to achieve the exact look and feel that you desire. It is not uncommon to redesign templates several times before finalizing the end result.

There are some technical requirements that you must adhere to in order to work within the Site Management Tool platform.

Within any site deployed with the Site Management tool, the width of the “content area” is “liquid”, meaning that it will expand and contract as necessary to fulfill the parameters set by the template. A good habit to get into here is designing all of your templates within Photoshop starting with a new image that is 740(w)x500(h). This will give you the most accurate depiction of your final site, as the desired outcome is to have all visitors see the site with an 800x600 screen resolution.

The auto-generated menu system uses buttons that are 128(W)x20(H) pixels. If your intention is to use a custom navigation system, this does not factor as heavily in your design process. However, keep in mind that if you're designing this type of template for a client, they will not be able to add pages or other items to the navigation system automatically via the “auto-menu” system.

You can set your templates so that it allows all new pages added to the auto-menu system to be used in conjunction with your custom navigation system. If you intend to utilize this function, you may still want to design around the auto-menu button requirements. The above image shows guidelines to the left that assume an auto-menu system.

Creating the HTML template file

Using a standard HTML editor, such as Macromedia™ Dreamweaver or Microsoft™ Front Page, you will want to construct an HTML page that can be easily identified as your web site template file. This will be your custom template file and can be named anything you wish with an .HTM or .HTML extension.

!! IMPORTANT !! During the creation process, make sure that your HTML file is located in the same directory as your image files.

The SMT platform interprets its own unique variables that tell the system where to place specific “client changeable” headers, auto-menu buttons, and automatic text menus within your layout. These are not case sensitive, and can be placed visually within your HTML editor as text, so long as they contain the pound sign.

#LOGO# - Inserts an editable Header line that can be changed by the user within the Site Management Tool.

#VMENU# - Indicates where the Vertical Menu system is displayed within the site. If you are using the auto-menu system, sub-pages will always be displayed in this location whether or not the client chooses to use the horizontal or vertical display system.

#TMENU# - Inserts a horizontal, text based menu system that matches the “setup” of the Main and Sub menu system.

#CONTENT# - Tells the system where to display the table that will hold all the content created within the SMT's Page Editor.

#CUSTOMPHP# - Inserts the file “template_include.inc” if it exists on your system.

#AUTODATESTAMP# - Insert the current weekday, month, day, and year.

#USERSONLINE# - Displays the number of visitors currently browsing your website.

It is recommended that all layouts be housed in a table that is no larger than 740 pixels in width. Though using percentage tables allows flexibility at different screen resolutions, at lower resolutions, the display system could cause a left to right scrolling bar to appear at the bottom of the browser in some later versions of Netscape Communicator™.

For most templates, we recommend using Zero (0) for the value in the Margin-Width and Margin- Height body tags and have a main table with at least two columns; the auto-menu area being set at 128 pixels wide and the content area being set at 612 pixels wide.

JavaScript and Style Sheets The flexibility of the system allows you to utilize as much custom programming as needed to createyour final template. Cascading Style Sheets, JavaScript, and other HTML scripting features can be utilized to control the look and feel of your template. ( See the SMT Users Manual for built-in JavaScript functions that you can utilize )

If you are using style definitions within your template, you may also wish to control all of the text areas that are placed in the content area via the Page Editor. You can do this by placing a style control on class tag “sohotext” (.sohotext). This will force any text placed on the page via the text editor to be controlled by the style setting automatically. Keep in mind that this does not work if a user selects specific fonts within the Text Editor.

You may also wish to create a “.css” file to control the overall site. By default, the Site Management tool controls the look and feel of various elements within the content area. This file is named “runtime.css,” and is located in /sohoadmin/client_files, and is transferred to your document root directory the first time you login to the SMT. All submit buttons within the SMT system have a class tag of “.FormLt1” ( See the SMT Users Manual for a print-out of the complete runtime.css default file ).

Below you will find several screen shot examples of web site templates that have been created and uploaded directly to the Site Management System. Some utilize all recognized variables, while some use specific variables as needed. This should give you some ideas on how the graphic design process fits into the programming process to become the seamless look and feel of a site.

	Example 1: This template utilizes a vertical auto-menu system, and gives the client a specific location for a horizontal or vertical auto-menu navigation system.
	Example 2: This template utilizes custom navigation with the option to add more pages via a horizontal or text menu structure.

Advanced Coding Techniques for Custom Navigation

When using custom navigation elements, you will need to know how to code various links. Since the entire site created within the product platform is database-driven, it is necessary to call pages differently than when coding for traditional HTML pages. Theses links must be added inside the template file.

Normal Page Links

Let's say that you have created a navigation button that should be linked to the “About Us” Page. The following code is what should be used to link your navigation element: index.php?pr=About_Us This code is case sensitive and must be accurately depicted for proper operation. Notice that all spaces between words in the page names are separated by an underscore. This must be manually coded in place of spaces for the link to work properly.

The actual page name is directly related to the page name created within the “Create Pages” module of the Site Management Tool. Notice also that the first letter of each word in the page name is capitalized. No matter what you type within the create pages module ( and you must create the pages within the system even if utilizing custom navigation ), the system will automatically capitalize the first letter of each word in a page name and it can only be 22 characters long.

Therefore, you must also keep this in mind when coding the custom link. If you are coding before creating pages within the tool, keep the page names fewer than 22 characters in length.

Because your site is database driven, you will always call the “index.php” file when linking to normal site pages.

Example 3: This template utilizes all of the template variables. Using two tables that appear to be a frame layout, the upper table uses a dark gray background and allows for the #LOGO# and Horizontal menu

Uploading your completed template

Once your template is coded and complete you are ready to upload your new custom template to the site. Make sure that you have coded your template HTML file in the same directory as your images. This way there is no directory or misrepresented folder locations pointing to your image files from the template file.

STEP 1: Login to the Site Management Tool and choose the “Upload Files” user option. Here, you will upload all image files and/or your custom “runtime.css” file to be associated with your template design. DO NOT UPLOAD YOUR TEMPLATE HTML HERE .

STEP 2: Return to the Main Menu and select the “Site Template(s)” user option. In the middle of this screen you will notice a place to upload your custom template HTML file. Do so now.

STEP 3: When the template HTML file finishes uploading, you will be returned to the template selection page again. This time, pull down the drop down box under “Base Site Template” at the top of the page. At the bottom of the list box you will see a selection for “Custom:

yourtemplatefilename .” Select your new template and click “Update Template.”

STEP 4: Once completed, click “View Site” on the Top Nav Menu and marvel at your handy work.

NOTE: If images within your template are showing as broken images, you have probably coded your

HTML file outside of the same directory as your image files on your local machine. All image links

within your template HTML should be represented as:

<img src=” yourimage.gif ” width= x height= y border=0>