Sample Theme: Difference between revisions
No edit summary |
|||
| Line 1: | Line 1: | ||
The sample theme below will give you a clear example of the minimal requirements necessary to create a working theme. | The sample theme below will give you a clear example of the minimal requirements necessary to create a working theme. | ||
==Sample Theme for Download== | |||
[https://wiki.viviti.com/images/5/54/Blank_theme.zip blank_theme.zip] ZIP Archive A blank theme to work from | [https://wiki.viviti.com/images/5/54/Blank_theme.zip blank_theme.zip] ZIP Archive A blank theme to work from | ||
| Line 10: | Line 9: | ||
If you downloaded the file above, you should recognize the html below. Here is an example showing only the required html elements for a theme and nothing more: | If you downloaded the file above, you should recognize the html below. Here is an example showing only the required html elements for a theme and nothing more: | ||
==Blank theme HTML showing only required elements== | |||
<pre> | <pre> | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
| Line 36: | Line 35: | ||
In the code sample above, the required html elements are noted with arrows. | In the code sample above, the required html elements are noted with arrows. | ||
If the above was all the html in your theme, it would work; the requirements are very minimal. | If the above was all the html in your theme, it would work; the requirements are very minimal. | ||
'''We will automatically remove any html you place inside any of the required elements and then populate them with predefined html based on any content you add later using the editor toolbar.''' | '''We will automatically remove any html you place inside any of the required elements and then populate them with predefined html based on any content you add later using the editor toolbar.''' | ||
In addition to the required html elements, you will be able to add Optional [[:Category:Components | Components]] such as blogs, friends lists, photo galleries, and more using the Viviti editor toolbar. These differ from the [[required HTML Elements]] in that they are optional rather than required, but you can style them in the same way, by knowing what html gets inserted and creating css for it in your stylesheet. | In addition to the required html elements, you will be able to add Optional [[:Category:Components | Components]] such as blogs, friends lists, photo galleries, and more using the Viviti editor toolbar. These differ from the [[required HTML Elements]] in that they are optional rather than required, but you can style them in the same way, by knowing what html gets inserted and creating css for it in your stylesheet. | ||
[[Category:Creating Themes]] | [[Category:Creating Themes]] | ||
Revision as of 14:19, 16 November 2010
The sample theme below will give you a clear example of the minimal requirements necessary to create a working theme.
Sample Theme for Download
blank_theme.zip ZIP Archive A blank theme to work from
This includes all the files you need to get started.
If you downloaded the file above, you should recognize the html below. Here is an example showing only the required html elements for a theme and nothing more:
Blank theme HTML showing only required elements
<!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="copyright">
Copyright content
</div>
</body>
</html>
In the code sample above, the required html elements are noted with arrows.
If the above was all the html in your theme, it would work; the requirements are very minimal.
We will automatically remove any html you place inside any of the required elements and then populate them with predefined html based on any content you add later using the editor toolbar.
In addition to the required html elements, you will be able to add Optional Components such as blogs, friends lists, photo galleries, and more using the Viviti editor toolbar. These differ from the required HTML Elements in that they are optional rather than required, but you can style them in the same way, by knowing what html gets inserted and creating css for it in your stylesheet.