WordPress.org

Ready to get started?Download WordPress

Forums

put gravatar to the left of comments?! (2 posts)

  1. cityinblame
    Member
    Posted 5 years ago #

    right now my comments have the gravatars on top of them, does anyone have the code to put them to the left of the comments? my URL is cityinblame.com and here are my comments.php and style.css files:
    COMMENTS.PHP:

    <center><img src="http://i43.tinypic.com/33u7mtu.png"></center>
    <?php if(!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) : ?>
    	<?php die('You can not access this page directly!'); ?>
    <?php endif; ?>
    
    <?php if(!empty($post->post_password)) : ?>
      	<?php if($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
    		<p>This post is password protected. Enter the password to view comments.</p>
      	<?php endif; ?>
    <?php endif; ?>
    
    <?php if($comments) : ?>
      	<ol>
    <?php foreach($comments as $comment) : ?>
      		        <div class="gravatarr">
                            <?php echo get_avatar( $comment, 48, "http://i43.tinypic.com/2s1ab77.png"); ?></div>
      			<?php comment_text(); ?>
      			<?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> - <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a> <?php edit_comment_link(__("Edit This"), ' |'); ?><br />
    
                   <?php endforeach; ?>
    	</ol>
    <?php else : ?>
    	<p>No comments yet</p>
    <?php endif; ?>
    
    <?php if(comments_open()) : ?>
    	<?php if(get_option('comment_registration') && !$user_ID) : ?>
    		<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p><?php else : ?>
    		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
    			<?php if($user_ID) : ?>
    				<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out &raquo;</a></p>
    			<?php else : ?>
    				<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
    				<label for="author"><small>Name <?php if($req) echo "(required)"; ?></small></label></p>
    				<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
    				<label for="email"><small>Mail (will not be published) <?php if($req) echo "(required)"; ?></small></label></p>
    				<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
    				<label for="url"><small>Website</small></label></p>
    			<?php endif; ?>
    			<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
    			<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
    			<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p>
    			<?php do_action('comment_form', $post->ID); ?>
    		</form>
    	<?php endif; ?>
    <?php else : ?>
    	<p>The comments are closed.</p>
    <?php endif; ?>

    STYLE.CSS:

    /*
    Theme Name: Audrey Pink
    Description: An Audrey Kitching themed layout made by and for cityinblame.com.
    Author: adam attack! from city in blame
    Author URI: http://www.cityinblame.com
    Version: 1.0
    Tags: two-columns, fixed-width
    
    */
    
    body{font: 10px Arial, color:cccccc !important; background: #000000 url("/pics/header.png"); text-align: center; background-repeat:no-repeat; background-position:top left;}
    a, a:visited{color: #F81063; text-decoration:none; line-height: 0em;}
    a:hover, a:active{color:#cccccc;}
    a img{border:0}
    .comments a{background:url(images/ico-speech.gif) no-repeat top left; padding-left: 18px;}
    .tags a{background:url(images/ico-tags.gif) no-repeat top left; padding-left: 18px;}
    .calendar {display:none;}
    /* header styles */
    #main{position:absolute; width: auto; left:310px; top:80px;}
    #content{position:absolute; background:#262626; color:#cccccc; display: inline; float: left;
            width: 400px; font:10px arial; left:50px; top:20px; line-height: 1em;}
    
    h1 {height:15px; font-family:georgia; font-size:30px; font-weight:normal; margin:0px; border-bottom: #F81063 1px dotted; text-align:right; letter-spacing:-3px;}
    #sidebar{background:#262626; float:right; text-align:left; width: 200px; background: url() repeat-y top right; color:#cccccc; position:absolute;
              top:20px; left:455px;}
    #sidebar h2 {line-height:-3px; text-indent:13px; background: url("/pics/back.png") repeat-y top left; font:8px small fonts; font-weight:normal; text-transform:uppercase; color:black;}
    a.sidebr, a.sidebar:visited, a.sidebar:active {color:#F81063; font-family:small fonts; font-size:8px; text-transform:uppercase; font-weight:normal; text-decoration:none;}
    a.sidebr:hover {color:#cccccc;}
    .textwidget {line-height: 0.5em; background:#262626; background-color:#262626;}
    #sidebar ul {list-style:none; text-align:center; margin:0px;}
    #sidebar ul ul {list-style:none; text-align:center; margin:0px;}
    #sidebar ul li (list-style:none; text-align:center; margin:0px;}
    #sidebar ul ul li {list-style:none; text-align:center; margin:0px;}
    
    .gravatarr {align:left; padding:0.2em; margin:0px;}
    #commentform {align:left; text-align:left;}
    #commentform #author, #commentform #email, #commentform #url {background: #cccccc; color:#262626; padding: .2em;}
    
    #footer{display:none;}
    br {line-height:0px; padding:0px; margin:0px;}
  2. Alex Mansfield
    Member
    Posted 5 years ago #

    To get the gravitars to the left, use `.gravatarr{float: left;}'

    However, this creates a few other problems. You'll want to add a div around each comment, so try this (it's what you already have, but I added the div with the class "comment"):

    <?php foreach($comments as $comment) : ?>
      <div class="comment"><!-- this line starts the new div -->
        <div class="gravatarr">
          <?php echo get_avatar( $comment, 48, "http://i43.tinypic.com/2s1ab77.png"); ?></div>
          <?php comment_text(); ?>
          <?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> - <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a> <?php edit_comment_link(__("Edit This"), ' |'); ?>
      </div><!-- this line ends the new div -->
    <?php endforeach; ?>

    Finally, you'll want to add these two lines to your CSS:

    .comment{clear: both;}
    #commentform{clear: both;}

    I think that should do it. let us know if you're still having problems.

Topic Closed

This topic has been closed to new replies.

About this Topic