How I wrangled the comments on Virb

Posted on March 25.

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

Pingback: CSS Juice - Design, Tutorial, Showcase and more » 5 Popular CSS Speech Bubbles on August 3, 2007
Pingback: 5 caixas de diÃ¡logo em CSS para download on August 23, 2007

1 Comments

Milo Hill on March 25, 2007

Thats Me on that comment

The Montoya Herald, a weblog about Blueprint, jQuery, design, music and life, publishing on the web since September 2005. Written by Christian Montoya: developer, designer and entrepreneur.

Supported By