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:80/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://api.ning.com:80/files/sTKz1f8S0Pfd6ZE5Ayyif7fOZlrMdrOuaJsGsyRbrVTeQ8CqjaUHirNGjjk0GZ67ZLHIPx*eSfEoHiBcsHAUA9XLM05pD1mn/bubble.gif') 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. =^_^=

 

 

 

 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
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.

 

Tags: css, deadly, iyoume, lovely, main page, ning, status box, thinking bubbles, tips

Views: 529

Attachments:

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.

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips