How 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.