TIPS: Lovely thinking bubbles for the NEW ACTIVITY FEED!!

If you haven't got the new activity feed, you still can have the lovely thinking bubbles here for old activity. Now it's time to get excited with the new activity feed and thinking bubbles together!!!! Yahooooooo!!!

Which one do you like?

With shadows? Or without shadows?

And pls ignore the english writing because it's Google's funny translation.

Now put the following CSS code into the advanced CSS field of Design Studio:

.xg_module_activity .feed-story-status .feed-quote {
display: none;
}

.xg_module_activity .feed-story-status .feed-endquote {

display: none;
}

.xg_module_activity .feed-story-status .status-update {

padding-left: 0;
  padding: 1em 2em;
  margin: 0 0 5px 15px;
vertical-align: middle;
  color: #666;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;

-webkit-box-shadow: 3px 3px 10px #FFC9CF;
-moz-box-shadow: 3px 3px 10px #FFC9CF;
box-shadow: 3px 3px 10px #FFC9CF;
}

.xg_module_activity .feed-story-status .rich-detail {

padding: 0 1em 0 0.8em;
background: #fff url('https://api.ning.com/files/sTKz1f8S0Pfd6ZE5Ayyif7
fOZlrMdrOuaJsGsyRbrVTeQ8CqjaUHirNGjjk0GZ67ZLHIPx*eS
fEoHiBcsHAUA9XLM05pD1mn/bubble.gif') no-repeat 0 30%;
}

You may need to change the color or padding, margin. And here is the two little bubbles image you can use. (Right click on it to copy the url path.)

Pls remember the background image url should be in one line non-break. You can draw another two little bubbles image with different color too. I think it's not that hard.

If you don't want shadows, just remove these three lines:

    -webkit-box-shadow: 3px 3px 10px #FFC9CF;
    -moz-box-shadow: 3px 3px 10px #FFC9CF;
    box-shadow: 3px 3px 10px #FFC9CF;

I think my next plan is to have differences crazy status box backgrounds. :)

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at iYouMe.net.

Replies

Speed Racer June 15, 2011 at 6:02pm

looks really cool, alex! thanks for posting one for the new activity feed so quickly....i'm going to make a completely different "bubble" image that better fits my network
- Alex 小正正 > Speed Racer June 15, 2011 at 7:42pm
  
  pls show me after you finished. :)
This reply was deleted.
- Alex 小正正 June 16, 2011 at 5:12am
  
  I'm glad you like this. ≧^◡^≦
NC for Hire

Jen June 15, 2011 at 10:30pm

Alex,

I like both bubbles, and think I'm with Eric, kinda leaning more towards the no shadow on this one.

Great job!

Jen
- Alex 小正正 > Jen June 16, 2011 at 5:18am
  
  Actually I found Chrome have problem in rendering shadows sometime. But not big deal.
M June 16, 2011 at 7:55pm

Works like a champ! What would be cool is when a piece of content gets featured it also shows up with a "FEATURED" highlight of some sort.
Abel I. Arenivar June 17, 2011 at 5:12pm

Hey como hago no me sale copio el codigo pero no mesale y como hago para verlo en la red de prueba que estube probando ahi y no me salio nada :-( quiero ayuda gracias
Emily Murray June 17, 2011 at 5:31pm

Will this not work until next week or should it work now? It's super cool, if I can get it to work!
This reply was deleted.
- Alex 小正正 June 28, 2011 at 12:45am
  
  Hi Emily and TJ,
  
  Do you have the new activity feed now? I think everyone got now. If not, here is the bubbles tip for the old one.
This reply was deleted.
- Kyryl_Ning_Support June 29, 2018 at 1:21am
  
  Hi there!
  
  This is the code for 2.0 networks, and you are using 3.0 network. Basically, the update won't help since those two platforms have a bit different structure of the activity feed items. So the code should be completely reworked in order to work on 3.0.
  
  Best regards,
  
  Ning Team.