View source for Blog Component Generated HTML

__NOTOC__

The [[BlogComponent | 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.

==Generated Blog Post HTML (Full Post and Summary Post)==
<source lang="html4strict">

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

</source>

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

==Generated Blog Post HTML (Show Titles Only)==
<source lang="html4strict">

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

</source>


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

==Generated Comments HTML==
<source lang="html4strict">

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

</source>

==Generated Comment Form HTML==
<source lang="html4strict">

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

</source>

[[Category:Blogging]]
[[Category:Dynamically Generated HTML]]