Updated 5/3/12: Refined member profile options (custom sorting and placement, hiding, etc)

What does it do?
You can hide, sort, or move modules between the left and right columns of all member profile pages. This script disables the user's ability to move modules around on their own, because you will have complete control on where they show up! This script is the answer to the features requested by several people.

   *  This script has three lists. The first is a list of modules to hide, the second is a list of modules for the left column, and the third is a list of modules for the right column.
   *  You can move any module to the left column or the right column. It might look weird to put something like Photos into the left column, but it does work! Just move the module you want (the whole line) to the appropriate list.
   *  The options for each column will be listed IN ORDER. If you put Photos at the top of the list of modules for the right column, it will show at the top of the page in that column.
   *  You cannot have multiple modules in multiple lists. You should only have each module in only one list. You cannot place Photos in the "hide" list as well as the "right" list.
   *  The value in green is the text which will show up by default for the headline of the "Text Box." If you don't want to use this feature, remove this whole line and it will be ignored. Just note that it won't work with multilingual sites.
   *  This goes in your Custom Code box. Not in Developer Mode or CSS areas.
   *  It is wise to place this script at the bottom of all your custom code (outside of all other script tags, as well), just in case you have other things modifying the modules on this page.

// REFINED MEMBER PROFILE OPTIONS v1.5 by erikwoods.com
// USAGE GUIDE: http://bit.ly/refinedprofileoptions

var forceHeadlineForTextBox = 'About Me';

var modulesToHide = new Array(
    '.module_feed', // RSS
    '.xg_module_comment_wall', // Comment Wall

var modulesLeftCol = new Array(
    '.module_members', // Friends
    '.module_groups', // Groups
    '.module_forum', // Discussions
    '.module_gift', // Gifts

var modulesRightCol = new Array(
    '.xg_module_activity', // Latest Activity
    '.module_about_user', // Profile Information/Questions
    '.module_text', // Text Box
    '.module_blog', // Blog
    '.module_photo', // Photos
    '.module_video', // Videos

var moduleSelector = $('#xg_layout_column_1 div, #xg_layout_column_2 div');if (typeof forceHeadlineForTextBox !== 'undefined') {if ($('#xg_layout_column_2 .module_text h2').length) {$('#xg_layout_column_2 .module_text h2').html(forceHeadlineForTextBox);}else {$('#xg_layout_column_2 .module_text').prepend('<div class="xg_module_head"><h2>'+forceHeadlineForTextBox+'</h2></div>');$('#xg_layout_column_2 .module_text .xg_module_body').removeClass('nopad');} }$.each(modulesToHide,function(i){$(moduleSelector).filter(modulesToHide[i]).remove();});$.each(modulesLeftCol,function(i){$(moduleSelector).filter(modulesLeftCol[i]).appendTo('#xg_layout_column_1');});$.each(modulesRightCol,function(i){$(moduleSelector).filter(modulesRightCol[i]).appendTo('#xg_layout_column_2');});if($('.draggable, .movable, .sortable').length){$('*').removeClass('draggable, movable, sortable');$('.xg_handle').remove();}

Enjoy, and please let me know if you have any issues or additional features you'd like to see added.

Views: 1914

Reply to This

Replies to This Discussion

Dr. Trocar,

The Developer Mode and the Custom Code box are two different things. To get to the Custom Code box you must go into your Dashboard, scroll down to the Tools section. The Custom Code link is in that section, I think the 5th link down. 

Developer Mode is a powerful tool, but I do not use it because it takes away your members ability to customize their profile pages. 

I would agree with this. Members should have complete control of their pages. Seems like a good way to drive people off. j/s

Thank you VERY much for this.  I have not tried it yet, but I've been hoping for a long time for this solution. 

Most of all, I'd like to change the position of the "Text box" to go to the top of the page (instead of having the activity there.)  Is there a possible solution for that as well?

The code has been updated to include sorting options (at your request), in addition to options for moving any module to either the left or right column.

Let me know how this works for you.

I don't see anything missing, but I will check and let you know if I find anything. 

Below is some custom code that forces the profile questions module to the top of all member profile pages. It may or may not be useful to you if you try to take this further and force several modules at the top in a particular order. 

<script type="text/javascript">
if (x$(".xg_widget_profiles_profile_show").length > 0){
x$('.module_about_user').appendTo(x$('#xg_layout_column_2 .xg_headline'));

If the network option is set to allow members to move profile modules, then they could override this "profile questions module at the top" code. 

I cut and pasted code and left everything set how you have it but seen no changes to order, forced headers etc...

I have isolated this code as the problem NOT YOURS but is conflicting somehow..

<script type="text/javascript">x$(".xg_widget_photo_photo_newWithUploader .bulkupload a,.xg_widget_video_video_newWithUploader .bulkupload a, .xg_widget_photo_photo_new .xg_1col .simpleupload a, .xg_widget_video_video_new .xg_1col .simpleupload a").text('Click to View');var addByPhoneText = x$("a#xg_profiles_settings_email_show").text();

if (typeof addByPhoneText != 'undefined') {

addByPhoneText = addByPhoneText.replace(location.hostname.replace("www.", ""), ning.CurrentApp.id+'.ning.com');


x$("a#xg_profiles_settings_email_show").attr('href', 'mailto:'+addByPhoneText);


see anything in there that would block your script.?



EDIT: I see that you don't have the other code in there right now because of the conflicts, eh? Well... the reason why it might not work is because it uses classes to specify which column to go in to and stuff..... you might want to put my script at the bottom of all other scripts. That way, any other scripts that modify any modules will be changed before they are moved or removed. Does this help?

Does this Help? you knew the answer before you posted.......

YES SIR.. lol


Fantastic. Hope it works well for you. PM me if you see any issues or have any suggestions.

I had to jump in and say, impressive stuff! =)

Thank you very much, Jen.


What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Anam replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"No. I don't think I made a ''pretty big misrepresentation'' of what i was…"
2 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Great!!! Plenty of ideas to play with, thanks again.....now all I have to do is find one…"
4 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"Your welcome. This would look good with your cover. I added a padding so that the text does not…"
4 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Background color makes a huuuuuge differenc.....might make it a lighter color though."
5 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Once again many thanks....made it bold white 22px times new roman....looks fine now :)"
5 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
"I just noticed you are using the Courier New Font. If you want a background color you can try…"
5 hours ago
Randy L. Vollett replied to ceri shaw's discussion 'Group Cover CSS?'
".groupHeader-groupName {font-family: 'book antique';font-size: 20px;color: black;}Look at…"
5 hours ago
ceri shaw replied to ceri shaw's discussion 'Group Cover CSS?'
"Basically I want to enlarge the text on the group cover photos as in the example below in order to…"
5 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service