WordPress.org

Ready to get started?Download WordPress

Forums

please help me with my comments.php &styling it! (9 posts)

  1. cityinblame
    Member
    Posted 5 years ago #

    does anyone here know how to make their gravatar align to the left of their comments?? (and where to place that code), and have the comment forms aligned to the left as well? also, i was wondering if someone could give me the code (and where to put it) to alternate two colors between comments, the background color #262626 and the text color #cccccc (default) alternating with the background color #cccccc and the text color #262626 (basically inversed) my site URL is cityinblame.com PS.:i know its a handful but i'm new to .php files so all i have on my side is some css knowledge :/ thank you for your time!(;
    THIS IS MY 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"), ' |'); ?><p>
    
    		<?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; ?>

    AND THIS IS MY STYLE.CSS FILE:

    /*
    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. wizardregis
    Member
    Posted 5 years ago #

    First of all the code look very strange, not at all like the one I'm used to work with. For backgrounds that switch each comment there is a easy way to do it.

    Place

    <?php $oddcomment = 'class="alt" '; ?>

    before the loop.

    The loop will look like this:

    <?php foreach($comments as $comment) : ?>
    <li class="<?php echo $oddcomment; ?>">
    commentstuff
    <?php $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?>
    <?php endforeach; ?>

    Then every odd comment will be given class="alt" to you to style.

    li.alt { background-color:whatever; }
    li { background-color:normalcolor; }
  3. cityinblame
    Member
    Posted 5 years ago #

    gee thanks for a period... -_-

  4. wizardregis
    Member
    Posted 5 years ago #

    Sorry wrote something and then realised I was wrong and edited it ;)

  5. cityinblame
    Member
    Posted 5 years ago #

    um i put it in exactly like yu told me to, but no effect whatsoever :x i tried background-color:, and then background:# but no effect. heres the updated codes:
    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 $oddcomment = 'class="alt" '; ?>
        	<?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"), ' |'); ?><p>
    
    		<?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;}
    li { background:#262626;}
    li.alt {background:#cccccc; color:#262626; }
    
    #footer{display:none;}
    br {line-height:0px; padding:0px; margin:0px;}
  6. wizardregis
    Member
    Posted 5 years ago #

    Probably because you forgot to place a <li> and the code inside the loop. This is how it will look:

    <?php $oddcomment = 'class="alt" '; ?>
    
    <?php if($comments) : ?>
    	<ol>
    	<?php foreach($comments as $comment) : ?>
    		<li class="<?php echo $oddcomment; ?>">
    			commentstuff
    		</li>
    		<?php $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?>
    	<?php endforeach; ?>
    	</ol>
    <?php else : ?>
    	<p>No comments yet</p>
    <?php endif; ?>
  7. cityinblame
    Member
    Posted 5 years ago #

    i tried that :/ no luckk. is that really supposed to be

    <li class="<?php echo $oddcomment; ?>">
  8. wizardregis
    Member
    Posted 5 years ago #

    Maybe not, try without the class="".

  9. cityinblame
    Member
    Posted 5 years ago #

    nope :\ ahhh

Topic Closed

This topic has been closed to new replies.

About this Topic