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.
3 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
- Pingback: 5 Popular CSS Speech Bubbles | cssJuice on December 18, 2009
Thats Me on that comment