Components

Content Components are chunks of html that are dynamically generated and inserted into Content Locations. Each content component can be edited, dragged, or removed dynamically using the Viviti editor toolbar. Here is a list of content components that can be styled:

   * Custom
   * HTML
   * Navigation
   * Friends
   * Blog
   * Feed
   * Xbox Gamertag
   * Image gallery
   * Lastfm Component

Although your Viviti theme will work if you do not apply any css styles to the html for the optional content components, you will need to style them if you want to give them a unique design rather than the default style that is applied.

---

HTML

An HTML component is used for adding custom html chunks.

HTML component dynamically generated html:

<div class="component html_component">
  <h2><span>html component title</span></h2>
  <div class="component_content">
    <div>
      html component content
    </div>
  </div>
</div>

When a user adds an html component to their Viviti site, this is the html that is dynamically generated.

---

Navigation

A navigation component is used for adding navigation items in the form of lists of links.

Navigation component dynamically generated html:

<div 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>

When a user adds a navigation component to their Viviti site, this is the html that is dynamically generated.

---

Friends

A friends component is used for adding a list of friends from various web sites including Flickr, LiveJournal, LinkedIn, and any URL.

Friends component dynamically generated html:

<div class="component friend_component">
  <h2>
    <span>Friends Component Title</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>

When a user adds a friends component to their Viviti site, this is the html that is dynamically generated.

You can disable the buddy icons for the friends in the friends component and it will alter the html that is outputted.

Friends component with buddy icons disabled:

<div class="component friend_component">
  <h2>
    <span>Friends Component Title</span>
  </h2>
  <div class="component_content">
    <ul>
      <li>
        <a href="">Friend Name</a>
      </li>
    </ul>
  </div>
</div>

When a user adds a friends component to their Viviti site, this is the html that is dynamically generated if they have buddy icons disabled.

---

Blog

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:

   * Blog posts
   * Comments
   * A comments submission form
   * A blog archive page

For the best results you need to style each piece. Below you can see the html for each piece of the blog component.

Blog post dynamically generated html - Full Post and Summary Post:

<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 here</a></h3>
      <div class="post_wrapper">
        <div class="date">Posted date goes here</div>
        <div class="content">
          <p>post content goes here</p>
        </div>

        <div class="metadata">
          <div class="comments"><a href="">0 comments</a></div>
          <span class="category">
            Posted in <a href="">category name here</a>.
          </span>
          <div class="tags"><a href="">a tag</a></div>
        </div>
      </div>
    </div>
    
  </div>
</div>  

When a user adds a blog component with the Full setting specified, this is the html that is inserted.

Blog post dynamically generated html - Do Not Display Post (show titles only):

<div class="component blog_component">
  <h2>
    <span>blog title goes here</span>
  </h2>
  <div class="component_content">
    <ul>
      <li>
        <a href="">blog post title goes here</a>
      </li>
    </ul>
  </div>
</div>  

When a user adds a blog component with the Do Not Display setting specified, this is the html that is inserted.

Comments area dynamically generated html:

<div id="comments">  
  <div class="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>

This html is dynamically generated for the comments section of a Viviti blog.

Add comment form dynamically generated html:

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

This html is dynamically generated for the comments section of a Viviti blog.

---

Feed

A feed component is used for adding RSS or similar feeds.

Feed component dynamically generated html (showing titles only):

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

When a user adds a feed component to their Viviti site, this is the html that is dynamically generated.

Feed component dynamically generated html (showing full content):

<div class="component feed_component">
  <h2>Feed Component Title</h2>
  <div class="component_content">
    <h3>Feed Title</h3>
    <div class="feed_entry">
      <h3 class="title">
        <a href="">Entry Title Goes Here
      </h3>
      <div class="content">
      Entry Content Goes Here
      </div>
    </div>
  </div>
</div>

When a user adds a feed component to their Viviti site, this is the html that is dynamically generated.

---

Xbox Gamertag

An Xbox Gamertag component is used for adding a Gamertag.

Gamertag component dynamically generated html:

<div class="component gamercard_component">
  <h2><span>gamertag</span></h2>
  <div class="component_content">
    <div class="gamer_card">
    </div>
  </div>
</div>

When a user adds an XboxGamertag to their Viviti site, this is the html that is dynamically generated.

---

Image gallery

An Image Gallery component is used for adding a number of images to your site, in a variety of ways.

Image Gallery component dynamically generated html:

<div class="component image_component">
  <h2>
    <span>Image Gallery Title Here</span>
  </h2>
  <div class="component_content">
    <div class="images">
      <div class="image">
        <a href="">
          <img src="" />
        </a>
      </div>
    </div>
  </div>
</div>

When a user adds an Image Gallery to their Viviti site, this is the html that is dynamically generated.

---

Lastfm Component

A Lastfm component is used for displaying information about what music you listen to.

Lastfm top artists component dynamically generated html:

   <div class="component lastfm_component">
     <h2>Title goes here</h2>
     <div class="component_content">
       <div class="top_artists">
         <div class="first even item_0 lastfm_entry artist">
           <span class="lastfm_image">
             <img width="48" height="48" src=""/>
           </span>
           <div class="lastfm_metadata">
             <span class="lastfm_artist"></span>
             <span class="lastfm_playcount"></span>
           </div>
         </div>

         <div class="last odd item_1 lastfm_entry artist">
           <span class="lastfm_image">
             <img width="48" height="48" src=""/>
           </span>
           <div class="lastfm_metadata">
             <span class="lastfm_artist"></span>
             <span class="lastfm_playcount"></span>
           </div>
        </div>
      </div>
    </div>
  </div>  

Fig 1.1 - When a user adds a lastfm component to their Viviti site with the top artists option selected, this is the html that is dynamically generated.

Lastfm top tracks component dynamically generated html:

   <div class="component lastfm_component">
     <h2>Title goes here</h2>
     <div class="component_content">
       <div class="top_tracks">
         <div class="first even item_0 lastfm_entry song">
           <span class="lastfm_track_name"></span>
           <span class="lastfm_artist"></span>
           <span class="lastfm_playcount"></span>
         </div>

         <div class="last odd item_1 lastfm_entry song">
           <span class="lastfm_track_name"></span>           
           <span class="lastfm_artist"></span>
           <span class="lastfm_playcount"></span>
        </div>
      </div>
    </div>
  </div>  

Fig 1.1 - When a user adds a lastfm component to their Viviti site with the top tracks option selected, this is the html that is dynamically generated.