Blog Component Generated HTML

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.