JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

NING TIPS: Replacing the deadly status boxes with lovely thinking bubbles in your main page

NING released the new activity feed. Check here for updated version of the bubbles.

It's very interesting to change the status background in the latest activity. Especially in the main page. I changed it to thinking bubbles. :)

You can see the real result here.

To do this, you need a small image and CSS3 supported browser.

The CSS is:

.xg_module_activity .status{

color: #666;
border: 1px solid #ccc;
background-color: #fff;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
padding-left:25px;
margin-left:25px;

}

.xg_module_activity .feed-story .status-bg {

-ms-filter:none;
opacity:100;
display: block;

width:25px;

background: #fff url('http://api.ning.com/files/sTKz1f8S0Pfd6ZE5Ayyif7fOZlr
MdrOuaJsGsyRbrVTeQ8CqjaUHirNGjjk0GZ67ZLHIPx*eSfEoHiBcsHAUA9XLM
05pD1mn/bubble.gif') no-repeat 0 20%;

}

.xg_module_activity .feed-story-status .current {

padding-right: 30px;

}

.xg_module_activity .status-bg {display:none;}
.xg_module_activity .left_arrow {display:none;}

Remember to keep this one in one line, no break!! Click here to get the background img URL.

background: #fff url('http://storage.ning.com/topology/rest/1.0/file/get/964750023?profile=original') no-repeat 0 20%;

As for the Lady GaGa staff in the image. She's gonna have a FREE concert in Taiwan next month. WOW!

And the Facebook is to teach you how to keep the spam away from your wall. That's will be my next tips.

More on, if you need shadows, add these:

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

into the first block. that is .xg_module_activity .status{ .... }

The result looks like:

Isn't it lovely?

By the way, I almost forget to say, there is a CSS3 Generator.

Hope you can enjoy it. =^_^=

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

0 members favorited this

Attachments:

statusupdate_thinkingbubbles_byAlex.txt, 1 KB

Replies to This Discussion

Permalink Reply by JenSocial on June 2, 2011 at 11:17pm

Fantastic! Thank you Alex!

Permalink Reply by Mr Schmooze™ on July 4, 2011 at 9:08am

Great tip!

Permalink Reply by Mr Schmooze™ on July 4, 2011 at 9:32am

please could you re-write this code in a notepad and attach it, it seems the way u posted isn't allowing me to copy it well.

Permalink Reply by JenSocial on July 4, 2011 at 6:06pm

What can you not grab? I'm not having a problem. I hate to ask Alex to rewrite it.

Best,

Jen

Permalink Reply by JenSocial on July 4, 2011 at 6:17pm

I added a text file to original discussion. I did not include the shadow code.

Permalink Reply by Mr Schmooze™ on July 4, 2011 at 6:28pm

for some reason, it's still not showing up on my network. i've removed your background colours code tip for the status box, and it still ain't working... : (

Permalink Reply by GirlRiders on September 2, 2011 at 6:25pm

This one's not working for me.

Permalink Reply by Tips by Alex/JenSocial on September 2, 2011 at 10:31pm

How's not working?

Permalink Reply by GirlRiders on September 3, 2011 at 6:05am

I pasted the code into the advanced appearance CSS box and nothing happens. I checked old status updates and posted new ones and no fancy bubbles. Your still a member on my site if you want to take a look.

Permalink Reply by GirlRiders on September 4, 2011 at 3:24pm

I'm going to take the code off for now, Alex if you think of something or want me to try again, please let me know because these do look pretty cool.

Permalink Reply by Tips by Alex/JenSocial on September 5, 2011 at 5:30pm

Sorry, I just see ur message right now, busy work. You can add it on today. I'll take a look. :)

Permalink Reply by GirlRiders on September 6, 2011 at 6:19am

Busy at work is a good thing! I've added the code back, still not showing.