|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| __NOTOC__
| | #REDIRECT [[BlogComponent]] |
| | |
| 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:====
| |
| | |
| <pre>
| |
| <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>
| |
| </pre>
| |
| | |
| | |
| 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):====
| |
| | |
| <pre>
| |
| <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>
| |
| </pre>
| |
| | |
| | |
| 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:====
| |
| | |
| <pre>
| |
| <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>
| |
| </pre>
| |
| | |
| | |
| This html is dynamically generated for the comments section of a Viviti blog.
| |
| | |
| ====Add comment form dynamically generated html:====
| |
| | |
| <pre>
| |
| <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>
| |
| </pre>
| |
| | |
| | |
| This html is dynamically generated for the comments section of a Viviti blog.
| |
| | |
| | |
| [[Category:Components]] | |
| [[Category:Blogging]]
| |
