Change Group Layout - Remove Sign-in Box, Change Column & Module Orientation

[Chloe Prince]

Have you wanted to change the orientation of the standard NING group lay out?  Take a look at my group layout - if you like it, add this code to change yours.  You may want to try it in your test network first, and make subtle changes for your own taste.



 Step 1 - Add this code to your Analytics code section:

<script>
if (window.location.href.split('group')[1] > '/') {
x$('.xg_column .xg_span-5 .xg_last').css('display','none');
x$('.xg_span-16').css('width','982px');
x$('.xg_headline').css('display','');
x$('.xg_span-12').css('width','702px');
x$('.xg_span-4').css('width','260px');
x$('.xg_widget_groups_group_show .xg_module_with_dialog').css('display','none');}
</script>

Step  2 - Add this CSS code to your Advanced Section in the Design Studio, or the Advanced Section under Appearance, in the NING old editor:

/* CHANGE GROUP LAYOUT */

.xg_widget_groups_group_show .xj_classic_sidebar {display: none;}
.xg_widget_groups_group_show .xg_span-12 {float: right;}
.xg_widget_groups_group_show .xg_span-12 {margin-top: 20px;}
.xg_widget_groups_group_show .xg_span-4 {margin-top: 20px;}

/* REMOVE SIGN-IN BOX FROM GROUP LIST SCREEN */
.xg_widget_groups_group_show #xg_module_account {display:none!important;}

/* REMOVE SIGN-IN BOX FROM ON GROUP MAIN PAGE */
.xg_widget_groups #xg_module_account {display:none!important;}

Just incase you are wondering, in the photo above, I am using the "A1" Layout for my site.  Results may vary and you may have to adjust the codes if you have a different layout or already have other custom code.

Also keep in mind, that I have globally removed other modules, such as Leader Boards, etc.  If you have custom Text Boxes with content, and want those removed, you will have to add additional CSS to remove those items.  This is why mine looks so clean.  The additional CSS for removing other items can be found looking here in the NING forum.


Hope this simplifies the process for you.!

[Amanda Bears]

+1 So going to try this on my network tonight! (I have A1 as well) Thank you! 

[Michael Thompson]

Great tip Chloe! I have wanted to get rid of the Latest Activity time stamp in groups for a while. The tip is working great on my sites except one thing. It is pushing the third column down below, as in this group for example. The clock and the ads were all in the third column (right side) previously. 

Can these items be moved up right under the group members module and group pages?

Or can this third column be hidden?

[Abel I. Arenivar]

muy bueno, Gracias por compartir

[George H. Compton IV]

Sí Able que hizo un trabajo muy bueno

You did a awesome job Chloe

[Mogens Vindbjerg]

Great tips!

If I just want to hide the right column (shown on all pages including groups) - do you have the code for that?

 

Thanks!

 

[Stephanie Lennox]

Thanks for sharing this, Chloe! I'm having the same problem as Michael, though. I really hope there's a way to hide the third column instead of pushing it to the bottom. 

[Thiago Santos de Moraes]

The additional CSS for removing other items can be found looking here in the NING forum.

I did not found. Can you sugest a topic?

[guillermo vallejo]

thak you very much your tip works very good for me.