Background behind comment number?

  • I am trying to put a background behind my comments link at the bottom of the post. Specifically, I would like a small shape behind the number (let’s say 10) of comments, while the word “comments” would sit outside of the shape. I would like the number to be centered within the shape. I have tried editing the functions.php file to include a span around the 0, 1, and %, so I can style them with a background, but that doesn’t work. It constrains the background element to the exact size of the number. In addition, I’m not sure how I would center the number if I could get the background to show up.

    Here’s what my functions.php segment looks like, if that helps.

    case 'comments':
					if(!comments_open()) break;
					ob_start();
					comments_popup_link( __( '0 Comments', THEME_NS ), __( '1 Comment', THEME_NS ), __( '% Comments',THEME_NS ) );
					$result[] = art_get_meta_icon('comment-number-background', 43, 26) . ob_get_clean();

    Any suggestions? Am I looking in the wrong place?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter amrosenthal

    (@amrosenthal)

    Is there a different place I should be looking to edit this, maybe? (I obviously need to learn php.)

    I have tried editing the functions.php file to include a span around the 0, 1, and %, so I can style them with a background, but that doesn’t work.

    why wouldn’t this work?

    what was the exact code you tried?

    i would try something like this (obviously this will break any translation) :

    case 'comments':
	if(!comments_open()) break;
	ob_start();
	comments_popup_link( __( '<span class="comment-count">0</span> Comments', THEME_NS ), __( '<span class="comment-count">1</span> Comment', THEME_NS ), __( '<span class="comment-count">%</span> Comments',THEME_NS ) );
	$result[] = art_get_meta_icon('comment-number-background', 43, 26) . ob_get_clean();

    and then style it with something like:

    .comment-count {
display:block;
height:20px;
width: 40px;
text-align:center;
background: transparent url(images/comment_count_bg.png) left bottom no-repeat; }

    or similar.

    (untested)

    Thread Starter amrosenthal

    (@amrosenthal)

    That’s exactly what I did, however, the height and width are being superseded by something else I can’t find. The background shows up, but only to the height and width of the number. Meaning, if there are 10 comments, I can only see the background directly behind the 10, and I can’t get it to expand beyond the margins of that number.

    i would have hoped that the ‘display: block;’ in the style would expand the background ??
    at least this is what it does in my test.

    Thread Starter amrosenthal

    (@amrosenthal)

    Oooh! Thanks alchymyth! The display:block was just what I was missing. Now the only problem is getting it to show up before the word “comment” rather than after.

    Thread Starter amrosenthal

    (@amrosenthal)

    Got it! Using display:inline-block made it all work out beautifully! Thanks again alchymyth!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Background behind comment number?’ is closed to new replies.