Buy Now
Sign in

Punk band site - demo

angeles , September 10 2008
A
angeles
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
admin
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
Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
A
angeles
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
admin
Thanks so much Angeles!
Max
If your main question got answered then please mark the answer using the button!​
​Please let us know if you have any problems with the new forums text editor, we appreciate your feedback!
G
greensmokerev
Alright ! Thanks for the great idea .
J
jackreal94
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 !
N
nhunglth
thank .. i try to this
J
jritchiewdc
That's great! Thanks for giving me nice idea.