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

Forum

Give your members the ability to add videos and CSS styles to their profile!!!

Update May 15, 2016,
The CSS portion has been completely rewritten. So now the CSS will work for anyone, whether they use the word body in the CSS or not. I also removed the glitch where it leaves the profile question with all the CSS in it. And I changed the words for the add CSS profile question, too many people were using the word style for other questions.

I've also added an option to turn the video MOD portion on or off for cell phones. It's a Major performance enhancement for cell phones. Right now I have it set to turn off at 1024px or less. The ad CSS for Profiles will still run on cell phones..

I've also written the code so the video MOD codes will not run unless your members add videos to the box in there profile settings.

One other thing you can completely turn off the video MOD & gframe and just use the add CSS to your profile feature.

Note ( if you're using my gframe code for fluent videos on your network remove it and just change the ID in the JavaScript below to id="gframe" )

I've updated, enhanced & integrated AnGella and SweetPotatos codes into my codes.  Click here   or  here  to see it live. If you're at work turn your volume down I do have a video set to autoplay.
Be sure to go to AnGella and SweetPotatos tip and thank them for the work they have done.  Both their tips have been updated here on creators so if you'd rather use there tip it's all good :)

First you'll need to set up the (profile questions) then add the (about module)  to a (tab Container) on your profiles.

Setting up the two questions

These two profile questions should be the first two questions out of all questions you're using for your network. You can easily drag them up to the top of the list to make them questions one and two. Don't worry these two questions will not display while signing up to the network, they'll only display in the members profile options.

AnGellas Add CSS to Member Profiles
Ning 3.0 Tip: Add CSS to Member Profiles Do not use the code from AnGella tip If you're going to use my codes..

Setup Question 1) To add this feature to your Ning 3.0 site you will need to add a profile question that contains the words "add CSS".It is case-sensitive.  You will want to set the answer to use the Long Answer option. Make sure you do not set the question to "required" or "private" because this question doesn't display during sign-up.

Example:  Style Profile, add CSS codes

SweetPotato's "Profile Embed" 
Ning 3.0 Tip: Insert Videos and Music Players on Profile Pages Do not use the code from SweetPotatos tip If you're going to use my codes.

Setup Question 2)  Add a Profile Question to your Ning 3.0 site. Make it a "Website Address" answer and you MUST include the word 'embed' in your question. Make sure you do not set the question to "required" or "private" because this question doesn't display during sign-up.

Example: Add videos, <iframe embed code

The "Profile Style, add CSS codes" question should be added before the "Add videos, <iframe embed code" question. These two profile questions should be the first two questions out of all questions you're using for your network. You can easily drag them up to the top of the list to make them questions one and two.

Note ( if you're using my gframe code for fluent videos on your network remove it and just change the ID in the JavaScript below to id="gframe" )

The Code

This code  go's in your  ( Custom Code - End of Page Code box )


<!-- Start GEOCOM's "Embed Mod" RT v13.0 -->
 <!-- Custom Code - End of Page Code box -->
<!--  JavaScript #id & class calls *
 * id="no_gf" = MOD  " Fluid videos only in the mod DIV "
 * id="gframe" = MOD + gframe v11.5, Fluid videos throughout your whole network *   
 * ************************************  
 * class="cell_on" or class="cell_off"
 * will turn the video MOD on or off for cell phones and portable devices 1024px or smaller *
 * ************************************  
 * Change the id and class to "null" to only have the CSS feature enabled *   
 *  -->
<script src="http://bit.ly/1sp5fvs" type="text/javascript" id="no_gf" class="cell_off"></script>

After the questions & codes are added you and your members will be able to style and add videos to your profile.

Go to your profile, press the option button and select edit profile to style your profile and add videos.

Click here   or  here  to see it live.

NEW MOD

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

    Hey george... was your Version 10 deleted for some reason?

    • Hello JFarrow

      I am sorry, I deleted that discussion. Nobody seemed interested..

      Here's a copy of version 10, my favorite one. I do have three more with different animation.
      In this version, the button is no longer in the tab container. It will be in the Ning bar.
      click here to see it live on my profile

      Use the directions from this discussion for the profile questions
      Part one goes in your Custom Code - End of Page Code box

      <!-- Start GEOCOMs N3 profile Embed MOD v10 part 1 -->
      <!-- Custom Code - End of Page Code box -->
      <link id="pagestyle" rel="stylesheet" type="text/css" href="http://bit.ly/1Bs1unr" ></link>
      <script src="http://bit.ly/1AbYRr0"></script>
      <!-- End MOD part 1 -->



      Part two goes in your Site & Pages (My page) ( Above Footer HTML box )

      <!-- Start GEOCOMs N3 profile Embed MOD v10 ningbar button part 2 -->
      <!-- Site & Pages (My page) ( Above Footer HTML box ) -->
      <button onclick="swapStyleSheet('http://bit.ly/1u51yen')" id="mymv">G</button>
      <div class="geospembed_c"><button onclick="swapStyleSheet('http://bit.ly/1Bs1unr')">Close</button></div>
      <!-- End MOD part 2 -->


      And here's the optional UFO animation I have on my profile. You can change the image to whatever you prefer. Optimal size for the image 100px X 25px


      /* profile embed mod  "UFO" an */
      /* design studio CSS section */
      DIV.SP_Profile_Embed{
       background-image: url("http://bit.ly/1yTvKo7");
       background-size: 100px 25px!important;
      background-position:center top!important;
       background-repeat:no-repeat;
      background-color: rgba(0, 0, 000, 0.0)!important;
      min-height:23px;
      min-width:100px;
      width:100px;}
      @media screen and (min-width:1010px)  {
      DIV.SP_Profile_Embed{
      transition: all 6s ease-out!important;
      -webkit-transition: all 6s ease-out!important;
      -moz-transition: all 6s ease-out!important;
      -ms-transition: all 6s ease-out!important;
      -o-transition: all 6s ease-out!important; }}
      /* Google Chrome & Safari CSS */
      @media screen and (-webkit-min-device-pixel-ratio:0) {
         DIV.SP_Profile_Embed{
       background-image: url("http://bit.ly/1yTvKo7")!important;}

  • Update May 5, 2016,  I think you'll  like this update, I've completely rewritten the code.

    Note ( if you're using my gframe code for fluent videos on your network remove it and just change the ID in the JavaScript below to id="gframe" )

  • Update May 15, 2016,

    The CSS portion has been completely rewritten. So now the CSS will work for anyone, whether they use the word body in the CSS or not. I also removed the glitch where it leaves the profile question with all the CSS in it.

    I've also gave added a option to turn the video MOD portion on or off for cell phones. It's a Major performance enhancement for cell phones. Right now I have it set to turn off at 1024px or less. The ad CSS for Profiles will still run on cell phones..

    I've also written the codes so the video MOD codes will not run unless your members add a videos to the box in there profile settings.

    One other thing you can completely turn off the video MOD & gframe and just use just the add CSS to your profile feature.

    Note ( if you're using my gframe code for fluent videos on your network remove it and just change the ID in the JavaScript below to id="gframe" )

    • NC for Hire

      using it now and love it..thanks G

    • NC for Hire

      Is V13 the latest version?

      • Hello JFarrow, It has been a year since I've updated this tip.

        Yes there has been one update since then. :-) v13.1  5xAnimation
        It's exactly the same as the one in this discussion except it has five animation choices

        just replace the word UFOan in the javascript class with any of these other four for the new animations.

        UFOan
        Origan
        Botan
        Topan
        Bot2an

        <script src="http://bit.ly/1XmxB54" type="text/javascript" id="no_gf" class="cell_off UFOan"></script>

        http://api.ning.com/files/rEr1ETJh5sTA3PzS7j99wi53lxeWgnfCwPm0jDFS-9JXLwVCuHk64iLnFAkyKQh7RknVj3Suu…
This reply was deleted.

Search the Creators Network

Latest Activity

J.Ayvar replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Amazing News !<br/>

Our Site tin.dating Will be Perfect to test this New feature."
11 hours ago
Kos replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Matt the code in 2.0 is old, out of date and degrading over time - which is why they built 3.0.  3.…"
13 hours ago
Mike Collins replied to Kyryl_Ning_Support's discussion Paid Access demo version
"I'd like to be involved in looking at paid access demo please "
18 hours ago
Harly replied to Ivy Williams's discussion Ning Roleplay Sites
19 hours ago
Kyryl_Ning_Support replied to Dr. Krishna Kumari Challa's discussion I am unable to find discussions on my network when I search. Any solutions?
"Hi there,
We are sorry for this. Previously we have been fixing the search on each network separate…"
21 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi there,
We are glad to know that you have been excited with this news. I have sent you the privat…"
22 hours ago
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi Matt,
Yes, this post is regarding 3.0 platform only.
Regards,
Ning team."
22 hours ago
Lj Cange replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Exciting news..... I will be happy to assist!"
yesterday
Matt replied to Kyryl_Ning_Support's discussion Paid Access demo version
"So Ning 2 paid access will not be updated?"
yesterday
Dr. Krishna Kumari Challa replied to Dr. Krishna Kumari Challa's discussion I am unable to find discussions on my network when I search. Any solutions?
"Still the problem is not resolved!"
yesterday
Matt replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Is this only for Ning 3?"
yesterday
Hugh replied to Anastasiia_NING support's discussion Ning 2Q 2017 plan!
"I'd like to get some reassurance that support will be upgraded. I can't think of a time recently wh…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi Philip,
We are glad to hear that you are willing to help with the beta test, and it will be the…"
yesterday
Kyryl_Ning_Support replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Hi there,
Thanks for your endless support! We have sent you the private message regarding joining t…"
yesterday
Kyryl_Ning_Support replied to Aubrey Williams's discussion Paid Access 2017
"Hi there!
We do appreciate your feedback, yes we know that based on our history the people wouldn't…"
yesterday
Ning via Facebook

#unitewithNING You`re one click away from the place where all questions about #NING find their…

Kos replied to Kyryl_Ning_Support's discussion Paid Access demo version
"Cannot express how happy I am to see Ning growing and expanding once again. It's been a long three…"
yesterday
Philip Voice replied to Aubrey Williams's discussion Paid Access 2017
"Thanks. I've applied to help evaluate and I'll make a decision about how I implement paid access in…"
yesterday
Philip Voice replied to Kyryl_Ning_Support's discussion Paid Access demo version
"I'm happy help"
yesterday
kevin carrasco is now a member of Ning Creators Social Network
yesterday
More…