Tip: Comments in a bubble with arrow

[SweetPotato]

A while back Fred asked Does anyone know how to change the ACTIVITY FEED Layout ?which was asking how to put activity feed items into a 'bubble'.

Between Peter Sorenson(thanks to you, sir) and I, we came up with a solution.

Using the best of both our code I've today added this to blog, video, wall, event and photo comments/replies (see blog, see video, see wallexamples).

One thing I've not tested thoroughly is what this does in forum replies because i don't use the forum extensively - the bolded code is what i think will work with forums but you might need to remove/amend.

click to preview

Simply put the attached bubble.txt code in your css box and amend where needed:

Let me know how you get on. I've also added this to my first theme in the Themes Group.

SP

 

[Fred CAMPANA]

Thanks ;)

[Audry T]

I love this idea, but I can't figure out how to do a critical customization for it. I have a site for which blogs and forums post on a black background and the text is white. But when I applied your CSS to create the bubbles, the comment bubbles became white, but the font also stayed white. Now, I want the comment bubbles to be white, but I need to override the default text color (white) so that the text shows up black -- but only inside comments. For example:

[Blog Post Has Black Background and White Text]

[comments have white balloon background and black text]

Can anyone help with this?

[Riccardo Rossini]

Give me your inner color code, I can change it for you

[Bruce Gaynham]

Hi Audry,

Just add the color: #000000; line to the section of css as per below.

The background line controls the background color of the comment bubble and by adding the color: ...; line you can control the text color.

Bruce

#comments dl.comment dd, #discussionReplies .discussion dd div.description, .xg_module_comment_wall dl.comment dd{
    color: #000000;
    background: #f9f9f9;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-right: 35px !important;
    padding: 2px 5px 27px 10px;
margin-left:20px!important;
}

[Riccardo Rossini]

If your inner color is pure black, do what Bruce said and also save the following .png file, load it in your file manager, copy its link and paste it in sweet potato's text instead of cornenright.png URL as in the image below

This is the new corner right image

[Audry T]

This was a quick and easy fix. Thanks to everyone who made a suggestion!

[Bruce Gaynham]

Very nice! I've implemented on our site.

Thanks SweetPotato

[Riccardo Rossini]

I needed also to add a little css code to make it work even in blog comments. See my previous reply ;-)

[SweetPotato]

Eh?

[Riccardo Rossini]

dl.discussion{
border:none!important;
}

Sorry, for forum comments ;-)

[SweetPotato]

Ah, gotya. :-)

[SweetPotato]

No worries, just came to this now so sorry for not getting to the color code.