Blog Component Generated HTML: Difference between revisions
No edit summary |
|||
Line 15: | Line 15: | ||
====Blog post dynamically generated html - Full Post and Summary Post:==== | ====Blog post dynamically generated html - Full Post and Summary Post:==== | ||
<br> | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
Line 43: | Line 45: | ||
</source> | </source> | ||
When a user adds a blog component with the Full setting specified, this is the html that is inserted. | When a user adds a blog component with the Full setting specified, this is the html that is inserted. | ||
Line 48: | Line 51: | ||
<hr> | <hr> | ||
====Blog post dynamically generated html - Do Not Display Post (show titles only):==== | |||
<br> | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
Line 67: | Line 70: | ||
</source> | </source> | ||
When a user adds a blog component with the Do Not Display setting specified, this is the html that is inserted. | When a user adds a blog component with the Do Not Display setting specified, this is the html that is inserted. | ||
Line 72: | Line 76: | ||
<hr> | <hr> | ||
====Comments area dynamically generated html:==== | |||
<br> | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
Line 93: | Line 97: | ||
</source> | </source> | ||
This html is dynamically generated for the comments section of a Viviti blog. | This html is dynamically generated for the comments section of a Viviti blog. | ||
Line 98: | Line 103: | ||
<hr> | <hr> | ||
====Add comment form dynamically generated html:==== | |||
<br> | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
Line 131: | Line 136: | ||
</source> | </source> | ||
This html is dynamically generated for the comments section of a Viviti blog. | This html is dynamically generated for the comments section of a Viviti blog. |
Revision as of 08:59, 2 April 2009
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.