How To Customize Styles On Livefyre Comments

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

Livefyre is a commenting system that allows users to leave comments on your website, using their existing social media accounts as a login. Livefyre has two levels of social integration: an enterprise level called StreamHub, and the Free version, which is what we will focus on. The Free version can be embedded via JavaScript, or if you are using WordPress, via a plugin. I will show you how to embed the commenting system, and then show you how to customize styles on Livefyre comments for your own website.

Step 1: Sign up for Livefyre and Install

To create a Livefyre account, head on over to the Livefyre website, and follow the steps to sign up. You’ll need the name of the website where you want to embed Livefyre.

If you’re running a WordPress site, you can add the Livefyre Comments 3 plugin, which is what we’re going to do in this example.

Step 2: Configure Livefyre for Your Site

When you first activate the Livefyre plugin for WordPress, you’ll get a message saying you must configure your blog to work with Livefyre. Click the message link, and you’ll be directed back to the login screen on Livefyre. Once you login, you’ll be directed back to the WordPress admin screen for the plugin. In the top right corner of this page, there will be Site Settings with your Livefyre Site ID and Site Key. Under the Display Comments section, I usually leave Posts checked, and uncheck all the other boxes.Under Livefyre Import Settings, hit the button to import your comments. For most sites, this will be quick. For larger sites with several thousands of comments, this might take a few minutes.

If everything is good, you’ll get the message All Systems Go! This means that the comments in your WordPress database have been imported into Livefyre.

Your Posts should now reflect the changes.

If the comments template does not display on Posts with no previous comments, you may need to check your single.php. I had to make the changes below to make our example work.

<?php
    // Old Code
    // If comments are open or we have at least one comment, load up the comment template
    // if ( comments_open() || '0' != get_comments_number() )
   //	comments_template( '', true );

  // New code
       if ( comments_open() )
	 comments_template( '', true );
				
?>

Step 3: Custom CSS

Upload a custom style sheet and link to it in the head. You might have to take a close look at the styles with Chrome Developer Tools or Firebug. Here’s a screenshot of the custom styles I put on our example site and the CSS I used to achieve it.

.fyre a.fyre-comment-like, .fyre a.fyre-comment-reply,
.fyre a.fyre-comment-username:hover, .fyre a.fyre-comment-like:hover, .fyre a.fyre-comment-reply:hover,
.fyre a, .fyre a:hover, .fyre .fyre-comment-like a, .fyre .fyre-comment-like a:hover,
.fyre .fyre-stream-stats span, .fyre .fyre-livecount, .fyre em.fyre-stream-livecount,
.fyre .fyre-box-wrapper, .fyre a.fyre-user-profile-link, .fyre .fyre-login-bar .fyre-box-wrapper,
.fyre .fyre-box-wrapper span.fyre-user-drop, .fyre .fyre-login-bar a, .fyre .fyre-login-bar a:hover {
  	color: #5e0404;
}
.fyre a.fyre-comment-username { color: #5e0404;}
.fyre .fyre-stream-stats, .fyre .fyre-live-container,
.fyre .fyre-login-bar .fyre-box-wrapper, .fyre .fyre-login-bar {
	margin: 0 15px;
}
.fyre span.fyre-moderator, .fyre span.fyre-comment-author-tag,
span.fyre-user-level, span.fyre-comment-author-tag, span.fyre-moderator  {
	background-color: #5e0404;
}

.fyre-editor .fyre-content-editable, .fyre-editor .fyre-editor-container .fyre-editor-editable {
background-color: #fcfaf2;
	color: #5e0404;
	width: 100%;
	margin: 0 auto;
}
.fyre-editor .fyre-editor-container .fyre-editor-editable {
	border: none;
}
.fyre .fyre-editor-container {
	width: 95%;
	margin: 0 auto;
}
.fyre .fyre-widget .fyre-login-bar .fyre-box-wrapper {
	left: -12px;
	margin: 0;
}
.fyre body.editable, .fyre div.editable, iframe.editable body.editable p {
	color: #5e0404;
}
.fyre-editor-toolbar .goog-toolbar .goog-inline-block.fyre-button-left-inner-box {
	background-color: #cbcec5;
	color: #5e0404;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.fyre-editor-toolbar > .goog-toolbar > .fyre-post-to {
	border-left: 1px solid #cbceb5;
}

.fyre .fyre-editor-toolbar .goog-toolbar > div.fyre-post-button .fyre-button-right-inner-box {
color: #5e0404;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}
.fyre .fyre-editor-toolbar .goog-toolbar > div.fyre-button-right.fyre-post-button,
.fyre-post-to-linkedin {
	border-left: 1px solid #fcfaf2;
}
.fyre-editor-toolbar .goog-toolbar .goog-inline-block.fyre-button-left-inner-box, .fyre-editor-toolbar .goog-toolbar .goog-inline-block.fyre-button-left-inner-box {
	height: 29px;
}
.fyre .fyre-editor-toolbar .goog-toolbar > div,
.fyre .fyre-editor-toolbar .goog-toolbar > div.fyre-post-button,
.fyre-editor-toolbar .goog-toolbar .goog-inline-block.fyre-button-left-inner-box {
	background-color: #cbcec5;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cbcec5), to(#cbcec5));
	background-image: -webkit-linear-gradient(top, #fcfaf2, #cbcec5);
	background-image: -moz-linear-gradient(top, #fcfaf2, #cbcec5);
	background-image: -o-linear-gradient(top, #fcfaf2, #cbcec5);
	background-image: -ms-linear-gradient(top, #fcfaf2, #cbcec5);
	background-image: linear-gradient(top, #fcfaf2, #cbcec5);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fcfaf2', EndColorStr='#cbcec5');
	border-bottom: 1px solid #787a6b;
	border-right: none;
}

.fyre .fyre-editor-toolbar > .goog-toolbar > .fyre-post-to {
	border-left: 1px solid #fcfaf2;
}
.fyre .fyre-editor-toolbar .goog-toolbar > div.fyre-button-left:first-child {
	border-left: #32332e;
}
.fyre .fyre-editor-toolbar .goog-toolbar > .goog-inline-block {
	height: 31px;
}
.fyre .fyre-comment-wrapper time.fyre-comment-date, .fyre .fyre-comment-date { color: #787a6b; }

Special Cases

I discovered while doing a client site that Livefyre (last time I checked) is somewhat geared towards websites with a light background. You cannot change the color of the text with the livefyre-overrides.css file we just discussed. Not even with an important! tag. If you’re working on a site with a dark theme, or a black background, you’ll have to use the JavaScript embed and change the text color with the line: editorCss: 'body { color: #fff; }'. The code block below seems to work; just remove the code block where you would normally call the comments template and replace it with the JavaScript embed. You will need the Site ID from the Livefyre Settings screen, and plug that number into the siteId variable.

<!-- START: Livefyre Embed -->
<div id="livefyre-comments"></div>
<script type="text/javascript" src="http://zor.livefyre.com/wjs/v3.0/javascripts/livefyre.js"></script>
<script type="text/javascript">
 (function () {
    var articleId = fyre.conv.load.makeArticleId(null,'ID');
    fyre.conv.load({}, [{
        el: 'livefyre-comments',
        network: "livefyre.com",
        siteId: "123456",   // Your siteId here
        articleId: articleId,
        signed: false,
        collectionMeta: {
            articleId: articleId,
        url: fyre.conv.load.makeCollectionUrl(null,'ID'),
        },
        editorCss: 'body { color: #fff; }'
    }], function() {});
}());
</script>  

This code block targets the div with the id that matches the id indicated in el, and writes the Livefyre comments for the post inside.

If you need more documentation, Livefyre has a GitHub repo with information on their applications and APIs.

John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.