How To Customize Styles On Livefyre Comments

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.

Create Livefyre Account
Style Livefyre Comments Signup

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.

Livefyre Blog Configuration

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.

Livefyre Comments for WordPress

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.

Style Livefyre Import WordPress Comments

Your Posts should now reflect the changes.

Livefyre Comments WordPress Plugin

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.

Livefyre Custom Styles


.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.

How To Create A Custom WordPress Login Page

Creating a custom login page for your WordPress site is a small enhancement that makes your site feel unique.

This modification won’t make your website rank higher in Google, but your internal team will appreciate the change.

Trading in the default white login screen for your brand colors, fonts, background, and logo lets everyone know they are in the right place, adding an extra layer of panache to your site.

Once you know how to do this, styling the login screen is a breeze. You’ll need FTP access to your WordPress install and a text editor to make the magic happen.

Step 1: Add a Login folder to your theme

We’re going to add a new folder called login to our target theme folder. I use Filezilla to drill down: wp-content > themes > lockedown > login. Since lockedown is the name of the theme folder I’m using on this site, that’s where I’m creating the new folder, so I can place my login page styles inside and keep them where I can find them later.

Step 2: Add Some Code to Functions.php

Adding the following code to your functions.php file will tell your theme to add a link to your login stylesheet when we are on the login screen. We need to add this function because our default theme stylesheet does not load on the login page. When our WordPress site sees we are on the login page, it adds an action hook that adds our custom CSS link.



    function custom_login_css() {
       echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/login/login-styles.css" />';
    }

    add_action('login_head', 'custom_login_css');

Step 3: Write some custom styles


     body.login {
       background: #f99557 url(/wp-content/uploads/2012/09/peach-noise.jpg) repeat top left;
    }

    .login #nav a, .login #backtoblog a {
      color: #222!important;
      font-size: 2em;
      font-family: 'league_gothicregular', 'League Gothic', sans-serif;
    }

    .login h1 a {
      background-image: url('../login/login-header.png');
      background-size: 310px 62px;
      width: 300px;
      height: 62px;
      padding: 0 0 15px 26px;
    }

    .login form {
       background: rgba(120,70,30,.25);
    }
    .login label {
       color: #fff;
       font-size: 16px;
       text-shadow: 0 1px #666;
    }

Let’s walk through these style overrides one at a time.

The body.login changes the background from the standard gray to the same background seen in the header of this site, dark orange background-color, with a repeated PNG tile on top.

.login #nav a and .login #backtoblog a control the links that say “Lost Your password” and “Back to <your-site-here>, respectively. In this case, I’ve changed the font-size and font-family to better fit the rest of my site. Unfortunately, an important! tag was necessary to override the WordPress defaults for this page. When in doubt, use Chrome Developer Tools (Right-click) > Inspect Element or Firebug > Inspect Element With Firebug to isolate what styles are affecting a specific element.

To remove the standard WordPress logo, I changed the background-image for .login h1 a. That’s the link that takes you back to WordPress.org.You might have to experiment with the background-size, width, height and padding to get it looking right. Make a note of how big your logo image is, and adjust the background-size accordingly.

On the .login form, I simply made the background slightly opaque, with a different color.

Lastly, I changed the styles on the .login label (“Username” and “Password” to better fit how the design looked at that point.

You can change the button styles as well, (there are a few core button styles to override), I just chose not to this time, because the orange and blue don’t look too bad together.

Step 4: Push Login Assets to Your Server

Take your login-styles.css and any image files that you need, and FTP them into the login folder you made earlier. When you go back to the login screen, your site should now have a custom WordPress login page. Wicked!

Custom WordPress Login Screen

Remember it is all the little details that make up the bigger picture, in the craft of web design, or any other craft. I know for me, it feels a little bit better to look at a login screen that fits the site I’m supposed to be on, even if it’s my own site that no one else will see. Little touches like the custom login page make the client fall in love with their own site just a little bit more, and that’s a very worthy goal, indeed.

Hope this helps!

P.S.: If this explanation still doesn’t help you shed light on the subject, I recommend you check out Sarah Gooding’s article on the same process.