Having your design theme included in Avinu allows any Avinu-user to easily build a web site using your design. Giving people the use of your design is both a karma-booster and good publicity for you as a designer.
Avinu templates consist of a single HTML template and CSS file plus assets like images and Flash files. If you create multiple variations on the same template then they become a theme-series and can share assets. This is how you can have multiple different color/design choices based on the same theme.
An Avinu theme is basically a front-end layout of your design with designated locations on the page where Avinu users can add their own content. The type of content to appear in each designated space is decided by the end-user and may consist of any combination of units containing text, images, web forms, self-contained utilities & applications, YouTube videos, embedded-PDFs, Flash movies and many other options. You just create the "dataspace" and the user can put what they want into it.
To create a dataspace simply insert within your HTML:
<? dataspace() ?>
wherever the user should be able to add a data unit. You may add as many dataspaces as you wish; the user has the choice to leave a dataspace empty.
Your layout needs a designated place for error messages to appear, this is typically above your largest dataspace, but you may place it wherever you please:
<? $alerts ?>
Finally, every page needs to include an attribution (Powered by Avinu)
<? $attribution ?>
This is required for users to be able to log into Avinu and if ommitted the system will automatically append it to the end of the HTML in your theme.
To simplify transitioning between themes for Avinu users you are encouranged to identify dataspaces by including a dataspace name:
<? dataspace(bodytext) ?>
Standard names are:
If you omit the dataspace name the system will generate sequential numbers in its place. For dataspaces that do not fit into the above list of names you should either omit the dataspace name or use numbers:
<? dataspace(1) ?><? dataspace(2) ?><? dataspace(3) ?>
It is perfectly okay to combine dataspace naming styles as needed:
<div id="top"><? dataspace(topmenu) ?></div>
<div id="sidenote"><? dataspace() ?></div>
<div id="bodytext"><? dataspace(mainmenu) ?></div>
<div id="corner"><? dataspace() ?></div>
Avinu is standards-compliant so your theme must be as well; this means your HTML must validate as XHTML 1.1 and your design elements and page layout must be defined via CSS, not by using HTML markup. Layouts using HTML-tables will not be accepted. When you submit your theme for inclusion we will only use the content between the <body> tags, content within the <head> section as well as any properties set in the <body> tage (like <body onload="...">) will not be retained.
8-bit PNG files (aka. palette PNG with 256-colors or less) should be used for most graphic elements. Images in GIF format are acceptable but discouraged; 24-bit PNG (aka. true-color PNG) images should only be used in situations that require semi-transparency, smooth gradients or natural color-spectrum and must be at least visually-acceptable in IE6 (which renders semi-transparent sections as opaque.) JPGs may be used for photographs and elements requiring full 16-million-color depth.
Your images, Flash and other files should be optimized to be as small as reasonably possible. Ideally, themes should have a total file size of under 100kb (including all images and assets) but we understand that some really great designs may require larger-size files. Themes with a combined file size of over 200kb are unlikely to be accepted into Avinu. Also, please keep a reasonable limit on the number of files used in your theme as there is an overhead associated with each file that the browser requests; if your design requires a whole lot of seperate images then you should incorporate CSS-based "sprites" to consolidate your images into a single file.
Your theme must be cross-browser consistent; slight variations between browsers are acceptable but your theme must be 100% functional and mostly-identical in Firefox, IE 7 & 8 and in WebKit-based browsers like Google Chrome and Safari; you earn extra-credit for IE6, Opera Mini and other browsers but this is not required. To help you achieve cross-browser consistency, before your CSS is loaded Avinu will load a "CSS-reset" to neutralize the default variations between browsers. While you are creating your CSS you should make sure to start by including the reset in your CSS.
If you skip this step then your CSS will likely render very differently once in Avinu.
We ask that you please test out your theme in Avinu before sending it to us. To do this, just go to the Avinu home page and sign up for an Avinu Beyond the Cloud account and follow the instructions in your welcome email to log in. Once logged in add a few data units to the dataspaces with the default theme to better understand the dataspace concept. Once you have some data units on your page click the "Page Settings" link (as described in the welcome email) and from the screen that opens, there will be two buttons in the bottom-right corner for "File manager" and "Theme manager". The file manager is where you add your images, Flash files and assets. In the theme manager you click "Create new theme" and enter in your HTML and CSS (you can click-and-drag to strech the bottom-right corner of the form boxes if you need more typing space.) Once saved you will have options to preview as well as apply your theme.
Units are functional-elements that Avinu-users can to any dataspace. Units may be any combination of text, images, forms, YouTube videos, navigation elements and many other options. You can preset a specific unit to appear in a dataspace as well as control the content and settings for that unit. Essentially this allows your theme to predefine dataspaces containing menus, breadcrumb trails and other units. The user has the ability to modify, reposition or remove theme-units, this means that you can set up elements like a copyright notice as a text-unit in the position where it should appear and the user can then add the data specific to their application.
Units defined for your theme appear on every page that uses the theme (unless the user removes them), so in most cases text units should only contain dynamic AvinuCode and not actual text (unless the same text should appear on each page, like a copyright notice.)
To define units in your theme, simply create an Avinu Beyond the Cloud account (see previous step, "Testing your theme in Avinu") and set up any page of your Cloud site with the units as they should appear for all users and include the page URL when you submit your theme for inclusion in Avinu (explained in the next step.) Please be sure when adding the units to your Cloud site that you add them "to this page only" and not to "every page" or "every page in this section".
When your theme is completed, send an email to with the URL of the Avinu Beyond the Cloud page that uses your theme and defines the default theme units, as well as the theme's title, description & what you would like to appear in your attribution/credit. When you submit a theme to be included in Avinu you are affirming the release of your theme under the terms of the Creative Commons Attribution 3.0 license. You are free to release your theme in additional channels under other license models in any manner that you please, commercial or free open-source.
You are encouraged to add a "Navigation Menu" unit to every theme. By default this unit displays a menu using semantically-correct markup, essentially just a nested unordered list with the "navmenu" CSS class applied to it:
<li>Who we are</li>
<li>What we do</li>
To make this appear more like a typical navigation menu your CSS should include definitions for
A theme series is a set of similar themes with variations in appearance, like "Wood: dark-mahogany" and "Wood: light-pine". You create each theme in the series the same way you would a single theme but naming your dataspaces becomes more important to keep consistency between themes, a typical example would be:
<div id="leftcolumn"><? dataspace(mainmenu) ?></div>
<div id="centercolumn"><? dataspace(bodytext) ?></div>
<div id="rightcolumn"><? dataspace(sidebar) ?></div>
<div id="leftcolumn"><? dataspace(sidebar) ?></div>
<div id="centercolumn"><? dataspace(bodytext) ?></div>
<div id="rightcolumn"><? dataspace(mainmenu) ?></div>