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

Anastasia_Ning_Support replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Hi there!
Thank you for your patience!
You have already contacted us via LiveChat, but I will leave…"
21 minutes ago
Ceddy J replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Do we have to make new Facebook apps, or can we edit the ones we have?"
Saturday
Philip Voice replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Sorry for the confusion.
Does this change affect any group pages that we have running or is it just…"
Friday
Matthew Aukai Wright replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Yay!!!! Oh one more thing. Can I add random line of members with their sexuality and their location…"
Friday
Fabricio Giugni replied to Fabricio Giugni's discussion
Add Photos location problem.
"Hi Anastasia,
    Thanks for try... What Can I do to make it more easy. Maybe a code button code th…"
Friday
Anastasia_Ning_Support replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Hi there!
I apologize, but I`m not sure what you mean by "existing pages on Facebook". Are you refe…"
Friday
Anastasia_Ning_Support replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Hi there!
I`ve passed your screenshot to Alex, the code will be corrected in the nearest future. Yo…"
Friday
Philip Voice replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Before I do this...what about exisiting pages on FB we have? Does this process start the page again…"
Friday
Matthew Aukai Wright replied to Fire-Tech's discussion
3.0 Tip: Insert Image Into Signin Page
"Hi there. we can do the second one. I took a screen shot where I will like the picture to be. "
Friday
AMZ replied to Ashish's discussion
Ning 3 - Not hapenning!
"The internet is different from early 2010s. Features aren't going anything. What you need is a stra…"
Thursday
Ashish replied to Ashish's discussion
Ning 3 - Not hapenning!
"Yes, thats not good.... But imagine i am sitting on duck! Not even 10members per week, can you plea…"
Thursday
Gavin Brown replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Thank you Anastasia!"
Thursday
More…

Meanwhile, you can check our social media channels