Forums

Dear admin,
I usually take a look at the "Showcase" of the extensions before installing them in my own sites. Of course everyone can see the official demo site but it´s very useful to see adaptations also. So I suggest a "Showcase" forum for chronocomments as well and make my contribution to it:
http://www.gilipollasyque.com.ar/index.php?option=com_content&view=article&id=58&Itemid=62
I am using the latest comments module too.
Thanks 🙂

Great look angeles, thanks for the idea, I will move this to a showcase forums in a few, what did you do to customize the look ? only CSS changes ? it will be great if you can give alittle info for users so they see how easy it is also!😉

regards

Max

Hi! Yes, I only did css changes here. In fact, one of the top reason for choosing chronocomments was that the layout is so clean and tidy that I wouldn´t need to make more modifications to make it fit in my site.

Here´s the css as I edited it:

@charset "utf-8";

/* CSS Document */

body, h1, h2, h3, img, div, form { margin:0px; padding:0px;}
#container { font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:11px; margin-top:20px}
#comments-header { line-height:1.3em!important; }
#comments-header h3 { font-size:24px; letter-spacing:-1px; color:#666666; line-height:36px; margin-bottom:20px }
#comments-header p { font-size:11px;}
#comments-header a { color:#b2ff08; text-decoration:none;}
.active {}
.clear { font-size:0px!important; line-height:0px!important; clear:both;}
.clear1 { font-size:10px!important; line-height:20px!important; height:20px; clear:both;}
.comment_item { }
.comment-item-header { background-image:url(../../templates/gilipollas/images/comment-bg.gif); background-color:#000000;height: 31px;}
.avatar { margin:2px 10px 2px 2px; float:left;}
.nickname-link { line-height:31px; float:left; text-decoration:none; color:#b2ff08; font-size:12px; text-transform:uppercase; font-weight:bold}
.bullet { font-size:11px; margin:7px 5px 0px 5px; float:left;}
.rep-score { float:left; margin:10px 5px 0px 1px; cursor:help;}
.rep-score-left { background-image: url(images/rep-score-left.png); background-repeat:no-repeat; width:6px; height:14px; float:left;}
.rep-score-right { background-image: url(images/rep-score-right.png); background-repeat:no-repeat; width:6px; height:14px; float:left;}
.rep-score-center { background-image:url(images/rep-score-center.png); background-repeat:repeat-x; float:left; font-size:11px; height:14px;}
.rating { float:right; margin:8px 10px 0px 0px;}
.score { font-size:12px; float:left; padding-top:1px; margin-right:2px;}
.rating-plus { background-image: url(images/rating-plus.png); background-repeat:no-repeat; width:17px; height:18px; margin:0px 3px; float:left; cursor:pointer;}
.rating-minus { background-image: url(images/rating-minus.png); background-repeat:no-repeat; width:17px; height:18px;  margin:0px 3px; float:left; cursor:pointer;}
.comment-body { font-size:11px; line-height:1.3em!important; padding:0.3em 0em; margin-left:45px}
.comment-status { margin-top:0.3em; margin-left:45px;
font-size:9px !important}
.comment-status strong { font-weight:normal; font-size:9px !important}
.comment-status a {text-decoration:none; float:left; color:#666666}
.comment-status a:hover { color:#999999; text-decoration:none}
.comment-button { float:right; font-size:11px; cursor:pointer}
.comment-button-center {background-image:none;color:#000000;background-color:#b2ff08;margin:0;margin-top:10px;float:left;padding:5px;border:none;width:auto}
.comment-button-center:hover { background-color:#FFFFFF; color:#000000}
.comment-form { background-image:url(images/arrow.png); background-repeat:no-repeat; padding-left:20px; display:none; }
.comment-form a {text-decoration:none;}
.comment-form form {font-family:Arial, Helvetica, sans-serif; font-size:11px; line-height:1.3em!important;}
.comment-form form br { clear:both;}
.form-text { width:98%; height:100px;  margin:0.3em auto; font-size:11px; padding:3px; font-family:Arial, Helvetica, sans-serif; border:1px solid #b2ff08; background-color:transparent; background-image:none; color:#FFFFFF}
.form-text:hover, .form-input:hover { border-color:#FFFFFF}
.form-input { width:50%; margin:0.3em auto; float:left; font-size:11px; padding:3px; font-family:Arial, Helvetica, sans-serif; border:1px solid #b2ff08; background-color:transparent; background-image:none; color:#FFFFFF}
.form-check { margin:0.3em auto; float:left; clear:left;}
.input-text { float:left; padding-top:7px; padding-left:10px;}
.input-text strong{ color:#333333; font-size:9px}
.reply { padding-left:20px; background-image:url(images/arrow.png); background-repeat:no-repeat;background-position: top left;}
.display { display:block; background:none; padding-left:0px;}
#ccloading, #ccsuccess, #ccfail{background:#819F70;padding: 3px;width: 50px;position:fixed;top: 0;right: 0;visibility:hidden;}
#ccsuccess{background:green;}
#ccfail{background: red;}
#ccresponse{background:#fff;padding: 3px;width: 55px;height: 20px;position:fixed;top: 0;right: 0;visibility:hidden;}
.left { float:left!important;}

For the latest comments module, I used a li tag to make the styling easier for me:

<li><strong>{name}:</strong> <a href="index.php?option={component}&view=article&id={pageid}#commentID{id}">{text}...</a></li>

Regards,
Angeles

Thanks so much Angeles!

Alright ! Thanks for the great idea .

Thank you so much for this wonderful information , I was having some problems with the css myself , after looking into this forum I was able to resolve the isuue. Ann error was coming up , but now its working. Appreciate it !

thank .. i try to this

That's great! Thanks for giving me nice idea.