January 8, 2010

TEXT SIZE minus plus

Change Author’s Comments Color and Styling

Advertisement
You Might Be Interested In Our Popular Article
  • Most Essential Free Softwares After Windows Installation
  • A author’s comment if has different background color, or different text style or even border, helps readers to easily locate what Author has to say if a question is asked in comments or even what he thinks of the comments coming.

    author-comment-highlight

    This simple tutorial will help you achieve same and that too without any plugin used.


    For WordPress Users:

    Note: Do take backup of your theme before you try this.

    01. Go to Appearance => Editor.
    editor

    02. Then choose style.css file from right hand side and add below code:
    style.css

    .authorstyle { background-color: #ebf4fb!important; }


    03. Then choose comments.php file from right hand side and find below code:
    comments.php

    <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"></li>

    And replace with

    <li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>"></li>


    04. Save the files and you are done.

    Note: You must replace 1 with the user ID of the author.


    For Blogger Users:

    Note: Do take backup of your template before you try this. Only try this if you are familiar with blogger codes.

    01. Go to Layout => Edit HTML, click on Expand Widget Templates and find below code and add the codes which are in red in exact positions:

    <dl id=’comments-block’>
    <b:loop values=’data:post.comments’ var=’comment’>
    <dt class=’comment-author’ expr:id=’"comment-" + data:comment.id’>
    <a expr:name=’"comment-" + data:comment.id’/>
    <b:if cond=’data:comment.authorUrl’>
    <a expr:href=’data:comment.authorUrl’ rel=’nofollow’><data:comment.author/></a>
    <b:else/>
    <data:comment.author/>
    </b:if>
    said…
    </dt>

    <b:if cond=’data:comment.author == data:post.author’>
    <dd class=’comment-body-author’>
    <p><data:comment.body/></p>
    </dd>
    <b:else/>

    <dd class=’comment-body’>
    <b:if cond=’data:comment.isDeleted’>
    <span class=’deleted-comment’><data:comment.body/></span>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd>

    </b:if>

    <dd class=’comment-footer’>
    <span class=’comment-timestamp’>
    <a expr:href=’"#comment-" + data:
    comment.id’ title=’comment permalink’>
    <data:comment.timestamp/>
    </a>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    </span>
    </dd>
    </b:loop>
    </dl>

    Note: The text in Red color, should be placed at right position as shown above.


    02. Now put below code before ]]></b:skin> in your template:
    blogger-skin

    .comment-body-author {
    background: #ebf4fb; /* Background color*/
    color: #000; /* Text color*/
    border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
    margin:0;
    padding:0 0 0 20px; /* Position*/
    }

    03. Save Template. You are done.


    If you are finding blogger code implementation hard, then try our Blogger to WordPress Service

    References:

    That concludes this simple and useful tutorial. Hope you like it.



    Related Posts From Network
    Print

    About the Author

    When I was born I was so shocked I didn't speak for a year and half...... My brain has 2 parts, Right and Left, The Right one has nothing left in it and the Left one has nothing right in it......Who says Nothing is Impossible?? I've been doing nothing for years......

    View Comments to “Change Author’s Comments Color and Styling”

    Author comments are in a darker gray color for you to easily identify the posts author in the comments

    1. ellenjane says:

      hi. how would u do that in twitter.?

    2. mohamedrias says:

      Very useful Tutorial dude… would like to see more of them :D

    3. Bariski says:

      Thanks for your comment bro.

    4. ellenjane says:

      hi. how would u do that in twitter.?

    5. mohamedrias says:

      Very useful Tutorial dude… would like to see more of them :D

    6. Bariski says:

      Thanks for your comment bro.

    7. Nice one Bro :) Just what I need :) Thumbs up :D

    8. Nice one Bro :) Just what I need :) Thumbs up :D

    9. Richie says:

      i couldn't find the code u mentioned in comments.php. the theme i am using is Mystique. Does it exactly have to be the same code??

    10. Richie says:

      i couldn't find the code u mentioned in comments.php. the theme i am using is Mystique. Does it exactly have to be the same code??

    11. Nice tut. Super simple. Thanks!

    12. Nice tut. Super simple. Thanks!

    13. That is a pretty useful tip. Now we can add some spice to the mundane cookie cutter author comments

    14. That is a pretty useful tip. Now we can add some spice to the mundane cookie cutter author comments

    15. Caromite says:

      Thanks for the great tut :)

    16. Caromite says:

      Thanks for the great tut :)

    17. Bariski says:

      Glad you like it.

    18. Bariski says:

      Glad you like it.

    19. I cant seem to get this to work in the Mystique theme.Please help!!!

    20. I cant seem to get this to work in the Mystique theme.Please help!!!

    21. Bariski says:

      Can you show me where?

    22. Bariski says:

      Can you show me where?

    Comments are closed.

    blog comments powered by Disqus