Tag: css

I like Genesis, but I wanted to make some tweaks to how comments looked.

1) Bigger Avatar Size
2) ‘Mark’ post authors and site admins

This was pretty easy, since they have a filter in for comments, so all I had to do what tell it to replace their avatar size with mine, and then to use my callback. It’s in my callback that I did an extra check. If the commenter is an admin, they’re labled ‘Site Admin’ and if they’re the post author, it’s ‘Post Author.’

The end result looks like this (I’m commenting on a CSI episode where someone’s hiding in the walls):

The only hard part of the code was finding I can’t filter the comment callback, but I have to totally replace it with my own. Bummer, but not insurmountable. StudioPress has a nice document on comment filters which explained how I could override settings like avatar size and callback, which lead me to my next step, the filter:

// Customize Comments for avatar size and MY callback
add_filter('genesis_comment_list_args', 'mysite_comment_list_args');
    function mysite_comment_list_args($args) {
        $args['avatar_size'] = '90';
        $args['callback'] = 'mysite_comment_callback';
        return $args;
}

Once I have the filter, I have to create the mysite_comment_callback. This is something I basically copied from the source of my theme, taking the whole function for genesis_comment_callback and changing what I wanted.

/** replace comment callback with my own **/
function mysite_comment_callback( $comment, $args, $depth ) {

	$GLOBALS['comment'] = $comment; 
	global $post; 
	?>

	<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">

		<?php do_action( 'genesis_before_comment' ); ?>

		<div class="comment-header">
			<div class="comment-author vcard">
				<?php echo get_avatar( $comment, $size = $args&#91;'avatar_size'&#93; ); ?>
				<?php echo ( user_can( $comment->user_id, 'administrator' ) ) ? '<span class="mysite-title">Site Admin</span>' : (
						( $comment->user_id === $post->post_author ) ? '<span class="mysite-title">Post author</span>' : '' ) ; ?>
				
				<?php printf( '<cite><span class="fn">%1$s</span></cite> <span class="says">%2$s:</span>',
						get_comment_author_link(), 
						apply_filters( 'comment_author_says_text', __( 'says', 'genesis' ) ) ); ?>
		 	</div><!-- end .comment-author -->

			<div class="comment-meta commentmetadata">
				<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"><?php printf( __( '%1$s at %2$s', 'genesis' ), get_comment_date(), get_comment_time() ); ?></a>
				<?php edit_comment_link( __( '(Edit)', 'genesis' ), '' ); ?>
			</div><!-- end .comment-meta -->
		</div>

		<div class="comment-content">
			<?php if ( $comment->comment_approved == '0' ) : ?>
				<p class="alert"><?php echo apply_filters( 'genesis_comment_awaiting_moderation', __( 'Your comment is awaiting moderation.', 'genesis' ) ); ?></p>
			<?php endif; ?>

			<?php comment_text(); ?>
		</div><!-- end .comment-content -->

		<div class="reply">
			<?php comment_reply_link( array_merge( $args, array( 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
		</div>

		<?php do_action( 'genesis_after_comment' );

	/** No ending </li> tag because of comment threading */

}

Finally it was a simple CSS to make it look snazzy.

.bypostauthor span.mysite-title {
	padding: 2px 5px;
	padding: 0.15rem 0.4rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	line-height: 1;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #FFFFCC;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ffc, #fc3);
	background-image: -ms-linear-gradient(top, #ffc, #fc3);
	background-image: -webkit-linear-gradient(top, #ffc, #fc3);
	background-image: -o-linear-gradient(top, #ffc, #fc3);
	background-image: linear-gradient(top, #ffc, #fc3);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
	float: right;
}

I should point out that I have no experience with editing comments.