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. =^_^=

 

 

 

 

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.

 

Views: 764

Attachments:

Replies to This Discussion

Fantastic! Thank you Alex!

=)

Great tip!
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.

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

Best,

Jen

I added a text file to original discussion. I did not include the shadow code.
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... : (
This one's not working for me.
How's not working?
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.
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.
Sorry, I just see ur message right now, busy work. You can add it on today. I'll take a look. :)
Busy at work is a good thing!  I've added the code back, still not showing.

RSS

Members

© 2024   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips