Hi!
I want to make the comment count for all the blocks look like TheVege.com. Someone from tagDiv sent me this:
—————————————-
You have to do something like this:
– wrap the image inside a div and add the post comments counter: http://screencast.com/t/ywUNcGIkRF
<div class=”image_f”><?php echo $this->get_image(‘art-big-1col’); ?>
<div class=”comments_b10″><p><?php echo get_comments_number($this->post->ID)?></p></div></div>
– use css to style the newly added counter: – http://screencast.com/t/n6KN8v8JJBu
.image_f {
position: relative;
}
.comments_b10 {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1;
color: white;
font-size: 15px;
line-height: 0px;
text-align: center;
background-color: rgba(77,178,236,0.9);
}
.comments_b10 p{
padding: 10px 7px 10px 7px;
margin: 0px;
}
.comments_b10:after {
position: absolute;
bottom: -8px;
right: 0;
left: auto;
content: “”;
width: 7px;
height: 8px;
background-color: transparent;
background-repeat: no-repeat;
background-position: -8px -87px;
background-image: url(http://cdn3.vox-cdn.com/images/verge/sprites/ribbongles.v51a515f.png)
}
———————–
I added the code and it worked, unfortunately the CSS for tag P connects with the other P. For example, the text colour for P is “#fffff” here, but it connects with the other P tag (content text’s css) and makes it black. It happens to the font-size and height as well.
How can I fix that?
Thanks,
Mehedi
Hi,
Can you show me a picture so I can see exactly what happened?
Thanks
Hi!
Here is how it looks like: http://screencast.com/t/EkOAnBpSz
Also, I am not sure why or how it happened but it looks very different now (although the code is same). Can you please fix this?
Thanks!
Hi,
Some of the characters are changed, that’s why it doesn’t display properly.
Add the code directly from the section bellow (don’t copy it inside a text editor, it will get formatation and it won’t work properly).
.image_f {
position: relative;
}
.comments_b10 {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1;
color: white;
font-size: 15px;
line-height: 0px;
text-align: center;
background-color: rgba(77,178,236,0.9);
}
.comments_b10 p{
padding: 10px 7px 10px 7px;
margin: 0px;
}
.comments_b10:after {
position: absolute;
bottom: -8px;
right: 0;
left: auto;
content: "";
width: 7px;
height: 8px;
background-color: transparent;
background-repeat: no-repeat;
background-position: -8px -87px;
background-image: url(http://cdn3.vox-cdn.com/images/verge/sprites/ribbongles.v51a515f.png);
}Also modify the code like this – http://screencast.com/t/9d4ERmebSP
<div class="image_f"><?php echo $this->get_image('art-big-1col'); ?>
<div class="comments_b10"><p><?php echo get_comments_number($this->post->ID)?></p></div></div>Thank you, Emil G.
Hi,
I have looked on your page and i didn’t find the code for the comment count. I have tested this and it works fine http://screencast.com/t/p1owcqBoe2h5
I’m not sure why this does not work for you, try to empty the cache.
Thank you
Hi Emil,
I added the code from my cPanel’s “Edit code” thing (http://screencast.com/t/TexBIAp6i). What do you mean by “don’t copy it inside a text editor, it will get formatation and it won’t work properly”?
I added the code and it is live on the site. Please check and let me know.
By the way, I cleared my browser’s cache but doesn’t seems to be working fine.
Thanks!
I used the same thing like you, but its different. See here: http://screencast.com/t/6WG7tOtFk
Hi Emil,
Its working for me now. I guess, it wasn’t working because I customized the theme’s font color and size from theme panel.
Thanks!
