WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Where should I style author name and date of comment? (11 posts)

  1. ransom1337
    Member
    Posted 3 years ago #

    Yeah, so where should I link to the CSS styling for the username and date of the comment? In functions.php I have:

    <a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a><br />
           <?php printf(get_comment_date()) ?>

    But if I try wrapping a div around it and setting the style for that div in my style.css, it doesn't change at all! Is it overridden somewhere else in the php that I can't see?

    Thanks.

  2. rinse
    Member
    Posted 3 years ago #

    If I'm understanding your question correctly.. you should be looking in comments.php rather than functions.php.

    add the styling there.

  3. ransom1337
    Member
    Posted 3 years ago #

    Thanks rinse. Whereabouts? I tried styling:

    <ol class="blog_post_wrap">
    	<?php wp_list_comments(); ?>
    </ol>

    but again, nothing changed.

  4. rinse
    Member
    Posted 3 years ago #

    well for example here is an excerpt from my comments.php (note that not every theme's comments.php looks the same)

    <div class="comment-text">
    <?php comment_text(); ?>
    </div>
    
    <div class="comment-meta">
     by <span class="comment-author"><?php comment_author_link() ?></span> on
    <span class="comment-date"><?php comment_date('n/j/Y') ?> at <?php comment_date('g:ia') ?></span>
    </div>

    you are looking for comment_author_link and comment_date.

  5. ransom1337
    Member
    Posted 3 years ago #

    I'm using a custom function so that I could style my comments. Here's the whole function, if it helps:

    function advanced_comment($comment, $args, $depth) {
       $GLOBALS['comment'] = $comment; ?>
    
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div class="comment_post_wrap">
       <div class="comment_post_left">
       <div class="comment_avatar">
         <a href="<?php the_author_meta( 'user_url'); ?>"><?php echo get_avatar($comment,$size='80',$default='/images/main/avatar.jpg' ); ?></a>
       </div>
           <a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a><br />
           <?php printf(get_comment_date()) ?>
       </div>
    
         <?php if ($comment->comment_approved == '0') : ?>
           <em><?php _e('Your comment is awaiting moderation.') ?></em>
           <br />
         <?php endif; ?>
    
         <div class="blog_post_right">
             <?php comment_text() ?>
         </div>
         </div>
    </li>
    <div class="comment_divider"></div>
    <?php } ?>

    This is called from comments.php with:

    <ol class="blog_post_wrap">
    	<?php wp_list_comments('type=comment&callback=advanced_comment'); ?>
    	</ol>

    I have set size 12px in the css for the div class "comment_post_left" but the text just doesn't seem to change size.

  6. ransom1337
    Member
    Posted 3 years ago #

    Wow duh. Sorry. It's because I used "font:" instead of "font-size:" in the CSS.

  7. rinse
    Member
    Posted 3 years ago #

    ahh ok, well glad you figured it out.

  8. ransom1337
    Member
    Posted 3 years ago #

    Heh actually it's still slightly unresolved. Although I've got the font size to change, the hyperlinks within the class seem to be getting overridden by the main a, a:hover and a:visited settings. I don't understand this, don't div classes usually override the main ones?

    Here's my main site CSS for hyperlinks:

    a, a:visited, a:hover {
    outline: none;
    color: #333b3f;
    }

    And for this div:

    .comment_post_left, a.comment_post_left:link, a.comment_post_left:hover, a.comment_post_left:visited {
    position: relative;
    height: auto;
    width: 160px;
    float: left;
    margin: 10px 10px 0px 0px;
    font-size: 12px;
    color: #56636a;
    line-height: 16px;
    }

    The font, div dimensions, line height, etc, are all working, but for some reason the font colour is #333b3f from the main CSS, above.

    This issue is happening in the author link of the code below:

    <div class="comment_post_left">
           <a href="<?php the_author_meta( 'user_url'); ?>"><?php printf(__('%s'), get_comment_author_link()) ?></a><br />
           <?php printf(get_comment_date()) ?>
       </div>
  9. rinse
    Member
    Posted 3 years ago #

    try

    .comment_post_left a{
    position: relative;
    height: auto;
    width: 160px;
    float: left;
    margin: 10px 10px 0px 0px;
    font-size: 12px;
    color: #56636a;
    line-height: 16px;
    }
  10. ransom1337
    Member
    Posted 3 years ago #

    Thanks dude, with your guidance I had a play around and came up with the working solution:

    .comment_post_left {
    position: relative;
    height: auto;
    width: 160px;
    float: left;
    margin: 10px 10px 0px 0px;
    font-size: 12px;
    color: #56636a;
    line-height: 16px;
    }
    
    .comment_post_left a {
    color: #56636a;
    }

    I guess it's best to keep the "a" CSS separate from the div CSS.

  11. rinse
    Member
    Posted 3 years ago #

    oops my bad wasn't thinking, yeah don't put it all together like i did haha

    anyway glad it's working.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.