I've created this cool Post-It Note effect for the Activity Feed, and thought I would share it here with you.

This effect is NOT recommended for anyone that is using a thin column for their activity Feed. Be sure to install it if you are using a WIDE column layout and your Activity Feed is running in that wide column.

Also, I designed this effect to work with "some" of the posts, not all. As you can see from the pictures of my network below, I am using Thought Bubbles for "Status updates," and some posts come across with a Post-it note.

*Caution* if you already have done some styling to your activity feed, this code my over ride or interfere with that. Be sure to back up your Advanced CSS first, before trying to implement this.

There is the Post-it Note... it is actually animated and will appear to LIFT UPWARD on a mouse over hover. It will also keep any links in the feed and appear on the note.  I've set it to NOT OVERFLOW so big long titles to photos and blogs, could get cut off... which, I think is a good thing... looks more cleaner and will also inspire users to post NICER and NEATER and MORE DESCRIPTIVE titles and description on their content.


I borrowed the Push Pin Sprite from Jen's Social
You will need to upload the Push pin sprite into your website via a blog, or file manager.

FYI: My Avatars rotate when moused over, that is why it appears to do so in this screen shot - it is NOT part of the post-it note effect.  I enjoy stylizing with CSS, and have made many custom tweaks using tips I learned and expanded upon, right here on NING Creators, and Jensocial.com

I hope you like,
Enjoy!

Step 1: Upload Push Pin Sprite to your site, via a Blog or File manager.


Push Pin File: (pushpin_magenta.png)

Step 2: Paste the following CSS into your Advanced CSS section.

/* -- START - CHLOE'S POST-IT NOTE - ACTIVITY FEED -- */

.feed-story-title {
background:url(PASTE URL LINK TO PUSH PIN CODE HERE) no-repeat!important;}


.feed-story-title {
          background-color: #f3f7ca !important;
        -moz-box-shadow: 1px 3px 10px -4px #4a4a2f;
        -webkit-box-shadow: 1px 3px 10px -4px #4a4a2f;
           box-shadow: 1px 3px 10px -4px #4a4a2f;
          padding: 15px;
          margin-right: 10px !important;
          height: 80px;
          width: 120px;
          overflow:hidden;
          position: relative;
          float: LEFT;
          border-bottom: solid 1px #4a4a2f;
          font-size:11px;
          text-align: center;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
        -ms-transform: rotate(3deg);

}

.feed-story-title:HOVER {
        -moz-box-shadow: 1px 10px 4px -2px #4a4a2f;
        -webkit-box-shadow: 1px 10px 4px -2px #4a4a2f;
          box-shadow: 1px 10px 4px -2px #4a4a2f;
          margin-bottom: 5px !important;
          height: 75px;
          border-bottom: solid 1px #000000;
        -moz-transition:all .3s ease-out; /* Firefox 4 */
        -webkit-transition:all .3s ease-out; /* Safari and Chrome */
        -o-transition:all .3s ease-out; /* Opera */
}

/* -- END - CHLOE'S POST-IT NOTE - ACTIVITY FEED -- */

My site is a private site, so I can't post a link to it, but here is what it looks like running the Activity feed in the center column.

I hope this works for you!!!

Tags: ACTIVITY, CSS, FEED, IDEAS, IT, NOTE, POST, TIPS

Views: 2444

Reply to This

Replies to This Discussion

Good stuff.

One note - you should be able to leave out anything from .feed-story-title:HOVER that you doesn't change from .feed-story-title, as the hover pseudo class inherits them from the original class styles. The only styles you have to declare for hover are the ones different from the original:

.feed-story-title:HOVER {
-moz-box-shadow: 1px 10px 4px -2px #4a4a2f;
-webkit-box-shadow: 1px 10px 4px -2px #4a4a2f;
box-shadow: 1px 10px 4px -2px #4a4a2f;
height: 75px;
border-bottom: solid 1px #000000;
-moz-transition:all .3s ease-out; /* Firefox 4 */
-webkit-transition:all .3s ease-out; /* Safari and Chrome */
-o-transition:all .3s ease-out; /* Opera */
}

*blushes*

Yeah... I've gotten a bit lazy doing that, because I use an external CSS Sheet to load most of my css effects that are not higher priority.

Removing the redundant lines is an excellent tip.



However,

Your updated code for the hover over portion left one critical line out:

margin-bottom: 5px !important;

The full code should look like this:


/* -- START - CHOLE'S POST-IT NOTE - ACTIVITY FEED -- */

.feed-story-title {
background:url(PASTE URL LINK TO PUSH PIN CODE HERE) no-repeat!important;}


.feed-story-title {
          background-color: #f3f7ca !important;
        -moz-box-shadow: 1px 3px 10px -4px #4a4a2f;
        -webkit-box-shadow: 1px 3px 10px -4px #4a4a2f;
           box-shadow: 1px 3px 10px -4px #4a4a2f;
          padding: 15px;
          margin-right: 10px !important;
          height: 80px;
          width: 120px;
          overflow:hidden;
          position: relative;
          float: LEFT;
          border-bottom: solid 1px #4a4a2f;
          font-size:11px;
          text-align: center;
        -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
}

.feed-story-title:HOVER {
        -moz-box-shadow: 1px 10px 4px -2px #4a4a2f;
        -webkit-box-shadow: 1px 10px 4px -2px #4a4a2f;
          box-shadow: 1px 10px 4px -2px #4a4a2f;
          margin-bottom: 5px !important;
          height: 75px;
          border-bottom: solid 1px #000000;
        -moz-transition:all .3s ease-out; /* Firefox 4 */
        -webkit-transition:all .3s ease-out; /* Safari and Chrome */
        -o-transition:all .3s ease-out; /* Opera */
}

/* -- END - CHOLE'S POST-IT NOTE - ACTIVITY FEED -- */


nice

Thanks Solo :)

Nice tip
Sp

Thank you SweetPotato :)

nice one!

Glad you liked, thanks!

nice one!

Rats.  I was all excited but I'm using the modified Activity feed which includes Social feeds from Ning labs [beta] and it must be conflicting.  Doesn't work.  Oh well, thank you for sharing with everyone though!  Cool look

I am using social feeds too, and it works just fine. Our site is private and by invitation only, so its locked down, and still no problems.

It must be some other CSS you have put in for the activity feed causing it to not work.  Are you using the original NING designer or the new Design studio?  Maybe post your code here and someone could help you diagnose the issue...

I don't see anything in there that would be conflicting with this modification. 

I've never used the "original" designer, but if there is a place for you to modify the CSS, that would be where to look for something conflicting.

If you want to share a link I could take a look.

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity


NC for Hire
SweetPotato replied to SweetPotato's discussion 'Tip: Insert Adverts in Content after the First Paragraph'
"Glad it worked. SP"
26 minutes ago
francesco pillinini replied to francesco pillinini's discussion '3rd Party Integration > Facebook'
"Elshara Thank you very for replying to my message still can't see what im looking for on…"
37 minutes ago
Kevin Kelly replied to Chris Purington's discussion 'Paid Memberships & Recurring Payments in Ning 3.0'
"That would be a great feature to add.  There's bound to be lots of small membership…"
2 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"sure message me"
4 hours ago
Just Asking replied to SweetPotato's discussion 'Tip: Insert Adverts in Content after the First Paragraph'
"I just added this.  Works BEAUTIFULLY! Thanks so much for the tip!"
5 hours ago
Just Asking replied to Just Asking's discussion 'Need help defeating image crawler...'
"I will do that for the last couple.  The member is somehow still finding ones I hide on…"
6 hours ago
Just Asking replied to Just Asking's discussion 'Anybody know of virtual world or virtual pet widgets with custom private channels?'
"I actually have a couple different ones like that installed already I'm *supposed to* be…"
6 hours ago
Kos replied to Enrrico Torres's discussion 'how to reduce the http request'
"Agreed."
8 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service