Making your own Theme

This article is intended to help you understand what you can do when creating a theme for Viviti.

Content Replacement Rules

Content replacement is done by using some simple CSS selectors. (http://www.w3.org/TR/REC-CSS2/selector.html)

Required elements are:

#site_heading           Content replaced with the site heading        example: <h1 id="site_heading"></h1>
      
#site_subheading        Content replaced with site subheading         example: <h2 id="site_subheading"></h2>
      
#location_0.location    Content replaced with page components         example: <div id="location_0" class="location"></div>
      
#primary_navigation     Content replaced with navigation (UL>LI>A)    example: <div id="primary_navigation></div>
      
#copyright              Content replaced with copyright text          example: <div id="copyright"></div>

Optional elements are:

  
#page_name              Content replaced with active page name        example: <div id="page_name"></div>
      
#location_N.location    Content replaced with components              example: <div id="location_1" class="location"></div>

• All content areas should be a #location_N.location which will allow content to be added and drag and dropped to/from the area.

• You can create as many of these as you want, just make sure you give them a unique location id (#location_1, #location_2, etc.)

• Any content inside any of these elements will be replaced, so feel free to put placeholder content in to assist you in designing your theme!

Other Notes

Assets - Images, CSS, Flash, Javascript, etc.

You can use whatever you want to make your website how you want it - the only rule is that these files have to reside inside the 'assets' folder. that's it!

The assets folder will be uploaded as-is to the document root of your website (http://yoursite.viviti.com/assets)

Link to them relatively (src='assets/file.jpg') to make it easier for you to work on locally, and we will fix them to be absolute when the theme is uploaded to ensure everything works with nested pages.

Base Stylesheet

A 'base' stylesheet will be always be included which contains some basic CSS declarations for some very basic styling of various elements (form elements with errors, various component-specific stuff, etc.).

This will always be inserted before your stylesheets to ensure you can override anything you need.

You can view it at: http://blog.viviti.com/stylesheets/base.css

Powered By Viviti

The following div will be injected right after your copyright (#copyright):

<div id="powered_by"><a href=""><img src="/images/viviti_badge.png"/></a></div>

We would love it if you leave it there and use the id to style it so it fits into your site nicely, but if you really don't want it you can always add the following to your stylesheet to make it go away: #powered_by { display: none }

Also, if you create a #powered_by element we will simply leave it there and not add the default. This allows you to make a more appropriate #powered_by (text only, different image, whatever you want!) for your site.

Titles and Headings

When titles and headings are inserted they will be wrapped in a span. The span will not appear if there is not title set, which allows you to style things differently if text has been omitted - but still giving you an element that always appears in that location regardless of the text being empty or not. (Useful for rounded corners, graphical boxes around components, etc.)