JenSocial: Social Network Directory / Social Web Directory

Social Network Directory & Network Creator Help - Ning, Spruz, SocialGO, etc...

  1. VIP Ning Club

    Join the Ning VIP Club!
  2. About VIP

    ~ Best NING TIPS, available online, special support for Ning Network Creators. TESTIMONIALS...
    ~ Insert Content or Google Ads within blogs/forums, or most anywhere. Ning-ready sliders/accordions, tabbed content, special shadow techniques, CSS tricks, and much more!
    ~ Only $34.95 for 6 months of support and all VIP Tips - - a great deal!

    Join Now!
  3. Directory

  4. Network HELP

  5. Free Ning Tips

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('http://api.ning.com:80/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. :)

 

 

 

 

 

 

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, iyoume, lovely, main page, new activity feed, ning, status box, thinking bubbles, tips

Views: 408

Replies to This Discussion

Hi,

How are you? I added this tip; however it's not working on my site. Thank you for your help!
Once I right click and save the 2 little bubbles, upload them and then where do you enter the url for the 2 little bubbles into the code?

Replace the background url between quots:

 

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

    padding0 1em 0 0.8em;
    background: #fff url('http://api.ning.com:80/........../bubble.gif') no-repeat 0 30%;
}

 

Alex - you are awesome!   THANK YOU!   Sorry I didn't realize there were two separate tips for this.  It looks so cool on my site now! 

The shadow color even already matches my site :)

this  (and other things) are not workimg properly in ie

i adapted this code and used it to highlight and frame many things on my site working beautifully ..untill i opened ie

it worked fine on every page but forum discussions where most of my css refused to work properly

i tested with only thios


.xg_module_activity .feed-story-status .status-update{vertical-align:middle;color:#fff;border:1px solid #ccc;background-color:#14135e;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;-webkit-box-shadow:6px 6px 10px #FFC9CF;-moz-box-shadow:6px 6px 10px #FFC9CF;box-shadow:6px 6px 10px #FFC9CF;margin:0 0 5px 15px;padding:1em 2em;}
.xg_module_activity .feed-story-status .rich-detail{background:#333 url(http://api.ning.com:80/files/X1xpAeybsx1lH41WEeXaG5Nsp06FfuievRMi9V...*CODtd1W59jaEDG5HvbDZeaHqIAgW7xOJE-iTfBG6t/bubbles.png) no-repeat 0 30%;padding:0 1em 0 .8em;}
.xj_status .input-container{border-radius:10px;border:3px solid #aaa!important;-moz-border-radius:10px;-webkit-border-radius:10px;}

_

and only the background sghows

_

evewbn though it works perfectly everywhere else

_

 

_

anyone else have this issue?

help

my sites a scrambled mess in ie now

 

Thank you! Looks fabulous!

Just found this.  Brilliant thanks!

Brilliant! Shadows for sure.. Its more now! I've managed to add the bubbles as well as change the color of the shadow. Still have a long way to go but seems i'm in the right place!!

Thanks so much Jen, I've learnt more here in the last few days than I've had support from you know who since I've signed up.! I'll upgrade my membership to premium for sure! 

Hopefully you can have a look at my network and we can discuss the way forward. >> http://www.bbbling.co.uk

Best regards

Ricky 

RSS

JenSocial Virtual Shopping Mall & MarketPlace

Speak Your Mind!

VIP Ning Club:
Jen’s always cooking up new & exciting Ning Tips!

Discover the best Ning Support you’ll find anywhere! Just ask our VIP Members! ;-)

Testimonials

JOIN NOW!

Join the JenSocial Premium Ning Tips Club
All the work/tips created on JenSocial.com are provided free, but your donations allow me to continue offering Free Support, Tips, News, and free Directory Listings. Any amount is greatly appreciated.

Your donation allows me to continue offering Free Support, Social Networking Tips, News, and free Directory Listings for Social Networks, in the largest Social
Welcome to JenSocial Network Directory: Social Network Directory and Network Creator Hub for all Social Networking platforms:
Ning, Spruz, SocialGO, Grou.ps, JomSocial, BuddyPress, WackWall, etc...

Formerly the Ning Directory

Add Your Social Network, Find, Preview and Join, all kinds of great Social Networks (Social Communities) - - from Art to Pets!

 

 

© 2012   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service