Menu

Zoho Sites Theme Documentation - Version 2.0

Introduction

This documentation explains how to create your own theme to be used in Zoho Sites. Following sections describe the markups and naming conventions that every theme needs to adhere to.

File Structure

Zoho Sites theme is a combination of files containing HTML, CSS and images. Desktop folder have theme files for desktop version, similarly mobile folder has theme files for mobile version. The specification and syntax for both desktop and mobile versions are same. Every theme will have the following files.

Layout with design.html

The file design.html is the base template of your Zoho Sites theme. This is a HTML file with defined placeholder controls, section controls and identifier controls. Let us explore more about these controls, which plays important role in converting a design to a theme.

Placeholder controls

As the name suggests, these are the controls that instruct the system about the placement of users' content. Use these controls to place your design components in the design.html.

Control

Description

${logo}

Used to position logo image of the user. This control has two parameters.

First parameter specifies size of the logo image that must be mentioned in pixels. If not specified, the default dimension 100x100 is implied.

Second resizable parameter specifies, whether the theme if can have logo of various size.

Syntax: ${logo 100x100} 

Syntax: ${logo 100x100 resizable} 

${sitename}

Replaced with a name for the website.

${caption}

Replaced with a caption for the website

${navigation}

Replaced with menu items.

Must be surrounded by a <div> tag with navigation as ID.

Syntax: <div id="navigation">${navigation}</div>

To change to orientation of menu to vertical, include the parameter vertical.

When menu is vertical, you can additionally add max-items parameter with number value. This will set maximum menu items displayed, beyond the limit 'More' menu is added.

Syntax: <div id="navigation">${navigation vertical}</div>

Syntax: <div id="navigation">${navigation vertical max-items=4}</div>

${banner}

Replaced with a static image or image carousel or a flash file (swf). The size of the banner container can be specified in pixels. If not specified, the default dimension 400x300 is implied.

Syntax:  ${banner 600x450}

${breadcurmb}

Replaced with breadcrumb navigation

${content}

Replaced with page content.

${sidebar}

Replaced with sidebar content.

${footer}

Replaced with footer content.

${searchinput}

Replaced with search input box; needed if search section is added to a theme.

${searchbutton}

Replaced with search button without value text.

${socialicon}

Replaced with various social icons, each icon will have following HTML structure

<a href="http://link" target="_blank" ></a>

Themes should target following classes for customization.

zs-socialicon-facebook

zs-socialicon-twitter

zs-socialicon-linkedin

zs-socialicon-googleplus

zs-socialicon-pinterest

zs-socialicon-youtube

zs-socialicon-flickr

zs-socialicon-email

zs-socialicon-rss

Section controls

These controls tell the system about the beginning and end of every section. These controls give multiple options to the user to enable/disable those sections. Some of these are used by Sites to identify a section as a whole.

Control

Description

[logo start] ... ... ... [logo end]

Marks start and end of logo section.

[sitename start] ... ... ... [sitename end]

Marks start and end of site name section.

[caption start]  ... ... ... [caption end]

Marks start and end of caption section.

[navigation start] ... ... ... [navigation end]

Marks start and end of navigation section.

[banner start] ... ... ... [banner end]

Marks start and end of banner section.

[breadcrumb start] ... ... ... [breadcrumb end]

Marks start and end of bread section.

[content start] ... ... ... [content end]

Marks start and end of content section.

[sidebar start] ... ... ... [sidebar end]

Marks start and end of sidebar section.

[footer start] ... ... ... [footer end]

Marks start and end of footer section.

[search start] ... ... ... [search end]

Marks start and end of search section.

[searchform start] ... ... ... [searchform end]

Marks start and end of form tag for search form.

[slideshow start] ... ... ... [slideshow end]

Marks start and end of slideshow controls section.

Identifier controls

These controls are used to add user content. These identifiers are added as values of attribute named data-zs-container to the HTML tag of respective containers.

Control

Description

data-zs-container="sitename"

Identifies the container where site name as inner HTML

data-zs-container="caption"

Similarly this identifies the container where caption of the site goes.

data-zs-container="content"

This identifier is used to expand the width of content area when sidebar is hidden, and also to set equal height for content area and sidebar.

data-zs-container="sidebar"

This identifier is used to set equal height for content and sidebar.

data-zs-container="navigation"

This identifier is used to adjust width of the navigation (Pages) based on search box visibility, in case search box is placed beside navigation.

Skeleton Layout

The image below gives you the layout and design components, themes may adopt different layout, but it should implement all the components mentioned.

HTML in design.html

Code in design.html is a body section of a HTML page. Zoho Sites only requires body section, web pages are published with HTML5 doctype and head tags. This is where fore-mentioned controls are put into design.

Sample Code:

<body>
  <div class="themeWidth">
    <div class="themeBrandingArea">
      <div class="themeBrandingContainer">
        <div class="tableRow">
          [logo start]
          <div class="tableCell themeLogoOuterContainer">
            <div class="themeLogoArea">${logo 100x100 resizable}</div>
          </div>
          [logo end]
          <div class="tableCell themeSitenameCaptionOuterContainer">
            <div class="themeBrandingContainer themeSitenameCaptionInnerContainer">
              <div class="tableRow themeSitenameCaptionContainer">
                <div class="tableCell themeSitenameCaptionContainer">
                  [sitename start]
                  <div class="themeSitename" data-zs-container="sitename">${sitename}</div>
                  [sitename end]
                  [caption start]
                  <div class="themeCaption" data-zs-container="caption">${caption}</div>
                  [caption end]
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    [navigation start]
    <div class="themeNavigationContainer">
      <div class="themeNavigationArea" data-zs-container="navigation">
        <div id="navigation">${navigation}</div>
      </div>
      [search start]
      <div class="themeSearchContainer floatRight">
        [searchform start]
        <div class="themeSearchBox">${searchinput} ${searchbutton}</div>
        [searchform end]
      </div>
      [search end] 
    </div>
    [navigation end]
    <div class="themeContentContainer">
      [banner start]
      <div class="themeBannerArea">${banner 900x280}</div>
      [banner end]
      [content start]
      <div class="themeContentArea" data-zs-container="content">
        <div class="themeContentAreaInner">
          [breadcrumb start]
          <div class="themeBreadcrumb">${breadcrumb}</div>
          [breadcrumb end]
          ${content}
        </div>
      </div>
      [content end]
      [sidebar start]
      <div class="themeSidebarArea" data-zs-container="sidebar">
        <div class="themeSidebar">${sidebar}</div>
      </div>
      [sidebar end]
    </div>
    [footer start]
    <div class="themeFooterArea">
     <div class="themeFooterAreaInner">${footer}</div>
    </div>
    [footer end] 
    [socialicon start]
    <div class="themeSocialIconArea">${socialicon}</div>
    [socialicon start]
  </div>
  [slideshow start]
  <div class="zs-slideshow-right-arrow"></div>
  <div class="zs-slideshow-left-arrow"></div>
  <div class="themeSlideshowOuterContainer">
    <span class="themeSlideshowInnerContainer">
      <span class="zs-slideshow-control"></span>
    </span>
  </div>
  [slideshow end]
</body>

Search

Zoho Sites integrates with search engine, to enable site search. Search section allows customization of the visuals, and it is optional.

Sample Code:

[search start]
<div class="themeSearchContainer floatRight">
    [searchform start]
    <div class="themeSearchBox">${searchinput} ${searchbutton}</div>
    [searchform end]
</div>
[search end] 

Slideshow

Slideshow is a merry-go-round of banner images that draw attention to your website. They are ideal promotional spaces on a website, and can be used to highlight a unique selling point, promote an event or raise funds for a cause. Zoho Sites have default Image Slideshow controls section for all themes, further this section can be CSS customized using following section, and it is optional. This whole section is overlayed onto an Image Slideshow. The class names zs-slideshow-right-arrow, zs-slideshow-left-arrow, zs-slideshow-control are fixed to represent left arrow, right arrow, index/dot controls respectively.

Sample Code

[slideshow start]
<div class="zs-slideshow-right-arrow"></div>
<div class="zs-slideshow-left-arrow"></div>
<div class="themeSlideshowOuterContainer">
    <span class="themeSlideshowInnerContainer">
        <span class="zs-slideshow-control"></span>
    </span>
</div>
[slideshow end]

Style with style.css

Navigation

Navigation is mandatory. HTML code for navigation is system generated. You need to create a stylesheet for navigation. You must target these, with #navigation.

Generated Code:

<ul>
    <li>
        <a><span></span><em></em></a>
    </li>
</ul>

Submenu

A submenu is a child menu that appears when you are holding the cursor over a parent menu item. You must target these, with .submenu.

Breadcrumb

Breadcrumb is the trail a visitor leaves when he navigates from one page to another. It allows visitors to keep track of their locations within website, and to easily return to the desired page in just a click.

Generated Code:

<p>
     <a href=""></a>
     <span></span>
</p>

Highlight Box

Highlight Box, as the name implies, highlights the content placed inside the box with special design, which stands-out when compared with the rest of the content. You must target it, with .zs-highlight-box class. Highlight Box under Content, Sidebar, Footer could vary in design and the same can be targeted in CSS.

Forms

Forms are powered by Zoho Creator. HTML code for forms are system generated. You need to create a stylesheet for forms.

Textbox, Email, Decimal, Number have the same code structure.

Generated Code:

<li>
    <label> ... </label>
    <div>
        <span>
            <input type="text" value="">
        </span>
    </div>
</li>

Dropdown and Multiselect fields have the same code structure.

Generated Code:

<li>
  <label> ... </label>
   <div>
      <span>
          <select></select>
       </span>
   </div>
</li>

Textarea

Generated Code:

<li>
  <label> ... </label>
   <div>
      <span>
          <textarea></textarea>
       </span>
   </div>
</li>

Currency, Percentage, Decision Field.

Generated Code:

<li>
    <label> ... </label>
    <div>
        <span>
            <input type="text" value="">
            <label>Currency unit or Percentage or Decision text</label>
        </span>
    </div>
</li>

Radio and Check box

Generated Code:

<li>
    <label> ... </label>
    <div>
        <span>
            <input type="radio" name="Radio_1">
            <label>Option 1</label>
        </span>
        <span>
            <input type="radio" name="Radio_2">
            <label>Option 2</label>
        </span>
    </div>
</li>

Date Field

Generated Code:

<li>
    <label> ... </label>
    <div>
        <span>
            <input type="text" value="" >
            <button class="dateinvoker"></button>
        </span>
    </div>
</li>

Submit and Reset Button

Generated Code:

<li>
    <label> ... </label>
    <div>
        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </div>
</li>

CSS selectors for form styling

Selector

Usage

form ul { ... }, form li  { ... }

Override form and form row styles.

form ul li label, form ul li div { ... }

Specify styles for field rows. One such usage is specifying the orientation and alignment of the form.

  1. float:left  

  2. float:left; text-align:right

  3. float:none

form ul li label { ... }

Override styles for label

form li span input, form li span label { ... }

Specify styles for Currency, Percent, Decision Field, Radio and Check box.

form li span input[type=text], form li span textarea, form li span select { ... }

Override styles for textbox, textarea and select field.

form .dateinvoker { ... }

Specify styles for date picker icon.

form li input[type=submit], form li input[type=reset], button { ... }

Specify styles for submit and reset buttons.

Theme Images

All theme images must be placed under images folder, additionaly following images must be included.

logo.png

Used for default theme logo.

bannerimage.png

Used for default theme banner image.

datePickerIcn.png

Used for date picker icon in form.

Theme Preview

Image preview.png is used to preview your theme in the gallery. It should be placed in the desktop and mobile folders, NOT in images folder.

CSS Variables

CSS variables are another tool for theme customization. Defining CSS variables in theme, allows users to modify using our visual editor. Custom themes can implement these variables optionally.

Sample Code:

body {
    color:$BodyTextColor[#CDCDCD];
    span-family:$BodyFontFamily[Arial];
    span-size:$BodyFontSize[12px];
}

When a user customizes them using Zoho Sites Visual Editor, customized values are used in the place of variables. Default value specified in between [] is taken in case customization is not done for a particular variable. This CSS variable gives numerous ways of customization for users. These variables are grouped under various sections. Naming convention of the variable makes it self explanatory. Complete list of variable is available here.