Making your own Theme: Difference between revisions


No edit summary
 
(20 intermediate revisions by 4 users not shown)
Line 1: Line 1:
This article is intended to help you understand what you can do when creating a theme for Viviti.
This article is intended to help you understand what you can do when creating a theme for website builder . At the minimum, a website builder theme consists of a default layout (called default.html) and a directory named assets which contains all the images, css, javascript, flash, etc. [[Making_your_own_Theme_using_Multiple_Layouts|Multiple layouts]] can be created simply by making new html files.


==Content Replacement Rules==


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




==Content Replacement Rules==
'''The only required element is:'''


{| class="wikitable sortable" border=1 cellspacing=0 cellpadding=3
|-
! style="background:#C0C0C0" | Selector
! style="background:#C0C0C0" | Description
! style="background:#C0C0C0" | Example
! style="background:#C0C0C0" | More Information
|-
| <source lang="html4strict">#location_0.location</source>
| Content replaced with page components
| <source lang="html4strict"><div id="location_0" class="location"></div></source>
| [[Content Locations | Details]]
|}


Content replacement is done by using some simple CSS selectors. (http://www.w3.org/TR/REC-CSS2/selector.html)
<br>
 
'''Recommended elements are:'''
 
'''Required elements are:'''


{| class="wikitable sortable" border=1 cellspacing=0 cellpadding=3
{| class="wikitable sortable" border=1 cellspacing=0 cellpadding=3
|-
|-
! Selector !! Description !! Example !! More Information
! style="background:#C0C0C0" | Selector
! style="background:#C0C0C0" | Description
! style="background:#C0C0C0" | Example
! style="background:#C0C0C0" | More Information
|-
|-
| Something || this is the description of something || <nowiki><something></something></nowiki> || [[here]]
| <source lang="html4strict">#site_heading</source>
| Content replaced with the site heading
| <source lang="html4strict"><h1 id="site_heading"></h1></source>
| [[Site Heading | Details]]
|-
|-
| you can also do this
| <source lang="html4strict">#site_subheading</source>
| see?
| Content replaced with the site subheading
| fancy!
| <source lang="html4strict"><h2 id="site_subheading"></h2></source>
| yep
| [[Site Sub-Heading | Details]]
|-
|-
| <source lang="html4strict">#primary_navigation</source>
| Content replaced with navigation (UL>LI>A)
| <source lang="html4strict"><div id="primary_navigation"></div></source>
| [[Primary Navigation | Details]]
|-
| <source lang="html4strict">#copyright</source>
| Content replaced with copyright text
| <source lang="html4strict"><div id="copyright"></div></source>
| [[Copyright | Details]]
|}
|}
<table width="950" border="0" cellpadding="2" align="left" bgColor="white">
<tr>
<td width="290" align="left" valign="middle" bgcolor="#C0C0C0">
<b>Selector</b>
</td>
<td width="100" align="left" valign="middle" bgcolor="#C0C0C0">
<b>Description</b>
</td>
<td width="316.6666666666667" align="left" valign="middle" bgcolor="#C0C0C0">
<b>Example</b>
</td>
<td width="316.6666666666667" align="left" valign="middle" bgcolor="#C0C0C0">
<b>More Information</b>
</td>
</tr>
<tr>
<td width="290" align="left" valign="middle">
<source lang="html4strict">#site_heading</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with the site heading
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><h1 id="site_heading"></h1></source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
[[Site Heading | Details]]
</td>
</tr>
<tr>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict">#site_subheading</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with the site subheading
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><h2 id="site_heading"></h2></source></td>
<td width="316.6666666666667" align="left" valign="middle">
[[Site Sub-Heading | Details]]
</td>
</tr>
<tr>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict">#location_0.location</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with page components
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><div id="location_0" class="location"></div></source></td>
<td width="316.6666666666667" align="left" valign="middle">
[[Content Locations | Details]]
</td>
</tr>
<tr>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict">#primary_navigation</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with navigation (UL>LI>A)
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><div id="primary_navigation"></div></source></td>
<td width="316.6666666666667" align="left" valign="middle">
[[Primary Navigation | Details]]
</td>
</tr>
<tr>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict">#copyright</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with copyright text
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><div id="copyright"></div></source></td>
<td width="316.6666666666667" align="left" valign="middle">
[[Copyright | Details]]
</td>
</tr>
</table>


<br>
<br>
<br>
'''Optional elements are:'''
'''Optional elements are:'''


<table width="950" border="0" cellpadding="2" align="left" bgColor="white">
{| class="wikitable sortable" border=1 cellspacing=0 cellpadding=3
<tr>
|-
<td width="290" align="left" valign="middle" bgcolor="#C0C0C0">
! style="background:#C0C0C0" | Selector
<b>Selector</b>
! style="background:#C0C0C0" | Description
</td>
! style="background:#C0C0C0" | Example
<td width="316.6666666666667" align="left" valign="middle" bgcolor="#C0C0C0">
! style="background:#C0C0C0" | More Information
<b>Description</b>
|-
</td>
| <source lang="html4strict">#page_name</source>
<td width="316.6666666666667" align="left" valign="middle" bgcolor="#C0C0C0">
| Content replaced with active page name
<b>Example</b>
| <source lang="html4strict"><div id="page_name"></div></source>
</td>
| [[Page Name | Details]]
<td width="316.6666666666667" align="left" valign="middle" bgcolor="#C0C0C0">
|-
<b>More Information</b>
| <source lang="html4strict">#location_N.location</source>
</td>
| Content replaced with components
</tr>
| <source lang="html4strict"><div id="location_1" class="location"></div></source>
 
| [[Content Locations | Details]]
<tr>
|}
<td width="290" align="left" valign="middle">
<source lang="html4strict">#page_name</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with active page name
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><div id="page_name"></div></source></td>
<td width="316.6666666666667" align="left" valign="middle">
Details
</td>
</tr>
 
<tr>
<td width="290" align="left" valign="middle">
<source lang="html4strict">#location_N.location</source>
</td>
<td width="316.6666666666667" align="left" valign="middle">
Content replaced with components
</td>
<td width="316.6666666666667" align="left" valign="middle">
<source lang="html4strict"><div id="location_1" class="location"></div></source></td>
<td width="316.6666666666667" align="left" valign="middle">
[[Content Locations | Details]]
</td>
</tr>
</table>
 




Line 173: Line 80:
* 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!
* 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.====
==Assets==
        
        
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!  
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 <nowiki>(http://yoursite.viviti.com/assets)</nowiki>
The assets folder will be uploaded as-is to the document root of your website <nowiki>(http://yoursite.com/assets)</nowiki>
        
        
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.
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====
==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.).  
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.  
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
You can view it at: http://builderexample.com/stylesheets/base.css
 
   
====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.)
==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.)


==Installing==
==Installing==


When you are ready to upload your custom theme, please see the [[Installing Your Theme]] article.
==Further Reading==


When you are ready to upload your custom theme, please see the [[Installing Your Theme]] article.
More information is available on the [[Creating Website Builder Themes]] page.


[[Category:Creating Viviti Themes]]
[[Category:Creating Website Builder Themes]]

Latest revision as of 15:11, 16 November 2010

This article is intended to help you understand what you can do when creating a theme for website builder . At the minimum, a website builder theme consists of a default layout (called default.html) and a directory named assets which contains all the images, css, javascript, flash, etc. Multiple layouts can be created simply by making new html files.

Content Replacement Rules

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


The only required element is:

Selector Description Example More Information
#location_0.location
Content replaced with page components
<div id="location_0" class="location"></div>
Details


Recommended elements are:

Selector Description Example More Information
#site_heading
Content replaced with the site heading
<h1 id="site_heading"></h1>
Details
#site_subheading
Content replaced with the site subheading
<h2 id="site_subheading"></h2>
Details
#primary_navigation
Content replaced with navigation (UL>LI>A)
<div id="primary_navigation"></div>
Details
#copyright
Content replaced with copyright text
<div id="copyright"></div>
Details


Optional elements are:

Selector Description Example More Information
#page_name
Content replaced with active page name
<div id="page_name"></div>
Details
#location_N.location
Content replaced with components
<div id="location_1" class="location"></div>
Details


  • 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!


Assets

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.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://builderexample.com/stylesheets/base.css

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.)

Installing

When you are ready to upload your custom theme, please see the Installing Your Theme article.

Further Reading

More information is available on the Creating Website Builder Themes page.