Alter comment links in blog teaser in drupal 7 I would like to alter the comment links in the teaser view of the blog page. The code I have in node--blog.tpl.php at the moment is:

&lt;code&gt;&lt;?php if ($display_submitted): ?&gt;
&lt;div class="submitted"&gt;
  &lt;ul&gt;
&lt;li&gt;&lt;?php $date = date("d F Y", $node-&gt;created); ?&gt;
&lt;?php print $date; ?&gt; &lt;/li&gt;
 &lt;li&gt; &lt;?php $user = user_load($node-&gt;uid); ?&gt;
        &lt;?php $username=$user-&gt;name; ?&gt;
&lt;?php print t("By"); ?&gt;
&lt;a href="blogs/&lt;?php print $username ?&gt;"&gt;&lt;?php print $username ?&gt; &lt;/a&gt; &lt;/li&gt;
  &lt;li&gt; &lt;span&gt;&lt;?php print ($comment_count); ?&gt;&lt;/span&gt; &lt;?php print render($content['links']['comment']); ?&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;


  

>
    
  

  

  



with css: .submitted ul li span {
        color: #fff;
        background: url("../images/blue-bubble.png") 0px 2px no-repeat;
        background-size: 100% 96%;
        padding: 0px 5px 5px 5px;
}

which produces:



but I want to make:



Any suggestions on this would be great!

Thanks
If I were you I'd hide the span content in CSS and add a tag for my background image like this:

Template:

&lt;li&gt;
    &lt;span class="comment-hidden"&gt;&lt;?php print ($comment_count); ?&gt;&lt;/span&gt;
    &lt;span class="comment-count"&gt;&lt;/span&gt;
    &lt;?php print render($content['links']['comment']); ?&gt;
&lt;/li&gt;


CSS:

.submitted ul li span.comment-count { 
  width: 16px; // or whatever
  height: 16px;
  background: url("../images/blue-bubble.png") 0px 2px no-repeat;
  background-size: 100% 96%; 
  padding: 0px 5px 5px 5px; 
}

.submitted ul li span.comment-hidden { 
  display: none;
}