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 toox$('.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.
Replies
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?
Yes, you can do this?
Yes , i just added the script above in the tip (further hacking).
yeah ,its in the post above.
Thanks Eric , glad you liked it.
Thank estimated.
Failed to make it work: (.
Can you let me see the code you used?
-
1
-
2
of 2 Next