[skip]

How I did it:

1. Download the Commentics files and extract, edit, upload and integrate them as instructed. I put the ‘comments’ directory in my httpdocs root directory and left the directory structure as standard.

2. Run Commentics Admin Panel to set things up as you wish again following existing instructions.

Changes are totally cosmetic – not functional and so can be adapted as required.

3. The key file is comments / css / stylesheet.css. Open this in your preferred html editor or notepad in the absence of anything else.
Within the section headed:

/******** Comments *******/
Look for the following and add the following lines to the existing code:

Code:

.comment_box_1 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
}

Code:

.comment_box_2 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
}

Code:

.admin_comment_box_1 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
}

Code:

.admin_comment_box_2 {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(/PIE.htc);
}

Look for the following and replace the existing code:

Code:

.height_between_reply_boxes {
height: 10px;
background:url('../images/buttons/reply_arrow.png') no-repeat 10% 0%;
}

I also made various other cosmetic changes to colours, fonts, borders, etc but that is a case of amending existing code.

Save the file and if edited offline, replace existing file on server.

You will need to add a couple of additional files:

1. PIE.htc in the root directory - can be downloaded from http://css3pie.com/

2. A graphic representing the arrow named 'reply_arrow.png' in the folder comments/images/buttons. The arrow should be 10px high (the height we specified in the class ‘.height_between_reply_boxes’ with a transparent background.

Upload these 2 files – FINISHED.

I attach my complete stylesheet.css

stylesheet.css Size: 6.3 KB  Downloads: 61

A quick explanation:

1. Having uploaded the standard files and configured Commentics I used Mozilla Firefox with HttpFox add-on to identify the elements I wanted to edit.

2. The code for rounding corners is all CSS based – but each browser has its own language hence numerous versions of the code to cover all major browsers. IE does not support CSS rounded corners at this time (or my version doesn’t) inclusion of the file PIE.htc simulates the effect. It may affect other elements on your page so check in IE and if you see undesired results you may need to remove PIE.htc and all reference to it in the code above. IE will then not show rounded corners but other browsers will be unaffected.

3. The reply arrow is a simple background graphic positioned in a fixed height div via CSS.

There are numerous methods and ideas and a Google search for ‘rounded corner div’ will provide many suggestions. If more experienced web designers (I am an amateur) identify issues with my solutions / code then please share.

This code is tested by me on my Windows 7 laptop on:
IE version – 8
Opera version – 11
Mozilla Firefox version – 3.6
Safari version – 5
Google Chrome version – 11

Older browsers may experience issues with some CSS code but it is fully cross-browser functional across all major modern browsers.

I hope this helps.

A test page is currently available at http://clients.photogenix.biz/test/ although possibly only temporarily.