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

 

[Michael Thompson]

Nice tip SweetPotato! I posted a number of test comments and replies in the discussion area and it seems to be working well. The only thing that appears to be not working is the little arrow between the bubble and the avatar is not showing up in any of the areas on my network (articles, comment wall, discussion, etc.). 

[SweetPotato]

I wonder if the URL of the image is broken in the thread above

http://api.ning.com:80/files/HFqCj2J1p5dDEhLE1YWO29om9ILqESN44Bg6dD...*ZHP9Un645KjUnEM37g4p/cornerright.png

[Michael Thompson]

Yes, I got it to work now. After clicking on the blue highlighted link above you must add *ZHP9Un645KjUnEM37g4p/cornerright.png   to the end of the url and hit refresh. 

[SweetPotato]

Didn't notice that when I posted it, stupid API URL! I'll add a txt file tomorrow - on iPad now

[SweetPotato]

It's done the same again LOL

[SweetPotato]

"http://api.ning.com:80/files/HFqCj2J1p5dDEhLE1YWO29om9ILqESN44Bg6dDJhiEBtjx0W8xnvsGoGR9axcIS534jHneio1v8*ZHP9Un645KjUnEM37g4p/cornerright.png"

[Michael Thompson]

Here is what a comment reply looks like with the dotted lines within the bubble: http://www.standingstonenews.com/forum/topics/standing-stone-news-j...

[SweetPotato]

Don't think I have the dotted reply on my site. Looks ok, , though, no?

[Michael Thompson]

/***DOTTED REPLY QUOTE STYLE**/ 

blockquote { 

padding: 10px;

border: 1px dashed #303030;

  border-radius: 10px;

  } 

cite { 

font-style: italic;

 } 

/***END QUOTE STYLE**/

[SweetPotato]

Thanks Michael

[Riccardo Rossini]

Very elegant in my site, nice tip!

[SweetPotato]

you're welcome Riccardo, glad you like it