Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

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!!!

You need to be a member of Ning Creators Network to add comments!

Join Ning Creators Network

Email me when people reply –

Replies

  • 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

  • NC for Hire
    Nice tip
    Sp
    • Thank you SweetPotato :)

  • NC for Hire
    nice one!
    • Glad you liked, thanks!

  • NC for Hire
    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

This reply was deleted.

Search the Creators Network

Latest Activity

soporte is now a member of Ning Powered Events
8 hours ago
Garfield Archivist replied to Garfield Archivist's discussion Network Creators Private Survey Results
""
12 hours ago
Anam replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"There have been some changes in recent days. Number 1, admins and Network Creators are now getting…"
18 hours ago
Edie2k2 replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"I'm very grateful for the fact that it still works. No complaints whatsoever... Best platform going!"
19 hours ago
Sam Alexander left a comment for Sam Alexander
""
19 hours ago
doone replied to Ning's discussion Introducing Activity Feed Improvements, Including Member Status Updates
"Ning still works, at least.  If you have a Ning 3 or a custom Ning 2 it is not that bad, IMO.  It w…"
23 hours ago
Tu Thai, Roger Crawford, keila and 1 more joined Ning Creators Network
yesterday
Katcha Sanderson replied to Katcha Sanderson's discussion Multiple forums in single network?
"Thanks for the realistic feedback. I wanted to know what my network can and cannot do in regards to…"
yesterday
JFarrow replied to David Carr's discussion Going to spam
"sometimes you can accidentally mark a message spam in gmail and all will go to spam... go to your s…"
yesterday
Kos replied to David Carr's discussion Going to spam
"It seems to happen, depending on the users security settings.  I'm always having to tell people to…"
yesterday
Paul Asher replied to James Quack's discussion Not able to Import Forums into Buddypress from Ning .JSON FIles
"No probs. Hope WP works out for you but if it doesn't don't forget Jamroom ;-)"
yesterday
James Quack replied to James Quack's discussion Not able to Import Forums into Buddypress from Ning .JSON FIles
"Thanks Yin. I will contact them.

And thats to you too Paul! That is a greattttt TIp"
yesterday
Paul Asher replied to James Quack's discussion Not able to Import Forums into Buddypress from Ning .JSON FIles
"Remember that by default Ning only archive a maximum of 200 comments per item. I think you have to…"
yesterday
SweetPotato replied to Katcha Sanderson's discussion Multiple forums in single network?
"I'd use groups in Ning 2.0. Three separate groups each with their own forum. Sadly, there is no way…"
yesterday
dave replied to George H. Compton IV's discussion (tip for 3.0) floating navigation menu & ningbar -- two code formats to choose from HTML or CSS
""
yesterday
Kos replied to Katcha Sanderson's discussion Multiple forums in single network?
"2.0 does not allow it.  3.0 does (allow for multiple forums).  Sadly Ning has suspended migrating f…"
yesterday
Writer Chick {Diane} replied to Crystal's discussion Welcome to Creators 3.0!
"If you can't access your network because of domain setting errors, use the link below. That will gi…"
Sunday
Writer Chick {Diane} replied to Satheesh Kumar's discussion Change in Domain Name
"If you can't access your network because of domain setting errors, use the link below. That will gi…"
Sunday
Kwan Yin replied to James Quack's discussion Not able to Import Forums into Buddypress from Ning .JSON FIles
"Hi James,
I'm doing the same thing, slowly moving from Ning to wordpress / buddypress.
I can thorou…"
Saturday
Garfield Archivist replied to Crystal's discussion Welcome to Creators 3.0!
"Ok, if you would like me to take a look send me a private message. However, even looking at all you…"
Saturday
More…