[Tutorial] Hide item comments in Fancybox with Twitter style

[mmcsus]

This is instructions for hiding item comments form and showing in Fancybox.

Find attached Fancybox_comments_item.php

You can rename this to item.php and replace your item.php in your theme or:

Open the file in your editor and find the modifications marked with:

########## You will find some comments here   ##########

This has been tested in Osclass 3.1.1 modern.





Edit your style.css find this:

Code: [Select]

/* Comments */
.item #comments { clear:both; float:left; margin-bottom:35px; width:100%; }
.item #comments .comments_list { border-bottom: 1px dotted #DDD; margin-bottom:20px;  }
.item #comments .comment { background:url(images/comments_quotes.gif) no-repeat 10px 0; margin-bottom:15px; padding:7px 0 0 60px; }
.item #comments .comment h3 { color:#666; margin-bottom: 5px; }
.item #comments .comment h3 em { color:#888; font-size:12px; font-weight:normal; }
.item #comments .comment p { color:#878787; font-style:italic; line-height:18px; }
.item #comments .pagination { text-align: right; margin-right: 10px; margin-bottom: 15px; }
.item #comments .pagination a { border: 1px dotted #AAA; padding: 5px 8px; }
.item #comments .pagination a.searchPaginationSelected { background-color: #f7f7f7; }
.item #comments .pagination a.searchPaginationNext, .item #comments a.searchPaginationPrev,
.item #comments .pagination a.searchPaginationFirst, .item #comments a.searchPaginationLast { border: 0px; text-decoration: none; }
.item #comments .pagination a.searchPaginationNext:hover, .item #comments a.searchPaginationPrev:hover,
.item #comments .pagination a.searchPaginationFirst:hover, .item #comments a.searchPaginationLast:hover { background-color: #ffffff; }
.item #comments a:hover { background-color: #f7f7f7; }
.item #comments form { clear:both; display:inline; float:left; margin-left:60px; width:540px; }
.item #comments form h3 { color:#000; margin-bottom:10px; }
.item #comments form label { clear:left; float:left; margin-right:10px; padding-top:4px; width:140px; }
.item #comments form input { border:1px solid #BBB; float:left; margin-bottom:5px; padding:5px; width:250px; }
.item #comments form textarea { border:1px solid #BBB; float:left; padding:5px; width:375px; height: 150px; }
.item #comments form .button { clear:both; float:left; margin:10px 0 0 150px; }
 Change to:
 

Code: [Select]

/* Comments Fanceybox + Twitter style */
#comments { clear:both; float:left;background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05); width:100%; }
#comments .comments_list { border-bottom: 1px dotted #DDD; margin-bottom:20px;  }
#comments .comment { background:url(images/comments_quotes.gif) no-repeat 10px 0; margin-bottom:15px; padding:7px 0 0 60px; }
#comments .comment h3 { color:#666; margin-bottom: 5px; }
#comments .comment h3 em { color:#888; font-size:12px; font-weight:normal; }
#comments .comment p { color:#878787; font-style:italic; line-height:18px; }
#comments .pagination { text-align: right; margin-right: 10px; margin-bottom: 15px; }
#comments .pagination a { border: 1px dotted #AAA; padding: 5px 8px; }
#comments .pagination a.searchPaginationSelected { background-color: #f7f7f7; }
#comments .pagination a.searchPaginationNext, .item #comments a.searchPaginationPrev,
#comments .pagination a.searchPaginationFirst, .item #comments a.searchPaginationLast { border: 0px; text-decoration: none; }
#comments .pagination a.searchPaginationNext:hover, .item #comments a.searchPaginationPrev:hover,
#comments .pagination a.searchPaginationFirst:hover, .item #comments a.searchPaginationLast:hover { background-color: #ffffff; }
#comments a:hover { background-color: #f7f7f7; }
#comments form { clear:both; display:inline; float:left; margin-left:60px; width:540px; }
#comments form h3 { color:#000; margin-bottom:10px; }
#comments form label { clear:left; float:left; margin-right:10px; padding-top:4px; width:140px; }
#comments form input { border:1px solid #BBB; float:left; margin-bottom:5px; padding:5px; width:250px; }
#comments form textarea { border:1px solid #BBB; float:left; padding:5px; width:375px; height: 150px; }
#comments form .button { clear:both;text-shadow: #9b9b9b 0 -1px 0; background-color:#84c4ff;box-shadow: 1px 1px 1px #c9c6c6; border:1px solid #5fb2ff; color:#FFF; float:left; margin:10px 0 0 150px; }
 At the end of style.css add this for the button:

Code: [Select]

/* Fancybox Comments Button */
#btnShowForm2 { line-height:normal; padding-top:0px; }
#btnShowForm2{ margin-left: 10px; }
#btnShowForm2 { background-color:#84c4ff;box-shadow: 1px 1px 1px #c9c6c6; border:1px solid #5fb2ff; float:left; padding:6px 10px 7px; -moz-border-top-left-radius:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px;-moz-border-bottom-left-radius:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-bottom-right-radius:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;-moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; }
#btnShowForm2 span a {text-shadow: #9b9b9b 0 -1px 0; color:#FFF; float:left; text-decoration:none; }
#btnShowForm2 span a:hover { color:#00FFFF;}
 
 

[Legion]

thanks a lot

[Hostingames]

thank you