Board styling - Detailed view
Open the list.html and use the Save As editor menu to create a view.html. Paste the following code below the div id="content-categories" element in #content of the view.html. (Do not delete the existing code that shows the list)
<div class="view-menu" style="margin-top: 15px;margin-bottom: 5px;"> <div class="fl"> <input type="button" value="Modify" /> <input type="button" value="Del" /> </div> <div class="fr"> <input type="button" value="Next Article" /> <input type="button" value="Prev Article" /> <input type="button" value="List" /> <input type="button" value="New" /> </div> </div> <table class="bbs-table"> <tr> <th style="width: 47px;text-align: left;vertical-align: top;font-size: 1em;">TITLE</th> <th style="text-align: left;color: #555;font-size: 1em;">What makes us happy?</th> </tr> </table> <div id="detail"> <div id="date-writer-hit">2014 10-09 17:50:30 by John hit 1330</div> <div id="article-content"> What makes us happy?What makes us happy?What makes us happy?<br /> What makes us happy?What makes us happy?What makes us happy?<br /> </div> <div id="file-list" style="text-align: right;"> <div class="attach-file"> <a href="#" title="filename" class="download">TEST.png</a> <a href="#" title="filekey">Del</a> </div> </div> </div> <!-- New Comment --> <form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post"> <div id="addComment"> <textarea id="addComment-ta" name="memo" rows="7" cols="50"></textarea> </div> <div style="text-align: right;"> <input type="submit" value="Submit" /> </div> </form> <!-- Comments start --> <div class="comments"> <span class="writer">xman</span> <span class="date">2011.12.11 12:14:32</span> <span class="modify-del"> <a href="javascript:modifyCommentToggle('5')">Modify</a> | <a href="javascript:deleteComment('5')">Del</a> </span> <p id="comment5">What makes us happy?</p> <form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;"> <input type="hidden" name="commentNo" value="5" /> <input type="hidden" name="boardCd" value="smalltalk" /> <input type="hidden" name="articleNo" value="12" /> <input type="hidden" name="curPage" value="1" /> <input type="hidden" name="searchWord" value="happy" /> <div class="fr"> <a href="javascript:document.forms.modifyCommentForm5.submit()">Submit</a> | <a href="javascript:modifyCommentToggle('5')">Cancel</a> </div> <div> <textarea class="comment-textarea" name="memo" rows="7" cols="50">What makes us happy?</textarea> </div> </form> </div> <!-- Comments end --> <div id="next-prev"> <p>Next Article : <a href="#">What makes us happy?</a></p> <p>Prev Article : <a href="#">What makes us happy?</a></p> </div> <div class="view-menu" style="margin-bottom: 47px;"> <div class="fl"> <input type="button" value="Modify" /> <input type="button" value="Del" /> </div> <div class="fr"> <input type="button" value="Next Article" /> <input type="button" value="Prev Article" /> <input type="button" value="List" /> <input type="button" value="New" /> </div> </div>
In comment5 and modifyCommentForm5, 5 is the comment number. We should give this number programmatically.
JavaScript toggle function for modifying comments
Create a working JavaScript function by clicking on the Modify link. If you click on the Modify link, a modification form containing the text area should appear. (modification form is not visible at first)
Paste the following JavaScript code before </ head>:
<script type="text/javascript"> function modifyCommentToggle(articleNo) { var p_id = "comment" + articleNo; var p = document.getElementById(p_id); var form_id = "modifyCommentForm" + articleNo; var form = document.getElementById(form_id); var p_display; var form_display; if (p.style.display) { p_display = ''; form_display = 'none'; } else { p_display = 'none'; form_display = ''; } p.style.display = p_display; form.style.display = form_display; } </script>
Click the Modify and Cancel links to make sure the JavaScript function is working correctly.
Modify and Cancel links work the same way. If you click these links when the modify form is visible, the modify form disappears. If you click the same link when the modification form is not visible, the modification form appears. The p element works the opposite. This feature is called a toggle.
Styling Date, Writer, Hit
[Before]
[HTML]
<span id="date-writer-hit>2014 10-09 17:50:30 by John hit 1330</span>
[CSS]
#date-writer-hit { display: block; margin: 0; padding: 0; font-size: 11px; color: #555; text-align: right; }
[After]
Styling #article-content and #attach-file
[Before]
[HTML]
<div id="article-content"> What makes us happy?What makes us happy?What makes us happy?<br /> What makes us happy?What makes us happy?What makes us happy?<br /> </div> <div id="file-list" style="text-align: right;"> <div class="attach-file"> <a href="#" title="filename" class="download">TEST.png</a> <a href="#" title="filekey">Del</a> </div> </div>
[CSS]
#article-content { font-size: 0.9em; color: #333; } .attach-file { font-size: 11px; line-height: 1.3; }
Styling Comment writer, Comment creation date, Modify and Del links, Comment body
[Before]
[HTML]
<span class="writer">xman</span> <span class="date">2011.12.11 12:14:32</span> <span class="modify-del"> <a href="javascript:modifyCommentToggle('5')">Modify</a> | <a href="javascript:deleteComment('5')">Del</a> </span> <p id="comment5">What makes us happy?</p>
[CSS]
.comments { border-top: 1px solid #ebebeb; } .comments > span.writer { display: block; float: left; margin: 3px; padding: 0; font-size: 12px; font-weight: bold; color: #555; } .comments > span.date { display: block; float: left; margin: 3px; padding: 0; font-size: 12px; color: #555; } .comments > span.modify-del { display: block; float: right; margin: 3px; padding: 0; font-size: 12px; color: #555; } .comments a { color: #555; text-decoration: none; font-size: 11px; } .comments a:hover { color: #555; text-decoration: underline; } .comments > p { clear: both; margin: 0; padding: 0 3px 3px 3px; color: #555; font-size: 11px; }
[After]
Styling Comment modify form
[Before]
[HTML]
<form id="modifyCommentForm5" class="comment-form" action="updateComment.jsp" method="post" style="display: none;"> <input type="hidden" name="commentNo" value="5" /> <input type="hidden" name="boardCd" value="smalltalk" /> <input type="hidden" name="articleNo" value="12" /> <input type="hidden" name="curPage" value="1" /> <input type="hidden" name="searchWord" value="happy" /> <div style="text-align: right;"> <a href="javascript:document.forms.modifyCommentForm5.submit()">Submit</a> | <a href="javascript:modifyCommentToggle('5')">Cancel</a> </div> <div> <textarea class="comment-textarea" name="memo" rows="7" cols="50">What makes us happy?.</textarea> </div> </form>
[CSS]
.comment-form { clear: both; padding: 0.22em 2.22em 0.22em 3.22em; } .comment-textarea { border: 1px solid silver; padding: 3px; width: 99%; color:#555; background-color: #eee; font-size: 11px; }
[After]
Styling New comment form
[Before]
[HTML]
<form id="addCommentForm" style="margin: 10px 0;" action="addComment.jsp" method="post"> <div id="addComment"> <textarea style="addComment-ta" name="memo" rows="7" cols="50"></textarea> </div> <div style="text-align: right;"> <input type="submit" value="Submit" /> </div> </form>
[CSS]
#addComment { margin-bottom: 5px; padding: 0.22em; border: 1px solid #eee; background-color: #fafbf7; } #addComment textarea { width: 99%; padding: 3px; border: 0; color: #555; }
[After]
Styling Next Article and Prev Article
[Before]
[HTML]
<div id="next-prev"> <p>Next Article : <a href="#">What makes us happy?</a></p> <p>Prev Article : <a href="#">What makes us happy?</a></p> </div>
[CSS]
#next-prev { margin: 7px 0; border-top: 1px solid #e1e1e1; } #next-prev > p { margin: 0; padding: 5px; border-bottom: 1px solid #e1e1e1; font-size: 12px; color: #333; } #next-prev > p > a { color: #333; text-decoration: none; } #next-prev > p > a:hover { color: #333; text-decoration: underline; }
[After]
Positioning Modify, Del, Next Article, Prev Article, List, New Butons
[Before]
The following code is in two places in view.html.
[HTML]
<div class="view-menu" ..> <div class="fl"> <input type="button" value="Modify" /> <input type="button" value="Del" /> </div> <div class="fr"> <input type="button" value="Next Article" /> <input type="button" value="Prev Article" /> <input type="button" value="List" /> <input type="button" value="New" /> </div> </div>
[CSS]
#view-menu { height: 22px; } .fl { float: left; } .fr { float: right; }
[After]