How to: Integrate User Pro with Sahifa Theme Comments

[Ananya Zaman]

Open up wp_list_comments.php file from dashboard>appearance>editor or from wp-contents/themes/sahifa/includes and replace all the texts with following code
http://pastebin.com/bueS7nn9

Now, user pro is fully integrated with sahifa comments. If you want to make the avatars round then open the style.css file and search for

PHP

.comment-avatar { overflow:hidden; width:45px; height:45px; margin:0 10px 5px -30px; background: white; padding: 2px; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.comment-avatar { overflow:hidden; width:45px; height:45px; margin:0 10px 5px -30px; background: white; padding: 2px; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }

Now replace the whole code with the following

PHP

.comment-avatar { overflow:hidden; width:60px; height:60px; margin:0 10px 5px -30px; background: white; border-radius: 999px; padding: none; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.comment-avatar { overflow:hidden; width:60px; height:60px; margin:0 10px 5px -30px; background: white;                 border-radius: 999px; padding: none; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }

Regards

[Nexnivis]

AMAZING !

Thanks a lot Ananya. Sticky required for this post, Sahifa is one of the most used theme!

[Nexnivis]

Just one thing : we don’t have post date in comments

[Nexnivis]

Solved by adding <?php printf( __( '%1$s at %2$s', 'tie' ), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)', 'tie' ), ' ' ); ?>

[Ananya Zaman]

Ok, here is the new code to replace wp_list_comments.php

http://pastebin.com/q7bx0mzP

and CSS

PHP

.comment-avatar { overflow:hidden; width:45px; height:45px; margin:0 10px 5px -30px; background: white; padding: 2px; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.comment-avatar { overflow:hidden; width:45px; height:45px; margin:0 10px 5px -30px; background: white; padding: 2px; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }

Replace with following

PHP

.comment-avatar { overflow:hidden; width:60px; height:60px; margin:0 10px 5px -30px; background: white; padding: none; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; } .comment-date { float: right; padding-top: 5px; } .comment-edit { float: right; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.comment-avatar { overflow:hidden; width:60px; height:60px; margin:0 10px 5px -30px; background: white; padding: none; -moz-border-radius: 1px; -webkit-border-radius: 1px; box-shadow: 0 0 3px #B5B5B5; -moz-box-shadow: 0 0 3px #b5b5b5; -webkit-box-shadow: 0 0 3px #B5B5B5; float:left; }         .comment-date {                  float: right;                  padding-top: 5px;         }         .comment-edit {                  float: right;         }