Template Specification

7/28/2019 Template Specification

1/21

Template Design Instruction

To upload the template to site builder system, you have to archive the template files andimages. Supporting archive format is .zip and .tar.gz.

Template Naming

Template name consist of 3 components,{COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE}.zip such as gold_ restaurant_2.zip.

- Gold is a color group of the template. There are 13 color group, please refer to the

Appendix A for the color group name

- Restaurant is a main picture showing in the template

- 2 represent to the navigator alignment for your template (1 = vertical navigator, 2 =

horizontal navigator)

Dont use special symbol such as ?, !, _, *, , , # , @ , & and space. If you want to divideword, you need to use dash (-). Template name length must not exceed 30 characters.

Template File Structure

{COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE}.zip

{COLORGROUP}_{PICTURE}_{NAVIGATORSTYLE}

---- images

---- index.htm

---- style.css

---- s_preview.gif or s_preview.jpg

File names and folders are case sensitive, all in lowercase.

imagesAll images keeps in images folder.

index.htmThisis a template html file. It must contain to following variable strings.

{XMLCHARSET}{HTMLDIR}{TITLE}{LOGO}{COMPANY_NAME}{SLOGAN}{NAVIGATOR}{SIDE1}{TOP}

C-OT-09 v 3.0


2/21

{PATHWAY}{ICON}{BODY}{SIDE2}{FOOTER}{BOTTOM}{RVBANNER}{POWERED}

style.cssThis is the CSS file for your template. It must contain the following CSS classes.

.company

.slogan

.magina:linka:activea:hovera:visited

s_preview.gif or s_preview.jpg

Preview image file. This will be display in the site builder step2.

Creating index.htm

We will demonstrate creating index.htm by using DreamweaverMX as a tool. If you dontuse it, you still be able to learn and easily apply to your tool.

XHTML compliant

First, you need to set the preference by going to Edit > Preferences.


3/21

On the Preferences window choose New Document and check the checkbox for MakeDocument XHTML Compliant.

HTML Header

Related variables: {XMLCHARSET}, {HTMLDIR}, {TITLE}, , ,

Start building the new index.htm by going to File > New > Create. On the code view, youwill find the default HTML code below.

1 Change "iso-8859-1" to "{XMLCHARSET}"2 Add {HTMLDIR} in the tag. It will looks like this

3 Change Untitled Document to {TITLE}4 Change to


4/21

Finally you will get the code like this.

HTML body

Related variables: {LOGO}, {COMPANY_NAME}, {SLOGAN}, {NAVIGATOR}, {SIDE1}, {TOP},{PATHWAY}, {ICON}, {BODY}, {SIDE2}, {FOOTER}, {BOTTOM}, {RVBANNER}, {POWERED}

In the HTML body tag, you have to place several variables into the template. There are 3 variablegroups for the HTML body.

{LOGO}, {COMPANY_NAME}, {SLOGAN}

{LOGO}

{COMPANY_NAME}

{SLOGAN}

There is no strict rule whether where to place and how to code the logo, slogan andcompany name. The only requirement is the variable {LOGO}, {COMPANY_NAME}, {SLOGAN}must exist on your template.

Our entire templates place the {LOGO}, {COMPANY_NAME}, {SLOGAN} in the layer foreasily reuses the code and move around in the template to suitable with the design.


5/21

{BODY}, {NAVIGATOR}, {SIDE1}, {TOP}, {PATHWAY}, {ICON}, {SIDE2}, {FOOTER}, {BOTTOM}

{BODY} is the editable area where you add text in the step5 of RVSiteBuilder.{NAVIGATOR} is the location of navigator.

Special Variables *:

{SIDE1}, {TOP}, {SIDE2}, {FOOTER} is the place holder for some of the future components suchas banner ads, calendar, blog, and etc.{BOTTOM} is the page footer for the future features such as the text based navigator and locationof the privacy and acceptable usage policy.{PATHWAY} is the website path way.{ICON} is the print, favorite, and send email to friend buttons.

* These variables are mandatory even you dont use them; you still need to place these variablesin the template.

Special variables should surround with the HTML comment and HTML code. If thefeature is not used, RVSiteBuilder will remove from the BEGIN HTML comment to END HTMLcomment, not just the {} variable in the published website. You are safely to surround the

variables with tables, links, images and etc.

{PATHWAY}{ICON}

If the {PATHWAY} is not used while using the template in RVSiteBuilder, the final code will beautomatically converted to:

{ICON}


6/21

If the {ICON} is not used while using the template in RVSiteBuilder, the final code will be

automatically converted to:

{PATHWAY}

If both {ICON} and {PATHWAY} are not used while using the template in RVSiteBuilder, all of theabove code will not show on the finale website.

Template Design tips:

{NAVIGATOR} should inside the table or CSS layer. Its height should not less than

32 pixels. 32 pixels is the best fit.

{BODY} should wrap with .margin CSS class.

-


7/21

{RVBANNER}, {POWERED}

{RVBANNER} is the place holder for Created by RVsiteBuilder icon. You need to add this variablein your template. In RVSiteBuilder Manager, you can hide the icon and dont show on thepublished website.{POWERED} is the place holder for Powered by icon. You need to add this variable in yourtemplate. In RVSiteBuilder Manager, you can configure your web hosting company and show theicon on the published website.

Creating style.css

The file name of the CSS style must be style.css. All letters are lowercase. All templateshave to have style.css file and contain the following CSS class. You can set your own style or usethe default below.

Default CSS

body {

font-size:76%;margin:0;padding:0;

}table { font-size:100%;}a:active {color: #8C4F01; text-decoration: underline;}a:link {color: #FEA100; text-decoration: underline;}a:visited {color: #FEA100; text-decoration: underline;}a:hover {color: #8C4F01; text-decoration: underline;}

.magin {padding:5px;}

.company{font-family: verdana,arial,helvetica;font-size: 14px;color: #666666;font-weight:bold;

}

.slogan {font-family: verdana,arial,helvetica;font-size: 10px;color: #666666;font-weight:bold;

}

body, table : This will set the font size for your template. The default one is

the best font size enable cross browsers and cross platforms.

a:link, a:active, a:hover, a:visited : This will apply to the links in{BODY}.

a:active {color: #8C4F01; text-decoration: underline;}a:link {color: #FEA100; text-decoration: underline;}a:visited {color: #FEA100; text-decoration: underline;}a:hover {color: #8C4F01; text-decoration: underline;}


8/21

.magin : This will apply to {BODY} to provide the space around the editable textin the SiteBuilder.

.magin {padding:5px;}

.company : It will be the CSS style for the company name, {COMPANY_NAME}, in yourtemplate.

.company{font-family: verdana,arial,helvetica;font-size: 14px;color: #666666;font-weight:bold;}

.slogan : It will be the CSS style for the company name, {SLOGAN}, in your template.

.slogan {font-family: verdana,arial,helvetica;font-size: 10px;color: #666666;

font-weight:bold;}

Creating preview image

Supporting image extension are .gif and .jpg .

Image size is 145 x 135 pixels

Maximum file size is 30 Kbytes

The name of the image must be s_preview.gif or s_preview.jpg. File name is case

sensitive. All letters are lowercase.


9/21

Appendix A: Color Group

1. Lightblue 2. Blue 3. Lightgreen

Cyan 00FFFF Dodgerblue 1E90FF Aquamarine 7FFFD4

Paleturquoise AFEEEE Blue 0000FF Lightgreen 90EE90

Lightblue ADD8E6 Royalblue 4169E1 Springgreen 00FF7F

Lightskyblue 87CEFA Steelblue 4682B4 Greenyellow ADFF2F

Deepskyblue 008FFF Mediumblue 0000CD Yellowgreen 9ACD32

Darktrquoise 00CED1 Navy 000080 Limegreen 32CD32

Indigo 4B0082 Darkseagreen 8FBC8F

4.Darkgreen 5. Beige 6. Gold

Darkkhaki BDB76B Beige F5F5DC Khaki F0E68C

Olive 808000 Linen FAF0E6 Yellow FFFF00

Olivedrab 6B8E23 Bisque FFE4C4 Gold FFD700

Seagreen 2E8B57 Wheat F5DEB3 Goldenrod DAA520

Green 008000 Tan D2B48C Orange FFA500

Teal 008080 Roybrown BC8F8F

Darkolivegreen 556B2F

Darkgreen 006400


10/21

Darkslategray 2F4F4F

7. Maroon 8. Red 9. Pink

Peru CD853F Coral FF7F50 Mistyrose FFE4E1

Chocolate D2691E Tomato FF6347 Pink FFC0CB

Sienna A0522D Indianred CD5C5C Hotpink FF69B4

Maroon 800000 Crimson DC143C Palevioletred DB7093

Red FF0000 Deeppink FF1493

10. Magenta 11. Purple 12. White

Thistle D8BFD8 Mediumppurple 9370DB White FFFFFF

Plum DDA0DD Darkviolet 9400D3 Whitesmoke F5F5F5

Violet EE82EE Blueviolet 8A2BE2 Gray 808080

Magenta FF00FF Purple 800080 Silver C0C0C0

13. Black

Black 000000


11/21

Appendix B: colordb.ini.php

[bgcolor]color_bgn = Navigator background colorcolor_opp = Opposite color of the color_bgncolor_bgh = 30% black foreground of color_bgn

color_bgc = 30% white foreground of color_bgn[link]color_anor = Color of normal state of the navigator hyperlinkcolor_ahov = Color of the hover state of the navigator hyperlinkcolor_acur = Color of the current state of the navigator hyperlink[line]color_line1 = 50% black foreground of the color_bgncolor_line2 = 50% white foreground of color_bgn

Bullet color tone [dark, light, white, black]


12/21

Navigator Vertical

3dbullet

Circle


13/21

Arrow

Classic bullet


14/21

Digit bullet

Blocky


15/21

Catching border

Classic bar


16/21

Duo closing

General line


17/21

Header tab

Melody keys


18/21

Navigator Horizontal

Circle

Arrow

Oval


19/21

Classic button

Dashtab

Floating


20/21

Line bottom

Separate

Tabmiddle


21/21

Tramline

Documents

Template Specification