A Single Article
Read it, comment, and share it with your friendsHow I wrangled the comments on Virb
I figured I would share a little Virb CSS-customization tip with y’all for the sake of general enlightenment and learning. Here’s what I did on my Virb profile to create a unique look… first, the default Virb design:
And my final outcome:
See, this would be easy if the markup for these comments was clearly separated, that is, if all the text had a separate container aside from the image… but it doesn’t. Here’s what I had to work with:
<div class="comment_box">
<a href="/..."><img src="..." class="virb_image" alt="" /></a>
<p class="comment_author"><a href="/..."><strong>...</strong></a> says:</p>
<div id="comment_div_24933">
<p class="comment_post" id="comment_text_24933">...</p>
<p class="comment_extras">posted 2 weeks ago</p>
</div>
<hr class="clear" />
</div>
See, there’s no container wrapping all the text together, making things a bit more difficult… so the thought process went as such:
- Pull the image out of the main container
- Push the main container over enough to leave space in between
- Use that space to insert my triangle background image, which completes the “text bubble” look
And here’s the CSS I used to make it happen:
div.comment_box, div.comment_box_alt {
margin-left:122px;
}
div.comment_box img.virb_image,
div.comment_box_alt img.virb_image {
border:none;
margin-left:-135px;
padding:0 30px 0 0;
background:url(http://...png) 106% 16px no-repeat;
}
It’s really simple when you look at it, but that’s how I feel about all CSS
Disclaimer: if you think I am done with my Virb profile, you are terribly wrong. I’m just postponing a full redesign until I actually have the time for it. I have good things up my sleeve… trust me.


Get a Trackback link
2 Trackbacks/Pingbacks
Other blogs referencing this article1 Comments
Responses to my articleThats Me on that comment
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.