Yes, you are able to override Livefyre's default CSS to match your blog/site theme.
Begin by downloading the attached stylesheet. You can choose to keep it as a separate file and reference it within the <head> tag of your pages like this:
<head> <link rel="stylesheet" type="text/css" href="<path>lf_override.css" /> </head>
OR
You can copy and paste the code into your existing style sheet.
We recommend the latter for most users.
You're able to customize the Head Bar, Login Bar, Comment Box area and the Comment stream by modifying the classes in these areas. Here are the classes within each of these areas that you can modify:
1. Head Bar Customization
There are 4 classes within the head bar that you can modify.
.lf_head_bar{}
.lf_comment_count{}
.lf_listener_count{}
.lf_avatar{}
2. Login Bar Customization
There are 3 classes within the the Login bar that you can modify:
.lf_login_bar {}
.lf_user_avatar {}
.lf_user_nick {}
3. Comment Area Customization
You can customize the following classes within the comment area:
/*The Text Box*/
.mceLayout{}
/*The Posted Comments Background*/
#lf_comments{}
.lf_comment_container{}
.lf_action_bar{}
4. Comment Box Element customization
You are able to customize the following classes within the comment stream:
/*Individual Elements*/
.lf_comment_user{}
.lf_comment_user_rating{}
.lf_main_avatar{}
.lf_comment_date{}
.lf_share{}
.lf_flag{}
.lf_mod_options{}
.lf_flag_box{}
/*This section allows you to determine the hover states for the various text elements*/
#livefyre .lf_comment_container .lf_comment .lf_comment_footer .lf_admin_bar a {}
#livefyre .lf_comment_container .lf_comment .lf_comment_footer .lf_flag {}
#livefyre .lf_comment_container:hover .lf_comment .lf_comment_footer .lf_flag {}
#livefyre .lf_comment_container .lf_comment .lf_comment_footer .lf_comment_date {}
#livefyre .lf_comment_container .lf_comment .lf_comment_footer .lf_share {}
#livefyre .lf_comment_container .lf_comment .lf_comment_footer .lf_share:hover {}
#livefyre .lf_comment_container .lf_comment .lf_comment_footer .lf_mod_options {}
#livefyre .lf_comment_container:hover .lf_comment .lf_comment_footer .lf_mod_options a:hover {}