 blank_viviti_theme.zip |
ZIP Archive | A blank Viviti theme to work from |
Viviti is a cutting edge, hosted, web publishing platform made for people with no design experience, but powerful enough for web designers of any skill level to use. Put simply, Viviti is an easy way to create or maintain blogs and web sites with usability and web standards in mind.
This document will show you:
If you are a web designer who writes compliant css and html markup, this document will be a breeze for you. If you're a web designer who knows only basic css and html, we've tried to include many html and css code examples to copy-and-paste to help you along.
Viviti themes are simply web sites, written in normal html and css, with content locations where dynamic content is automatically placed. Designing a Viviti theme is as simple as creating an html document that includes:
Each of the above elements is defined by a css id or class name, and can be placed anywhere in the html document.
The blank Viviti theme below will give you a quick glimpse into the required file structure and html elements of all Viviti themes.
| blank_viviti_theme.zip |
ZIP Archive | A blank Viviti theme to work from |
In the sample blank theme above, you'll notice the file structure of a Viviti theme is slightly different than you might be used to working. The theme file itself should always be named default.html and any images, js, or css files should be placed in the /assets/ directory. You can place sub-directories into the /assets/ directory if you want to organize your files better.
If you downloaded the file above, you should recognize the html below. Here is an example showing only the required html for a Viviti theme and nothing more:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Viviti Example Theme</title>
</head>
<body>
<h1 id="site_heading">Site Heading</h1>
<h2 id="site_subheading">Site Subheading</h2>
<div id="primary_navigation">Primary navigation list</div>
<div id="location_0" class="location">
Main site content
</div>
<div id="location_1" class="location">
Other site content
</div>
<div id="copyright">
Copyright content
</div>
</body>
</html>
If the above was all the html in your Viviti theme, it would work; the requirements are very minimal. Viviti will automatically remove everything inside any of the required elements and then populate them with predefined html based on any content that's later added using the editor.
The next section outlines the predefined types of content that Viviti can manage. It also gives examples of the html that is automatically created and inserted for each type of content.
This section will outline what html is inserted into each of the required content components, such as:
The required h1 with the id of #site_heading is where the Viviti sites title will be inserted, with a span for styling purposes and a link home.
<span> <a href="">site heading goes here</a> </span>
The required h2 with the id of #site_subheading is where the Viviti sites title will be inserted, with a span you can style however you please.
<span> <a href="">site subheading goes here</a> </span>
The required element with the id of #primary_navigation is where the main navigation will be inserted as a list.
<ul>
<li>
<a class="active" href="/">Home</a>
</li>
<li>
<a href="/about">About Me</a>
</li>
</ul>
The required element with the id of #copyright is where the copyright information will be inserted. This information can be modified easily in the Viviti editor.
<p>© Copyright 2008 Your Name Here.</p>
In addition to the copyright information, directly below the element with the id of #copyright, Viviti will insert a div with the id of #powered_by for a link back to the Viviti site and theme designer credit. The html for this element is as follows:
<div id="powered_by"> <a href="http://viviti.com">viviti mini logo goes here</a> Powered by <a href="http://viviti.com">Viviti</a> ~ Designed by <a href="">theme designers name goes here</a> </div>
Components are chunks of html that are dynamically generated and placed into content locations. When editing a Viviti web site, each component can be edited, dragged, or removed dynamically. Here is a list of components that can be styled to your liking:
A custom component is used for text and/or images.
<div id="" class="component custom_component">
<h2><span>custom component title</span></h2>
<div class="component_content">
<div>
<p>custom component content</p>
</div>
</div>
</div>
An HTML component is used for adding custom html chunks.
<div id="" class="component html_component">
<h2><span>html component title</span></h2>
<div class="component_content">
<div>
html component content
</div>
</div>
</div>
A navigation component is used for adding navigation items in the form of lists of links.
<div id="" class="component navigation_component">
<h2><span>navigation component title</span></h2>
<div class="component_content">
<ul class="navigation">
<li>
<div class="navigation_label">navigation label name</div>
<ul>
<li>sub link name</li>
</ul>
</li>
<li>link name</li>
</ul>
</div>
</div>
A friends component is used when adding a list of friends.
<div id="" class="component friend_component">
<h2><span>my friends</span></h2>
<div class="component_content">
<ul class="friends">
<li>
<a href="">
<img width="48" height="48" src=""/>
<div class="friend_name">friend name</div>
</a>
</li>
</ul>
</div>
</div>
The blog component is unique in that it has more than one section of html to style over multiple dynamically created pages. The blog component consists of the following:
For the best results you need to style each piece. Below you can see the html for each piece of the blog component.
<div class="component blog_component">
<h2><span>blog component title</span</h2>
<div class="component_content">
<div class="blog_post">
<h3 class="title">
<a href="">blog post title goes here</a>
</h3>
<div class="date">Posted on April 8, 2008</div>
<div class="content">
<p>blog post content goes here</p>
</div>
<div class="comments">
<a href="">0 comments</a>
</div>
</div>
</div>
</div>
<div id="comments">
<div class="comment comment_even">
<span class="comment_number">
<a href="">Comment Number Goes Here</a>
</span>
<span class="comment_name">
<a href="">Name Goes Here</a>
</span>
<span class="date">Date Goes Here</span>
<div class="content">
<p>Comment Goes Here</p>
</div>
</div>
</div>
<div id="comment_form_area">
<h2>Add comment</h2>
<form id="comment_form">
<div>
<div class="input_wrapper">
<label>Name: </label>
<input id="new_comment_name" type="text" size="30" />
</div>
<div class="input_wrapper">
<label>Email: </label>
<input id="new_comment_email" type="text" size="30" />
</div>
<div class="input_wrapper">
<label>Website: </label>
<input id="new_comment_website" type="text" size="30" />
</div>
<div class="input_wrapper textarea_wrapper">
<label>Comment: </label>
<textarea id="new_comment_body" cols="40" rows="20" />
</div>
<div class="submit_wrapper">
<input type="submit" value="Submit" />
</div>
</div>
</form>
</div>
A feed component is used for adding RSS or related type feeds.
<div class="component feed_component">
<h2><span>feed title</span></h2>
<div class="component_content">
<h3>feed name</h3>
<ul>
<li>
<a href="">feed item title</a>
</li>
</ul>
</div>
</div>
An Xbox Gamertag component is used for adding a gamertag.
<div class="component gamercard_component">
<h2><span>gamertag</span></h2>
<div class="component_content">
<div class="gamer_card">
</div>
</div>
</div>