JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Move Members To Header! UPDATE: Display in Header on All Pages!

Are you sitting down? Because this is likely the coolest Ning Tip I've shared yet! Do you see the member icons/links in upper right of the JenSocial header? Would you like to do the same on your Ning Network?! Well, I'm about to tell you how. ;-)

Before you read further: this will take a little tweaking on your part. You either need to know how to use Firebug, or have an available test site. Otherwise, this could be almost impossible to get the layout just the way you want it.

This tip provides the special CSS that will enable you to move the Member Module box to the header of your network. However, the module will function as it always has, and the members will only be displayed on your home page. SEE UPDATE BELOW - - HOW TO DISPLAY ON ALL PAGES.

The tweak is not for someone who has little or no experience with CSS. Sorry, but I will not be able to help individuals work with this code. I'm giving you the tip, and you are on your own from there, unless you want to hire me to do it for you. ;-) Follow all instructions below, and add the CSS to your Advanced CSS box.

You're going to need to use a site banner that has a good deal of white space in the right hand portion of the banner.
You may want to move your member module to a narrow column (in left portion of Features Layout - - via My Network/Settings), and select 5 rows of members. I think this will help the tweaking a little, if you've selected the same that I have on JenSocial.
- Because of the increased width we will place on this module, you're not likely to be able to display the maximum number of members, as in the module before tweaking it.
- Just make it look good, and function well. That's what matters. ;-)
WARNING, for future member display options - - if you remove the module header as I have below (here's that code: .xg_widget_main div.module_members .xg_module_head {display:none;} ), you will not be able to edit the # of rows or type of members you display, unless you edit via Firebug, or remove the code from CSS.
- So, if you want to remove the module header, I suggest you make a decision on the member module display options that will make you happy for a while to come - - by selecting the type of members and # of rows to display. And be sure to do this before you edit and add the CSS.
- If you don't remove the member module header, this isn't an issue.
For the top placement of the module, adjust the number of pixels from the top of your site. I have used top:19px;
For the horizontal (x axis) placement of the module, adjust the margin-left value to suit your layout. This number totally depends on which column you have placed your member module. There will be cases where you'll need a margin-left value that is a negative, to pull the module to the left.
Adjust the Module Size - - height and width. These numbers will depend on:
- Which column you placed your member module in, wide or narrow.
- How many members you have selected to be displayed (as mentioned above, I have selected 5 rows in a narrow column.)
- These numbers will likely be your biggest challenge. If you can edit via Firebug, this will be easy for you.
Absolutely imperative! Test this on several browsers, and most definitely on 2 screen resolutions. Be sure to check 1024 by 768.

Example Code as Tested on the Ning Creator's Network (via my FireBug):

/* Adjust module placement and module size */
.xg_widget_main div.module_members {top:19px!important; margin-left:545px; height:100px!important; width:423px; position:absolute;}

/* Remove Module Header and/or Footer - - optional, but I do suggest removing the footer */.xg_widget_main div.module_members .xg_module_head {display:none;}
.xg_widget_main div.module_members .xg_module_foot {display:none;}


/* Adjust the profile image size. This will allow you to display more members */

.xg_widget_main div.module_members img.photo {width:94%; height:94%;}


/* Next 2 lines remove a lot of unnecessary padding, and you may or may not need them */

.xg_widget_main .xg_3col .xg_1col .module_members .body_small .clist li {margin:0px!important; padding:0px!important; padding-left:0px!important;}
.xg_widget_main .xg_3col .xg_1col .module_members span.xg_avatar {margin:0px!important; padding:1px 0px 3px 1px !important;}

Code Installed on JenSocial:

/** Move Members up to Header **/
.xg_widget_main div.module_members {margin-left:-65px; top:19px!important; height:100px!important; width:493px; position:absolute;}
.xg_widget_main div.module_members .xg_module_head {display:none;}
.xg_widget_main div.module_members .xg_module_foot {display:none;}
.xg_widget_main div.module_members img.photo {width:94%; height:94%;}

.xg_widget_main .xg_3col .xg_1col .module_members .body_small .clist li {margin:0px!important; padding:0px!important; padding-left:0px!important;}

.xg_widget_main .xg_3col .xg_1col .module_members span.xg_avatar {margin:0px!important; padding:1px 0px 3px 1px !important;}

/** End Move Members to Header **/

Have fun!
Jen
P.S. If you need to hire me to do this, it will cost approximately $55-$90, depending on your custom code and current header. And there will be cases where it's just not feasible.

UPDATE: Display Members in Header on ALL PAGES Except Member Profile Pages (It came to my attention, if we move to header on Profile Pages, it messes up the module.)
First let me say, I have NOT tested this thoroughly. But, I just had a major blonde moment. This just
hit me! You should be able to display the members in the header on all pages by following these steps. You will need to tweak this code, especially the left margin amount.

1. If you use this updated code for all pages, remove your original code.
2. Go to My Network/Settings/Features Layout
3. Move your Member Module to far Right Column in top grid, where it shows on all pages. You MUST perform this step for this to work.
4. Tweak the code below, and add to your Custom Code Box. We have to add this code to our Custom Box, because we don't want the members in header on Profile Pages. It came to my attention, this will mess up the profile pages if we do. There may be easier code. This is what I've come up with for now. Don't forget to remove original CSS, if you used it. And, add this code to your Custom Code Box. I have also attached in text file.

<script type="text/javascript">
/* Move Member Module to Header, all pages except Profile Pages */
if (x$(".xg_widget_profiles_profile_show").length == 0) {
if (typeof(x$) != 'undefined') {
x$('div.module_members').css('margin-left','-305px');
x$('div.module_members').css('top','19px');
x$('div.module_members').css('height','100px');
x$('div.module_members').css('width','493px');
x$('div.module_members').css('position','absolute');
x$('div.module_members').css('z-index','9999');
x$('div.module_members .xg_module_head').css('display','none');
x$('div.module_members .xg_module_foot').css('display','none');
x$('div.module_members img.photo').css('width','94%');
x$('div.module_members img.photo').css('height','94%');
x$('.xg_3col .xg_1col .module_members .body_small .clist li').css('margin','0px');
x$('.xg_3col .xg_1col .module_members .body_small .clist li').css('padding','0px');
x$('.xg_3col .xg_1col .module_members span.xg_avatar').css('margin','0px');
x$('.xg_3col .xg_1col .module_members span.xg_avatar').css('padding','1px 0px 3px 1px');
} }
</script>

0 members favorited this

Attachments:

MoveMembers_Header_ExceptProfilePages.txt, 1 KB

Replies to This Discussion

Permalink Reply by Haiti FM on October 2, 2010 at 1:18pm

yeah thanks again for the code its great.

Permalink Reply by JenSocial on October 2, 2010 at 1:20pm

Cool. I think you're one of the first to move forward with the "all pages" and it be completely successful. That's great!
Good job,
Jen

Permalink Reply by Haiti FM on October 2, 2010 at 2:42pm

Just a note on my results I had everything nice with 12 showing so I checked all the pages

and found that this page http://haiti.fm/profiles/members/

gets different results

all other pages needed this number on this line
x$('div.module_members').css('width','658px');

with that number they all stayed on one row but that member page above needed the width to be adjusted to this
x$('div.module_members').css('width','682px');
or it would kick the last photo to a second line (2 rows)

note the difference http://haiti.fm/photo and http://haiti.fm/profiles/members/

I cannot get them to look the same I just needed them both to be on one line so I adjusted the code to make the members page work while adding a black space to the other pages. I'm not sure why they are different.

Just posting this as a note for others

thanks again

Permalink Reply by Truth Or Dare Café on October 13, 2010 at 5:23am

Hi Jen, I tried to move my members to headers and copy pasted the CSS from here. It was ok when I viewed my website through Yahoo and Firefox but when I tried to view it through Google Chrome this is how it looked:

Permalink Reply by JenSocial on October 13, 2010 at 11:21am

Sorry about that. This is an advanced hack, and unique to each site. I really can't help without spending a good deal of time trying to figure out your unique case.
Best to you,
Jen

Permalink Reply by Haiti FM on October 13, 2010 at 11:40am

no issues for me in chrome this is something you really have to play with the numbers on the code % height width all that needs to be changed until you get the results you are looking for.

I love this hack its my favorite

Permalink Reply by RowanCampbell on October 19, 2010 at 11:49pm

Well, I really love the way this looks.

I guess our new test sites are next to useless for this kind of testing though, because of the test site header being so big. Oh well.

I tried to get this to work and I know Jen warned us this was a tricky hack. I have no Css experience. I managed to get the 'only on main page ' version but no joy with the update.

I will continue my experimentaion and even might actually look at a css tutorial .....Shock....horror......

Permalink Reply by JenSocial on October 20, 2010 at 12:55am

These settings look pretty good for your home page - - and your current member module location and number of members. But, it covers part of your site title.

/** Move Members up to Header **/
.xg_widget_main div.module_members {margin-left:-151px; top:50px!important; height:100px!important; width:334px; position:absolute;}
.xg_widget_main div.module_members .xg_module_head {display:none;}
.xg_widget_main div.module_members .xg_module_foot {display:none;}
.xg_widget_main div.module_members img.photo {width:94%; height:94%;}
.xg_widget_main .xg_3col .xg_1col .module_members .body_small .clist li {margin:0px!important; padding:0px!important; padding-left:0px!important;}
.xg_widget_main .xg_3col .xg_1col .module_members span.xg_avatar {margin:0px!important; padding:1px 0px 3px 1px !important;}
/** End Move Members to Header **/

Good luck,

Jen

Permalink Reply by RowanCampbell on October 20, 2010 at 4:30pm

Thanks Jen, I was trying this on our Test site where our new name is much shorter.

I don't know I think the problem is I don't really know what of the code to take and where to put it. I did manage to get it working on the main page though.

I will have another crack and see how I get on.

Thanks again.

Permalink Reply by RowanCampbell on October 27, 2010 at 4:45pm

Got it! There is nothing like reading the instructions again and actually following them, eh!

Cheers Jen, this will look very cool when I revamp my site.

Cheers ROwan

Permalink Reply by JenSocial on October 29, 2010 at 10:04pm

Great! Happy to hear it.

Permalink Reply by RowanCampbell on November 4, 2010 at 10:52pm

Hi Jen revamped and I even tweaked it a bit! Is a bit blurry in chrome and safari but primo in IE and firefox. I will have a tutu with it later but it is looking good enough for this first time css style tweaking dude.

Thanks again!