Styling JS-Kit Comments
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:
.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:
.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:
.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:
.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" />
I hope you have fun styling your comments!
To learn more about being a JS-Kit Widgets Admin, consult the JS-Kit Admin Guide.
Email
delicious
Digg
Reddit
Newsvine
Furl
Google
Stumble
HaoHao(0 Comments)
Scroll to top
JS-Kit Comments + Greybox on Any Page
I’ve been using JS-Kit for comments for a long time, and I’ve been extremely impressed with the quality of their service.
They’ve recently acquired Haloscan, which is great - I dropped Haloscan in favour of JS-Kit some time ago, as I didn’t like the lack of control I felt I had over my comments. I haven’t looked back.
A few weeks ago I was showing my site to a fellow student, when she asked me why people were unable to leave comments on my photo pages. I couldn’t think of a reason, so as soon as I got home I set about fixing this lack.
After thinking about the problem for a short time, I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A few hours later, this happened: Hangzhou Day 1.
If you like the effect, read on. Below is a short tutorial explaining how it was accomplished.
1) You must first have Greybox integrated with your site. Jan Erik Moström has written a tutorial explaining how to do this -RapidWeaver - using Greybox in a theme.
When you’re done with that (please make a test page to verify Greybox is working), head over to Code of Interest and download the Friendly Comments snippet.
Friendly Comment Snippet’s User Rating:
2) Open your RW project, select/create the page you wish to add JS-Kit comments to.
3) Open the page inspector, go to the Header > CSS tab. Paste the following CSS:
############################################################
WARNING: High-Light was unable to convert the text
according to the applied language: css
############################################################
Please note that the CSS may require some editing to ensure the link to the comment page matches the style of your site. Not all of us adore grey links.
The CSS reserves a space for the comments link, which is generated when the page has finished loading.
4) Still in the page inspector, switch to the Javascript tab. Drag the Friendly Comments snippet in. Close the page inspector.
Please note that if you are using a different script on the page that uses the “addLoadEvent” function, you don’t need to add the function again. You will, however, need to make a call to it:
addLoadEvent(friendlyComment);
<html><body>
<div class="js-kit-rating" title="A_TITLE" path="PATH_TO_MAIN_PAGE" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_MAIN_PAGE" path="PATH_TO_MAIN_PAGE"></div>
<script src="http://js-kit.com/comments.js"></script> <script src="http://js-kit.com/ratings.js"></script>
</body></html>
A_TITLE = a title (do this now, it’ll come in handy in the future ;)
PATH_TO_MAIN_PAGE = full URL to the page containing the link to this comment page.
As this page will only be displaying comments, it won’t need much of the styling required for the other pages in your site. The way I accomplished this is possibly not the best, but it worked for me. I copied the CSS from the styles.css file for the theme I use, pasted it between tags, and removed the information from the {...} for each item. It took awhile. I suggest you work through the rest of the tutorial and preview your work to see if you need this step.
View the CSS example
Now you should upload the HTML page.
6) On your main page, wherever you wish the link to the comment page to appear, paste* the following:
<div id="comment"><center><span class="js-kit-comments-count" path="LINK_THIS_PAGE">0 </span><a href="LINK_TO_COMMENTS_PAGE" class="href" title="TITLE_OF_COMMENTS" rel="gb_page[***X ***Y]">Leave a comment!</a></center></div>
<center><p id="subtext">(Comments will open on top of this page)</p></center>
<script src="http://js-kit.com/comments-count.js"></script>
You will need to change the following:
***X = Horizontal size of the comment Greybox
***Y = Vertical size of the comment Greybox
LINK_TO_THIS_PAGE = the full URL to the page this code is to be pasted in
LINK_TO_COMMENTS_PAGE = full URL to the comments page
TITLE_OF_COMMENTS = Text you wish to appear at the top of the comment Greybox
This code should go in either the main body of the page or the sidebar. On my photo pages I’ve pasted it into the “header” area of the Rapidflicker plugin.
As an example, this is the exact code I use for my Hangzhou Day 1 photo page:
<div id="comment"><center><span class="js-kit-comments-count" path="http://pagesofinterest.net/mikes/photo/hangzhou/day_1.php">0 </span><a href="http://pagesofinterest.net/mikes/photo/hangzhou/day_1_comments.html" class="href" title="Hangzhou Day #1 - Comments" rel="gb_page[450 490]">Leave a comment!</a></center></div>
<center><p id="subtext">(Comments will open on top of this page)</p></center>
<script src="http://js-kit.com/comments-count.js"></script>
<style type="text/css" media="all">
img {border: none;}
body {width: 435px;font-size: 11px;font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;color: #333333;margin: 10px;text-align: center;}
a:link {color: #808080;text-decoration: underline;}
a:visited {color: #808080;text-decoration: underline;}
a:hover, a:active {color: #b3b3b3;text-decoration: none;}
blockquote {font-size: 10px;color: #808080;padding: 7px 0;}
#top {display: none;}
#shadows {display: none;}
#hdrcolor {display: none;}
#overlay1 {display: none;}
#overlay3 {display: none;}
#overlay4 {display: none;}
#header {display: none;}
#contenttop {display: none;}
#bottom {display: none;}
.clearer {clear: both;}
#container {width: 435px;text-align: left;margin: 0 auto;padding: 0;}
#pageHeader {}
#pageHeader img {display: none;}
#pageHeader h1 {display: none;}
#pageHeader h2 {display: none;}
#contentContainer {width: 440;padding-top: 10px;}
#contentContainer #content {margin-left: 0;padding: 0;}
#sidebarContainer {display: none;}
#sidebarwrapper {display: none;}
#sidebartop {display: none;}
#sidehead {display: none;}
#sidebarbottom {display: none;}
#sidebarContainer #sidebar {display: none;}
.image-left {float: left;margin: 3px 3px 3px 0;padding: 3px 3px 3px 0px;}
.image-right {float: right;margin: 3px 0 3px 3px;padding: 3px 0 3px 3px;}
h1 {}
h2 {}
h3 {font-size: 13em;}
h5 {padding: 0;font-size: 18px;margin: 0;color: #999;}
.blog-entry-comments-body {text-align: left;}
.blog-entry-comments-body-even {background-color: #eee;text-align: left;padding: 5px 8px;}
.blog-entry-comments-body-odd {background-color: #fff;text-align: left;padding: 5px 8px;}
</style>
Back to step #5
Always do this when pasting code. Always.
If you don’t do this, there is a good chance that the code will break. Always do this!
As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.
(0 Comments)
Scroll to top
JS-Kit Comments for Each Blog Entry
In this short tutorial I will describe how to use the JS-Kit commenting system in Rapidweaver. By then end of this tutorial you will have learned how to insert the code into yor blog so that each post has its own comments - the comments will show in permalinks, category and tag versions of each post. When someone comments on a post, JS-Kit will notify you by email. Included in the email that you, and other people who comment then recieve replies are sent will be a link to the permalink entry of the post in which the comment is displayed. You will be able to use JS-Kit’s excellent moderating system to manage your comments.
I’m going to go ahead and assume you want to integrate JS-Kit’s commenting system with the JS-Kit ratings widget, like I have. If you don’t just ignore the parts of the below tutorial that mention the ratings widget.
1) Open RW, select your blog page. Open the page inspector, select the “General” tab. Under “Override Default Site Settings”, check “Footer”. Copy the following code into this field:
<script src="http://js-kit.com/comments.js"></script>
To use the ratings widget as well, you’ll want to add this code also:
<script src="http://js-kit.com/ratings.js"></script>
If you have other information you wish to see included in your footer, like I do, then you’ll need to include that here as well. For example, this is what my custom footer field contains:
<script src="http://js-kit.com/comments.js"></script> <script src="http://js-kit.com/ratings.js"></script><a href="http://topsites.blogflux.com/travel/"><img style="border:none;" src="http://topsites.blogflux.com/track_141347.gif" alt="Travel Blogs - Blog Top Sites" /></a><br /><a href="http://blogshares.com/blogs.php?blog=http%3A%2F%2Fpagesofinterest.net%2Fchina_blog%2Fchina_blog.php&user=56480"><img src="http://blogshares.com/images/blogshares.jpg" alt="Listed on BlogShares" width="117" height="23"/>
<p style="text-align: center;></a>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
<img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" /></p>
</a></div>
<br />This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License</a>.<br /> <br />Michael Robinson -
<a href="mailto:est.ergo.sum@gmail.com?subject=China%20Blog">
Contact</a>
2) Close the page inspector - we’re done with the tricky stuff.
3) This part can be rather tiresome - it depends on how many old posts you want to add the option to comment to.
At the very bottom of each post you wish to allow users to comment on, paste* the following code:
<div class="js-kit-comments" permalink=""></div>
If you want to use the ratings widget as well, you should paste this (below includes the above code - above is for those who do not want to use ratings, below is for those who want both):
<div class="js-kit-rating" title="" path="PATH_TO_POST_PERMALINK" starColor="Golden"></div>
<div class="js-kit-comments" permalink="PATH_TO_POST_PERMALINK" path="PATH_TO_POST_PERMALINK"></div>
Replace “PATH_TO_POST_PERMALINK” with ... the path to that post’s permalink. For example, this is what I have at the bottom of this post:
<div class="js-kit-rating" title="" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" starColor="Golden"></div>
<div class="js-kit-comments" permalink="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php"></div>
And that’s it! Comments should now be enabled for that post.
To moderate posts, you’ll need to go to the JS-Kit Settings page. If you don’t already have one, you’ll have to create an OpenID account. Choose from the list of providers listed beneath the sign-in box.
If, after logging in you don’t see your site anywhere, you’ll need to “claim” it. Just enter the url of your site in the labeled text box, and follow the instructions. They’ll send you an email, and once you’ve followed the link included you will be able to moderate your site’s comments.
Enjoy!
If you would like to explore the options available to users of JS-Kit, head over to the website: JS-Kit
Always do this when pasting code. Always.
If you don’t do this, there is a good chance that the code will break. Always do this!
As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.
Scroll to top