Punk band site - demo

angeles , September 10 2008

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:
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! ;)




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;}
#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>



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.

Powered by ChronoForums - ChronoEngine.com

ChronoForms Book

The ChronoForms Book, written for ChronoForms v3 contains 350 pages of invaluable ChronoForms How-tos hints and tips.

Note: many of the ideas can be used in ChronoForms v4 but the admin interface is very different and code examples may need to be modified.


Members Login


2CheckOut.com Inc. (Ohio, USA) is an authorized retailer for
goods and services provided by ChronoEngine.com