Support » Themes and Templates » How do I change the color of my Comment Link

  • Resolved drewdroid


    My friend helped me use artisteer to generate the theme for my site.

    On my site,, I don’t know how to change *just* the color of the comment link at the end of my posts (where it says “Please leave a comment, 1 Comment, or # Comments”)

    I’ve done some code detective work [I’m very very new at this] and I learnt how to change the CSS styles of that entire area but I want the Comment link to be another color to stand out.

    The text itself I found is controlled by the comments_popup_link portion in my functions.php file. The styling of that whole area is controlled by an area in my stylesheet.css called /* begin PostIcons, PostFooterIcons */.

    Also is there any way to force that text to be all on the same line? Do I use one of those   things?

Viewing 13 replies - 1 through 13 (of 13 total)
  • You can’t make the text be all on the same line, because it could break the structure of the site or, most probably, overlap the sidebar. But you can reduce the text size if you really want it to occupy just one line.

    Going back to your first question, there’s a little problem with changing the color just on the comments’ link. There’s no CSS class assigned to that little piece of code, but we can add it if you want ๐Ÿ™‚ Just add here that part of the code in your functions.php file you mentioned, and we’ll edit it together ๐Ÿ™‚

    In order to change the color you will need to add a div class tag around the comments. You’ll have to look in your template to correct this. Also, as Rodni said, the “leave a comment” already is on the same line but is being broken because of lack of space, if you reduce the font size size you’ll see it on one line (though you’ll have to keep tag count down).

    Thanks so much. What I meant was that I wanted just the text “please leave a comment”, to not break up which I think I accomplished using non-breaking spaces. Or at least it seems to work, because now if there is not enough space it’ll go to the next line.

    So forget that, let’s see if I can get this color thing to work.

    Here is the functions.php file code:

    case 'comments':
                if(is_page() || is_single()) break;
                    comments_popup_link(__('Please leave a comment »', THEME_NS), __('1 Comment »', THEME_NS), __('% Comments »', THEME_NS), '', __('Comments Closed', THEME_NS) );
                    $result[] = art_get_post_icon($icon) . ob_get_clean();

    And here is the Postfootericon code in my stylesheet.css

    /* begin PostIcons, PostFooterIcons */
      color: white;
      padding: 5px;
    border-color: #262626;
    .art-postfootericons, .art-postfootericons a, .art-postfootericons a:link, .art-postfootericons a:visited, .art-postfootericons a:hover
      font-size: 13px;
      text-decoration: none;
      font-weight: bold;
      margin: 5px;
    .art-postfootericons a, .art-postfootericons a:link, .art-postfootericons a:visited, .art-postfootericons a:hover
      margin: 0px;
      text-decoration: underline;
      color: #607F5D;
    .art-postfootericons a:visited, .art-postfootericons a.visited
      color: #607F5D;
    .art-postfootericons a:hover, .art-postfootericons a.hover
      text-decoration: none;
      color: #B6F1B0;
    /* end PostIcons, PostFooterIcons */

    For what I can see, we can work directly on the functions.php file. But if you want to do a better organized modification, I’ll be needing your loop.php file code, as well as your loop-page.php file code just in case.

    Waiting for your reply so we resolve this ๐Ÿ™‚

    It seems like my theme has no file named loop.php, or loop-page.php….. is that even possible?

    OMG! That’s really weird :S But if your site is working, then I guess it’s possible ๐Ÿ˜› Can you name for me the list of files based on your theme folder?

    404 Template
    Main Index Template
    One Column Page Template
    Page Template
    Search Form
    Search Results
    Single Post
    Theme Functions


    I’m guessing the one file we have to edit is post.php. I’d be really greatful if you could show me the code in that file…

    case 'comments':
    if(is_page() || is_single()) break;
    comments_popup_link(__('<div class="new-color">Please&nbsp;leave&nbsp;a&nbsp;comment&nbsp;ยป</div>', THEME_NS), __('1 Comment ยป', THEME_NS), __('% Comments ยป', THEME_NS), '', __('Comments Closed', THEME_NS) );
    $result[] = art_get_post_icon($icon) . ob_get_clean();

    In your stylesheet
    .new-color a {color: #fff;}

    That’s the easy way I was talking about. You can solve your problem with jrav001’s solution, but I’ll prepare the one I talked you about, and then you can choose which way to go ๐Ÿ™‚

    I installed Artisteer and checked out the structure of the information in the files that program generates, and couldn’t find what I was looking for. Artisteer has a very different structure.

    So I guess that leaves us with the other solution. But jrav001’s solution was incomplete and a little wrong, so here you have the one that will completely work for what you want to do. First repleace that piece of code you attached before in your functions.php file for this:

    case 'comments':
                if(is_page() || is_single()) break;
                    comments_popup_link(__('<span class="comments-link">Please leave a comment ยป</span>', THEME_NS), __('<span class="comments-link">1 Comment ยป</span>', THEME_NS), __('<span class="comments-link">% Comments ยป</span>', THEME_NS), '', __('<span class="comments-link">Comments Closed</span>', THEME_NS) );
                    $result[] = art_get_post_icon($icon) . ob_get_clean();

    And then you need to add this in your style.css:

    .comments-link {
    	color: #900;
    a .comments-link:hover {
    	color: #F00;

    You should change the colors to the ones you want to use. The first one is for the color of the comments’ link, and the second one is for when you put your mouse over the link.

    And that’s all! It should work like a charm ๐Ÿ˜€ Good luck drewdroid!

    Thanks Rodni, that worked 100%. Now my comment link stands out.

    I’m really glad to hear that drewdroid! ๐Ÿ˜€ Really happy to help you! Hope to see around here again ;P

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How do I change the color of my Comment Link’ is closed to new replies.