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.

Search the Creators Network

Latest Activity

Ning via Facebook

#createwithNING Each online community is unique and special. What`s YOUR secret of network…

Kyryl_Ning_Support replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Hi Stanislav,
I do apologise for the misunderstanding. It seems that my colleague has decided that…"
14 hours ago
Kyryl_Ning_Support replied to Kevin Acosta's discussion Photo uploads being auto resized
"Hi there!
The same question has been mentioned in this discussion http://creators.ning.com/forum/to…"
14 hours ago
Sherry Ritchie and James joined Ning Creators Social Network
14 hours ago
Stanislav replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Kyryl, here is my ticket log with Anastasia, from which I understood I need to create new page and…"
15 hours ago
Aubrey Williams replied to Aubrey Williams's discussion Paid Access 2017
"Thanks for the response Kyryl, but based on Ning's history of not launching things on time, I can't…"
16 hours ago
Aubrey Williams replied to Aubrey Williams's discussion Paid Access 2017
"Naveen, please tell me more. Were you able to integrate Stripe with your Ning site in a way that re…"
16 hours ago
Kevin Acosta replied to Kevin Acosta's discussion Photo uploads being auto resized
"Well, even the FULL SIZE 38.5" x 36" poster that I attache was scaled down, so now that doesn't eve…"
yesterday
Kyryl_Ning_Support replied to Aubrey Williams's discussion Paid Access 2017
"Hi there,
We plan to initially release the PaidAccess for Ning 3.0 with PayPal and credit card supp…"
yesterday
Kyryl_Ning_Support replied to Naveen Jain's discussion Wiki like functionality in Ning
"Hi there!
Unfortunately, we don't have the module on our platform that would be working in the way…"
yesterday
Kyryl_Ning_Support replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Hi there!
Thanks for the question.
No, you don't have to create the new network each time the new f…"
yesterday
Matt replied to Aubrey Williams's discussion Paid Access 2017
"Good point, Stripe is awesome. "
yesterday
ASDKFljflkj is now a member of Ning Creators Social Network
yesterday
Alliance replied to Alliance's discussion Profile members on MY Page
"Thanks so much for this help things look sooooo much better now."
yesterday
Bizz ( John ) replied to Alliance's discussion Profile members on MY Page
"You could also try this which I have on my site just now for testing. This will adjust the avatar s…"
Sunday
Bizz ( John ) replied to Alliance's discussion Profile members on MY Page
"As matrix items are shared with other parts of the network if you add that then this would affect t…"
Sunday
Stanislav replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"Hi, I'm waiting you to implement all new features to the Network in Q2 and want to start my network…"
Sunday
Alliance replied to Alliance's discussion Profile members on MY Page
"Thank you 
Right now I have a big space between each item. Following that same logic, the container…"
Sunday
Bizz ( John ) replied to Alliance's discussion Profile members on MY Page
"You can adjust the avatar sizes with this, just change the width to the size required.
.section-mem…"
Saturday
Alliance replied to Alliance's discussion Profile members on MY Page
"I cant believe no one has this issue but me and have not solved this."
Saturday
More…