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

NC for Hire

Hi,

I answered a question on creators which inspired me to post this small tip on how to Customize textbox on user profiles (Overwrite user own css code too)

 

Requirements:

1.Basic knowledge of Javascript or jQuery(Javascript Library)

2.Intermediate knowledge on CSS (Able to write own css)

 

Preview

From this:

To This:

How does this works?

I've made a script which look into profiles and look for specific title in the text box so that it could customize that specific textbox css.

 

The Script(Place this in Custom Code)

<script type="text/javascript">

if(x$('.xg_widget_profiles_profile_show').length){

var store= x$('.module_text .xg_module_head h2').html();
   if(store == 'Your Title Text here'){
   //to style the whole module_text box
   x$('.module_text').css({'border' : 'yellow 1px solid','background-color':'blue'});

  //to style module body of module text

   x$('.module_text .xg_module_body').css({'background-color':'green'});
   }
   else{
   //do nothing as the title of textbox is not Your Title text here
   }

}

else{

//not on user profile , do nothing

}

</script>

 

Explanation

As you can see in the script above ,

The script first check whether you are on a profile ,then gets the module textbox header title out and compares it with the one you provided.

If its the same (==) , then it starts styling the module text based on your settings.

Text in green color are the ones you can change to your preference.

 

What I'm using

1. Ning Network own jQuery (Javascript Library) which is x$

2. jQuery .html()

3. jQuery .css()

 

Further Hacking

Overwriting !important

Sometimes a user set an !Important for their css variables which jQuery will not be able to overwrite it. So here's the solution:

x$('.module_text').attr('style','background-color:#000!important');

We will just use jQuery .attr() which adds an attribute to that element. In this case , i'm adding a style attribute to it.

Detecting members gender(if you enabled your network to display gender in profiles)

So in the script below , the script first checks whether its on a user profile , then check if it is on which gender profile , then if its male , it will color the textbox and inject an ad for male, if its female it will inject an ad for female.

<script type="text/javascript">

if(x$('.xg_widget_profiles_profile_show').length){

//get the gender from member detail in profiles

var getgen = x$('.profile .member_detail li:first-child');

    if(getgen == 'male'){

      //its male

     //change their textbox color

      x$('.module_text').css({'border' : 'yellow 1px solid','background-color':'blue'});     

      x$('.module_text .xg_module_body').css({'background-color':'green'});

     //or inject an ad into their textbox

     x$('.module_text .xg_module_body').append('my ad code here for male');
      }
      else{
      //if its not male , its female then..do something for female like add an ad too

       x$('.module_text .xg_module_body').append('my ad code here for female');
      }

}

else{

//not on user profile , do nothing

}

</script>

I'm using .append() above, You can use .after() .before() .prepend() , anything you like to inject the ads , just make sure you get the right element id/class.

Wait, How do I get the right element id/class 

I have written a tutorial on jQuery & Firebug , click here to view

 

 

jQuery is really fun. :)

Hope you like it.

 

 

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

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • NC for Hire
    Nice tip and explanation. Not sure about the massive banner ad at the bottom of it though ;-)
    SP
    • NC for Hire
      Thanks SP.
      Yeah I added an ad to let anyone looking for that kind of system a direction to look.
  • +1000

    can be adapted to display ads according to gender?

    • NC for Hire
      Do you mean inject ads into the textbox on member profiles by detecting their gender?
      • Yes, you can do this?

        • NC for Hire

          Yes , i just added the script above in the tip (further hacking).

  • This reply was deleted.
  • Thank estimated.

    Failed to make it work: (.

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

Pam Givens replied to Pam Givens's discussion
Landing Page
"What I meant to say, if I could spell:
I've attempted to create a landing page and have't had much…"
Dec 12
Pam Givens posted a discussion
I've attempted to crate a landing page and have't had much success.  I'd rather have one on my…
Dec 12
Luxury Residences updated their profile
Dec 6
Asumi Carol updated their profile
Dec 2
Shada Hotel updated their profile
Nov 29
Howard Sands replied to Mark Thorpe's discussion
NING is broken?
"I am not a techie, I don't understand the first thing about it, but have a HUGE problem with Ning…"
Nov 27
Howard Sands replied to Donna MacShoe's discussion
Ning Support phone number for my 20 yr old site
"I hope this helps
Ning  https://www.ning.com/contact-us/
1-855-233-6436 (USA/Canada Toll Free)…"
Nov 27
Donna MacShoe posted a discussion
I am completely locked out of my NING site that I have had for 20 years.  ladiesofthehat.org.  When…
Nov 27
Joven left a comment on Ning Networks en español
"Zzz..."
Nov 26
Ron updated their profile
Nov 25
Ron updated their profile photo
Nov 24
Mark Thorpe posted a discussion
I've run networks based on this platform in the past and never have I seen it in such dissarray as…
Nov 20
More…

Meanwhile, you can check our social media channels