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

 

[The Talent Factory]

I tried adding the code to my advanced css but nothing happened...is this where I should be putting this code?

Thanks

Barry

[SweetPotato]

That's right Barry. It should work in both the old classic editor and the new design studio.

[The Talent Factory]

Sorry SP,

Is this code supposed to work all over the site for comments?

It works on blogs but not my wall.

Perhaps this is the way you made it...?

Either way, Thanks for the tip!

[SweetPotato]

Hi, it should work in your comments wall on your profile page but not latest activity.

[The Talent Factory]

Copy That!

Thanks again!

[Skye]

When you say amend where needed what are you referring to? I don't want to muck it up :]

[SweetPotato]

Things like border color and background. But try it and see how it looks. I've used neutral colors so it won't look disgusting ;-)

[Audry T]

Could this bubble be applied not just to comments, but directly to blog posts? It would be perfect for blogs to have this look in my community specifically for blogs.

[Chris Herzig]

Wow, what a great tip! This really looks a lot better!!

[Janettee McCrary]

Thanks - this is awesome:)

[George H. Compton IV]

I like your comment bubble but on a three column profile The editor will run into the third column.

to fix that just add this to the top portion of your code

max-width: 451px!important;

just like this :)

/*Comments in bubble with arrow*/
dl.comment{
border:none!important;
max-width: 451px!important;
}

[SweetPotato]

I don't believe i had seen that happen but thanks for the heads up