Web Designers' Development Kit Documentation

Print

Introduction

This document provides instructions for web designers to create custom designs for Create users.

Please note that a certain amount of technical knowledge is required to understand these instructions, and we recommend that you familiarise yourself with the Create system. You can set up a 30 day free trial if you require.

All the necessary information is supplied below and because this feature is not intended for users without technical experience, support queries relating to it will only be answered if relating to a malfunction of our own systems.

We do however welcome feedback on this feature and how we might improve it.

What is the WDK?

The Web Designers' Development Kit (or WDK), is a framework that allows designers to create custom templates for use within the Create system.

It enables the use of the Create colour schemes, so the design can not only have dynamic content, but dynamic colours and styles.

Spend just minutes editing a pre-made design and making it compatible with Create to create your completely customized, and controllable website.

How it Works

The WDK requires only 1 file; index.html

It works by parsing HTML comments, formatted in a certain way, to determine where you want to place particular elements on a page.
For instance, if you wanted to place the page title within a h1 tag, you would do the following; 

<h1><!--WDK:display:pagetitle--></h1>

Automatically, our system would read this comment tag, and generate the correct code to show the relevant page title.

Although only requiring 1 file, you can include all kinds of useful files such as javascript libraries, flash, images and css files.

Building a Template

We have created an example template for you to use either as a base for your template, or just for reference. It uses a variety of tags so that you can see them in use.

Included in the example is a file called original.index.html which contains the original template html which was then converted to be run using the WDK. The index.html file is the converted version of the template and the roundedCorner.js is used to create the rounded corners of the template and menu.

wdk_example.zip (8kb)


1. The Basics

Each template is split into 3 areas; Header, Content and Footer.

Within your template, you will need to have the following basic structure; 

<!--WDK:header:start-->
    <html>
    <head> </head>
    <body>
    YOUR MENU HTML
    YOUR PAGE TITLE
<!--WDK:header:end-->

Content is automatically put between the header and footer.

<!--WDK:footer:start-->
    FOOTER INFORMATION
    </body>
    </html>
<!--WDK:footer:end-->


2. Template Info & Editor Styles

There are a few tags that you can use that can help the user with their template. These tags should be placed at the top of index.html;

• The Notes Tag - You can use the notes tag to describe the template, or instruct the user in what features they can/cannot use.
If, for instance your template did not support side columns, you could use the following tag; 

<!--WDK:templateinfo:notes:This template does not support side columns, they will not be displayed.-->


• Editor Colors - To make it easier to use the content editor, you can set the font as well as the text, link and background colours to match the design.
If you do not include these tags, the editor will base it's colours on the chosen colour scheme. 

<!--WDK:editor:txtcolor:#000000-->

<!--WDK:editor:linkcolor:#5522EF-->

<!--WDK:editor:bgcolor:#EFEFEF-->

<!--WDK:editor:font:Verdana-->

• Preview Thumbnail - Providing a file called "thumb.jpg" with your template will give it a thumbnail preview.
The file should be 80px x 60px

3. Allowed File Types

The following filetypes are allowed to be uploaded with the template;

N.B. Only index.html is processed, so tags in other files will be left untouched.

4. The Header

The header of the template, which would normally include the html <head> tags, plus everything above the content, is opened using the 'WDK:header:start' tag; 

<!--WDK:header:start-->

• Document Type & HTML XMLNS - We suggest that you use XHTML 1.0 Transitional Document Type as below;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


• WDK:display:headinfo - The 'headinfo' tag includes generated content for within the <head> tag, e.g. <title> and <meta> tags.

<!--WDK:display:headinfo-->


• CSS & JS - You can include css and javascript files normally.
The dynamic colour scheme's colours (returned in HEX format #FF0000) are accessable using the display tags but only within index.html (not any external files); 

body {
  background-color: <!--WDK:display:bodybg-->;
  color: <!--WDK:display:bodytxt-->;
}

#menu {
  background-color: <!--WDK:display:menubg-->;
  color: <!--WDK:display:menutxt-->;
}

a {
  color: <!--WDK:display:bodylink-->;
}

#page {
  background-color: <!--WDK:display:pagebg-->;
}

Once you have completed the header content, you must define the end of the header using the 'WDK:header:end' tag; 

<!--WDK:header:end-->


5. Header Images

You can dynamically access the header images that have been set up on the "Add, Update or Remove Your Company Logos" screen.

Within the WDK, we reference the different header images as follows:

header1 = Top Of Menu
header2 = Top Of Page
header3 = Full Header Image

Generally, you will only really need to use the WDK:display:header tag, which returns the complete HTML of the selected images (either the full header3 img tag, or a table containing header1 and header2). 

<!--WDK:display:header-->

There are tags to access each header image as a pre-built img tag (but also the source, width and height) directly, for instance, if you wanted to place the Top of Menu image somewhere within the template, you would do the following; 

<!--WDK:display:header1-->

...or alternatively, if you wish to set up the img tag yourself, or wish to use this image as a background-image... 

<img src='<!--WDK:display:header1src-->' width='<!--WDK:display:header1width-->' height='<!--WDK:display:header1height-->' alt='Header 1'/>
                
<div style='background: url(<!--WDK:display:header1src-->) no-repeat; width: <!--WDK:display:header1width-->px; height:<!--WDK:display:header1height-->px;'></div>

Because Create allows flash banners, you obviously don't want to put a flash file in the src of an image tag, so we have added some conditional statements to help;

N.B. see the Glossary for a full list for conditional statements. 

<!--WDK:if:header1:isFlash-->

<embed src="<!--WDK:display:header1src-->" width="<!--WDK:display:header1width-->" height="<!--WDK:display:header1height-->" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

<!--WDK:else-->

<img src="<!--WDK:display:header1src-->" alt="Header 1" />

<!--WDK:endif-->


6. Colour Functions

We have implimented some useful colour functions to help with using the dynamic colour schemes.

You can supply these functions with color variables ([menubg], [bodylink], e.t.c.), or a HEX value, to generate a modified version the colour supplied.

For example, if you want to have the body text, always visible on whatever body background colour chosen, you would use the WDK:bestvisible tag; 

body {
  background-color: <!--WDK:display:bodybg-->;
  color: <!--WDK:color:bestvisible:[bodybg]-->;
}

Or, if you want to highlight a link when hovering over it; 

a:hover {
  color: <!--WDK:color:hightlight:[bodylink]:50-->;
}

Or, if you want to get a blend of two colours, you could use the tint function with a tint amount of 50; 

background: <!--WDK:color:tint:#FF0000:#DF28BB:50-->;

Please reference the Glossary for a full list of colour function tags.


7. Menus

Because the menu system of Create allows you to have a customised menu, to output all of the items in a WDK template we must use a loop.

The normal syntax for the menu loop is as follows 

<!--WDK:comment:Start the menu loop and show all items-->
<!--WDK:menu:start-->

        <!--WDK:comment:If the current menu item isnt the first, show a pipe symbol between the links-->
        <!--WDK:ifnot:firstMenuItem--> | <!--WDK:endif-->
        
        <!--WDK:comment:Create the link-->
        <a class="menu_<!--WDK:menu:id-->" href="<!--WDK:menu:link-->"><!--WDK:menu:text--></a>

<!--WDK:comment:End the menu loop-->
<!--WDK:menu:end-->

There are 2 optional parameters contained within brackets, start and end. Using these lets you start the menu loop from a specific menu item number.

For instance, you may only want to show 5 menu items and not show the first item, so you would use it like so; 

<!--WDK:comment:Start the menu loop and show from item 2 to item 6-->
<!--WDK:menu:start(2,6)-->

Then, you may want to place the rest of the menu items elsewhere, so you would use this syntax; 

<!--WDK:comment:Start the second menu loop which will show the rest of the menu items-->
<!--WDK:menu:start(7)-->

Please reference the Glossary for a full list of tags.

8. Side Columns

Similarly to the menus, you must use a loop, to get through all of the column items.

Take note of the ID dyos_right_sideColumnContainer and the classes dyos_sideColumnItem, dyos_sideColumnTitle and dyos_sideColumnContent. These are important if you want the side columns to be moveable within the design screen.

Below is a simple example of how to display a side column. 

<!--WDK:comment:Start the column container-->
<!--WDK:column:start:right-->
<div id='dyos_right_sideColumnContainer'>

        <!--WDK:comment:Set the column width-->
        <!--WDK:column:width:250-->

        <!--WDK:comment:Start the column item loop-->
        <!--WDK:column:item:start-->
        
        <!--WDK:comment:Display the Column -->
        <div class="dyos_sideColumnItem">
        
            <!--WDK:comment:Display the title and content-->
            <div class="dyos_sideColumnTitle"><!--WDK:column:item:title--></div>
            <div class="dyos_sideColumnContent"><!--WDK:column:item:content--></div>
            
        </div>
        
        <!--WDK:comment:End the column item loop-->
        <!--WDK:column:item:end-->

</div>
<!--WDK:column:end:right-->

9. The Content

The content (created in the Create system) is automatically placed between the Header and Footer.

If you wish to contain the content in an element, simply start the element at the end of the header, and end it at the beginning of the footer;

N.B. Anything between these two tags will be discarded.

<div id='TheContent'>
<!--WDK:header:end-->

<!--WDK:footer:start-->
</div>


10. The Footer

The footer, is everything that comes after the content, here is where you need to end all of your tables, divs, body and html tags that were left open in the header.

N.B. The 'WDK:display:sitefooter' tag inserts the information that is in the "Page Footer" field on the "Edit Site Information" Screen.
This tag is required, if it is not included, it will be automatically placed at the top of your footer. 

<!--WDK:footer:start-->
        </div>

        <!--WDK:display:sitefooter--> 

    </body>

</html>
<!--WDK:footer:end-->

11. Referencing External Files

All external files uploaded with your template (images, css, javascript, flash etc) can be accessed in your index.html from your template directory using the WDK:path tag as follows; 

<script type="text/javascript" src="<--WDK:path:template-->myscripts.js"></script>

You can also access your uploaded images and files using the same tag and applying the "files" or "images" parameter. 

<img src="<!--WDK:path:images-->MyPhoto.jpg" alt="Photo" />

<a href="<!--WDK:path:files-->" title="Download Now">Download</a>


12. Including Widgets, Forms, Galleries e.t.c.

You can easily insert specific Widgets, Custom Forms, Galleries, Slideshows or HTML Fragments into your template. You will need the ID of the item you wish to display. 

<!--WDK:dynamic:slideshow:18455-->

Will insert the first youtube video you have in your widgets section.

You can also display the first of a certain kind of widget, for instance; 

<!--WDK:dynamic:widget:youtube-->

Will insert the first youtube video you have in your widgets section.




Installing a Template

To install a template, go to the "WDK" button which is found on the "Design" screen, click "New Custom Template", give the template a name and click "Add Custom Template".

Now go to the "Upload" box, and upload all of t he files relating to that template. You can upload either all the files individually or as a collection inside of a zip file.

All the files you upload will now be displayed in the files box where you can delete them if you need to.

N.B. You cannot delete index.html or thumb.jpg, however you can overwrite them by uploading new versions.

Once the files have been uploaded and index.html has been successfuly processed, you will be able to choose your template on the "Design" screen under "Custom" on the "Templates" tab.

Logic & Conditional Statements

To help with creating a more dynamic and reliable template, the WDK contains various logic / conditional tags.

You can use our collection of if, ifnot, elseif, elsifnot, else and endif to allow your template to act according to the way the site is set up.

Example 1
You want to prevent flash banners on your template. You could use the following statement to check if a flash header is selected or not, and display either the full width image, or just the site title.

<!--WDK:comment:If header 3 is flash... -->
<!--WDK:if:header3:isFlash-->

    <!--WDK:comment:... just display the site name-->
    <h1><!--WDK:display:site_name--></h1>
    
<!--WDK:else-->

    <!--WDK:comment:... display the header as an image-->
    <!--WDK:display:header3-->
    
<!--WDK:endif-->

As in the majority of programming languages, each if statement, MUST have a matching endif statement.

Example 2
You wish to give menu items a "selected" style when on that page.

<div id="menuDiv" class="roundedTop">
    <!--WDK:comment:Loop through all the menu items-->
    <!--WDK:menu:start-->
    
        <!--WDK:comment:If the current item isn't the first, show a '|' seperator-->
        <!--WDK:ifnot:firstMenuItem--> | <!--WDK:endif-->
    	
        <!--WDK:comment:Display the link with the text - if it is the current menu item, add the 'selected' class-->
    	<a <!--WDK:if:currentMenuItem--> class='selected' <!--WDK:endif--> href="<!--WDK:menu:link-->">
            <!--WDK:menu:text-->
    	</a>
    	
    <!--WDK:comment:End the menu loop-->
    <!--WDK:menu:end-->
</div>

Similarly, each loop (menu:start / column:start), MUST have a matching (menu:end / column:end) statement.

Refer to the Glossary for a full list of tags and conditional tags.

Requirements & Restrictions

There are certain elements of the WDK that are required so that your template can be processed correctly.

• The template must contain both the header and footer tags.

• Within either the header or footer tags, the display:sitefooter must also be present, if you do not place this tag within your template, it will automatically get added to the begining of your footer area.

• Any WDK:if and WDK:ifnot tags MUST be closed with WDK:endif.

• Any WDK:menu:start and WDK:column:start tags MUST be closed with the appropriate WDK:menu:end and WDK:column:end tags respectively.

When uploading your index.html the system will check the syntax of your template, providing you with any errors(fatal) and warnings(non-fatal).

Glossary & Tag List

Below is a list of tags that can be used with the WDK and an explanation of what they do.

Basics

Path Tags

Site Specific Tags

Header Images

Page Specific Tags

Customization

Colour Functions

Menus

Side Columns

Widgets e.t.c.

Logic & Conditional Statements

The following are if constructs, but can also be used with elseif (simply replace :if: with :elseif:).
Alternatively, you can use all of the same conditional elements with ifnot (replace :if: with :ifnot: OR :elseif: with :elseifnot:).

The following are integral parts of conditional statements.

Website User Logic Statements