Styling JS-Kit Comments

×

This post was originally published in 2008
It may contain stale & outdated information. Or it may have grown more awesome with age, like the author.

This post aims to give some tips and guidance on how to style JS-Kit Comments, so they closely match your blog’s theme.

I’ve used an external CSS file to style my comments. If you’re like me, you won’t want to read the rest of this tutorial, and would rather view the stylesheet directly.

Styling JS-Comments is really quite straightforward. I strongly recommend you read this post before moving on, as it contains tips on resizing JS-Kit elements, such as the width/height of comments, among other things.

Use of an external CSS sheet is advised, as it will allow the reader to apply the same styles site-wide with minimum hassle.

Stylesheets should be edited using your favourite text-editor. If you don’t have a favourite, I recommend Text Wrangler, which is an excellent (and free) editor.

I’m just going run through the stylesheet used to style my comments, as the possibilities are too numerous for me to list here. I encourage you to experiment – it is one of the best ways to learn CSS.

The relevant selectors are:

1) .js-singleComment
2) .js–comment-stripe-1
3) .js-singleCommentDepth0
4) .js-singleCommentDate
5) .js-siteAdmin

Note that the full list of selectors can be found using the FireBug addon combined with Firefox.

The first three selectors allow us to apply styling such that the first message of a thread will have style x, the next message will have style y, the next message will have style z, next style y, next z… This is not only pretty, but also makes it easier for the reader to quickly determine where a thread began, and clearly defines the boundary between each comment.

Here is the styling that I have applied to selector #1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.js-singleComment {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
background: #ECF4FF;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles all comments that are: not the first comment of a thread, even numbered.

The first two lines give rounded corners in Safari 3 and Firefox 3.

The four lines below that control the background colour and the image that gives the shadow effect, implying that the comment is ‘œbelow’ the previous comment.

The next four lines control the borders – note the lack of a top border, which is taken care of by the image I’ve used.

Finally, the comment has some padding applied to it. I did this as the rounded corner combined with the top shadow image made text difficult to read in some places.

The styling I have applied to selector #2 is:

1
2
3
4
5
6
7
8
9
10
11
12
.js-comment-stripe-1 {
background: #E4EDF2;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles comments that are: not the first comment of a thread, are odd.

The styling format is identical, I’ve just used different images and colours.

The styling I have applied to selector #3 is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.js-singleCommentDepth0 {
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-bottom-left-radius: 11px;
-moz-border-radius-bottomleft: 11px;
background: #fff;
background-image: url('http://pagesofinterest.net/images/comments_border.png');
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 13px;
color: #333;
border: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles the first comment of each thread.

This time, the first 4 lines control rounded borders.

The background image is now used to give the pleasing graduation effect at the bottom of the comment box, and the background colour is white.

The whole box has a border applied to it, and I’ve given the top a margin of 13px. This margin further differentiates the comment from any previous thread.

The padding is the same.

The styling for the final 2 selectors is:

1
2
3
4
5
6
.js-singleCommentDate {
font-style: italic;
}
.js-siteAdmin {
color: black;
}

The first styles the date, the second gives the Admin’s name a different colour.

And finally, upload your CSS file to your server, and include the following BELOW the JS-Kit Comment’s insertion code. It is important that the CSS is included after the JS-Kit code.

<link rel="stylesheet" type="text/css" media="all" href="PATH_TO/jskit.css" />

This will break XHTML validation, as the link tag is strictly not allowed anywhere but the head. For me the price is worth paying.

I hope you have fun styling your comments!

To learn more about being a JS-Kit Widgets Admin, consult the JS-Kit Admin Guide.

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘˜Permalink’ and ‘˜Path’ Attributes
Recent Comments PHP Script
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Comments (3) | Trackback