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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels