The Apps.IO Customer Community
CSS Trick: Alternative Members Page Style
Last night Ning released a new release that included a new list design for the Members and Friends pages. An example of the new style can be seen below:
After receiving a few requests, we've cooked up a CSS code that turns the single list view shown above into a two column list that is a little more compact. Here's a preview:
If you'd like to have your network use this style instead of the default, the installation process is quite easy. Simply open your Network's Manage page, click "Appearance", then scroll down and click "Advanced", and then paste the following code at the very bottom of your network's preexisting custom CSS code.
CSS Code:
.xg_widget_profiles_friend .member_item, .xg_widget_profiles_members .member_item {
width:350px !important;
float:left !important;
margin-right: 5px !important;
clear:none !important;
}
.xg_widget_profiles_friend .member_item .xg_span-8, .xg_widget_profiles_members .member_item .xg_span-8 {
width:210px !important;
}
.xg_widget_profiles_friend .member_item .xg_span-6, .xg_widget_profiles_members .member_item .xg_span-6 {
width:130px !important;
}
Update: Themes with large font sizes will need to use the following code instead.
.xg_widget_profiles_friend .member_item, .xg_widget_profiles_members .member_item {
width:355px !important;
float:left !important;
margin-right: 1px !important;
clear:none !important;
}
.xg_widget_profiles_friend .member_item .xg_span-8, .xg_widget_profiles_members .member_item .xg_span-8 {
width:205px !important;
font-size:0.75em;
}
.xg_widget_profiles_friend .member_item .xg_span-8 img, .xg_widget_profiles_members .member_item .xg_span-8 img {
width: 75px;
height: 75px;
}
.xg_widget_profiles_friend .member_item .xg_span-6, .xg_widget_profiles_members .member_item .xg_span-6 {
width:140px !important;
font-size:0.8em;
}
Comments about this article:
Bob Schecter commented Jul. 10, 2009 ...- Tried it on 2 different sites..... didn't work.
Apps.IO commented Jul. 10, 2009 ...- Hello, Bob!
Did you paste the code after any custom CSS code your network might have? The code should be working in all major browsers. However, it might require some modification, if you've heavily customized your network's theme. If you'd like, we'd be more than happy to look into it if you drop us a line on our support page.
Thanks,
Apps.IO Support Team
- Bob Schecter commented Jul. 10, 2009 ...
- Thanks, I sent the support memo. Hopefully you can guide me since I hate the current look as it takes up way too much space.
- Bob Schecter commented Jul. 10, 2009 ...
- Interestingly, I have a third site that I've yet to do much modification on and on that one the code did work.
- Bob Schecter commented Jul. 10, 2009 ...
- Oooops. Just noticed that on the site that the code did work, the type is run-amok.
- Bob Schecter commented Jul. 10, 2009 ...
Paul commented Jul. 11, 2009 ...- Hey guys - First off, thanks for bringin us this tip!
There are some spacing issues if your network text is set to the Default Size. I believe this is what Bob is referring to above. As you can see in his image (and also in mine below), there are problems if the first or last name exceeds a certain number of characters:
You can also see that in Bob's images above (and mine below) that from an Admin perspective, it jumbles all the actions together:
It appears, however, that changing the Text font size from "Default" to "Small" improves/resolves this issue and makes everything fit nicely:
Hope this helps!
Charnita Fance commented Jul. 11, 2009 ...- Love this so much better! =)
- Bob Schecter commented Jul. 15, 2009 ...
- Thanks Paul. Now can you change the font on only that page. Otherwise I'm gonna have to give out reading glasses to all my Boomer members :).
- Bob Schecter commented Jul. 15, 2009 ...
- Actually, support gave me the code to make the type on that page smaller, and it didn't work. I just tried changing the default type to small, and that didn't work for me either. Support noted that when there is extensive CSS mods, their code might not work.
© 2010 Apps.IO
Powered by 
.
