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

FORUM

I thought I would share this as just finished adding this to my site. What this is for is for you to be able to help distinguish between Photos and Videos in the activity feed and also video listpages. As the videos when added look very much the same as the photos when added it is difficult to tell them apart by the title link and that's only if you add the word video in the page, if you create a page not named videos and let's say you created a video page named ' Training Courses'  then when seen in the activity the user will not know whether it's a video or a photo.

So here is a way to add some icons to them, you can see it working on my site and it works for grouped videos, single ones and uploaded ones. If you scroll doen my acitvity you will see carious videos.

Demo Images At the Bottom of post.

You can see this working on my site here: http://bizzssite.ning.com/

Ok all this is done via CSS so no custom code required. The first thing we need to do is add some icons to use into your file manager in site & pages, you can use just about any type you want but here are the two I use, you can copy these ( make sure you save them as png ) and add them to your file manager, once there and uploaded copy the links for each of them and add them to notepad or something for later use.

Black Icon White Arrow as the default

Red Icon For When Hovered or Pressed

Next we just add the css and add the links into the parts which say add image link here. You should not need to change anything else. If you do want to adjust the size of the images you can do so by adjusting the background-size: percentage

/** VIDEOS PLAY IMAGE **/
/*ON VIDEOS IN ACTIVITY*/
.feedEvent-createVideoRollup .activityFeed-content a.activityFeed-image,.feedEvent-createVideoRollup .activityFeed-content a.media-img, .feedEvent-createVideoComment .activityFeed-content a.media-img, .feedEvent-createVideoLike .activityFeed-content a.activityFeed-image{ display:table-cell; height:100%;position:relative; }
.feedEvent-createVideoRollup .activityFeed-content a.activityFeed-image::before, .feedEvent-createVideoRollup .activityFeed-content a.media-img::before, .feedEvent-createVideoComment .activityFeed-content a.media-img::before, .feedEvent-createVideoLike .activityFeed-content a.activityFeed-image::before{content:' ';display:block;
background-image: url( ADD BLACK ARROW LINK HERE );background-repeat:no-repeat; background-position:center center; background-size:19%; width:100%;height:100%;position:absolute; }

.feedEvent-createVideoRollup .activityFeed-content a.activityFeed-image:hover::before, .feedEvent-createVideoRollup .activityFeed-content a.media-img:hover::before, .feedEvent-createVideoComment .activityFeed-content a.media-img:hover::before, .feedEvent-createVideoLike .activityFeed-content a.activityFeed-image:hover::before{background-image: url( ADD RED ARROW LINK HERE );background-size:17%; }

/* ON VIDEO IN LIST PAGE */
.videoListPage-image::before{content:' ';display:block;
background-image: url( ADD BLACK ARROW IMAGE LINK HERE );background-repeat:no-repeat; background-position:center center; background-size:22%; width:100%;height:100%;position:absolute;}
.videoListPage-image:hover::before{background-image: url( ADD RED ARROW LINK HERE );}

DEMO IMAGES

Enjoy

John :-)

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

Join Ning Creators Social Network

Email me when people reply –

Replies

  • NC for Hire

    Nice touch Bizz!

    • Thanks JF :-)

  • And it goes well,

    what happened is that I put the code,

    when it had to be the url of youtube,

    I added your code

    and it comes out very clear with the

    YouTube url, not with the embed code,

    thanks Jhon

  • Thanks to your code Jhon,
    it comes out in the source activity,
    thanks Jhon
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Thisisbully replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Good luck"
3 hours ago
Steve C replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Thank you, Ning! I was about to cry to Support again about how much I need to move to 3.0, and beg…"
8 hours ago
Marco Westerhof replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Sure: www.reefz.nl
Although it is primarily in Dutch, feel free to look at the setup. We work with…"
8 hours ago
Gerard Nealy replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Any chance of live stream?"
8 hours ago
Elshara Silverheart replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Well done Ning! the storage implementation sounds like a really cool idea. Perhaps a list of the mo…"
8 hours ago
Elshara Silverheart replied to Gavin Brown's discussion
Text Editor Problems
"Do you have a ning 2 or 3 network?"
8 hours ago
Elshara Silverheart replied to Gavin Brown's discussion
Text Editor Problems
"I think the change itself may be caused by how Tinymce handles the plugins required to add said fun…"
8 hours ago
Elshara Silverheart replied to Gavin Brown's discussion
Text Editor Problems
"this seems like normal behavior. So making sure tinymce gets called as soon as possible may make th…"
8 hours ago
Ning via Facebook

Improve your community every day! It's easier to say than to do, right? But not for…

Paul B Thomas replied to Gavin Brown's discussion
Text Editor Problems
"Hi I have similar issues at the moment. Cannot upload pictures, an error mesages comes up when I tr…"
10 hours ago
Gavin Brown replied to Gavin Brown's discussion
Text Editor Problems
"Thank you Kyryl
 "
11 hours ago
Traddie replied to Victoria_NING's discussion
What was done in Q1 and our plans for Q2
"Marco. Can you tell me what your network url is so that I can have a look at it. Tks"
11 hours ago
More…

Meanwhile, you can check our social media channels