Mon Jan 16, 2017, 3:03 pm
 Locked  7  39082
Showing 1 to 8 of 8 entries.

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

5 0
Sun Sep 7, 2008, 7:22 pm

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


If your main question got answered then please select the answer using the GREEN button!

Moderator
12919 17664
Mon Aug 14, 2006, 1:29 am

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:

Code: Select all    
@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

5 0
Sun Sep 7, 2008, 7:22 pm

Thanks so much Angeles!


If your main question got answered then please select the answer using the GREEN button!

Moderator
12919 17664
Mon Aug 14, 2006, 1:29 am

Alright ! Thanks for the great idea .

1 0
Fri Sep 17, 2010, 12:43 pm

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 !

1 0
Thu Jan 17, 2013, 12:34 pm

thank .. i try to this

1 0
Tue Aug 13, 2013, 4:43 am

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

1 0
Wed Nov 23, 2011, 1:35 pm
Showing 1 to 8 of 8 entries.

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.

SSL

Members Login

 

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