20 Group Display limit for Group Hub

[Steve Ewing]

Does anyone have a work around for the 20 Group Display limit for Group Hub section that you can include on the main page?

We currently have 21 groups but only 20 display on the main page.

[Bizz]

There is a way of doing it by using an add content html box and a little code to load the groups so you are not limited to the 20 display. If you look at my home page I have added this and also added some test groups so I get the 21. I will give you do instructions below but we may need to add some more css as so we can get the sizes right so we can get it looking like the list you had before.

Here you can see my example of loading the 21 groups: https://jr-images.ning.com/

Well here is how to add the group list to start off with.

First go to your social site builder and add an Add Content HTML BOX To Your Home Page

Keep it as HTML content type

Next we need to add some html for the groups list to load into

Once you have added the name you want click on the HTML button in the toolbar and add this line of code

<div class="groupList">Groups Loading..</div>

And it should now look like the image above

At the bottom click the Save/Update button

Next move the box where you want it on your home page and save the main homepage page.

Next go to your Social Site Builder > Cstom Code > End Of Page Section and add this code to it and save

( I am presuming your groups is still called squadrons-and-commands, if not change that in the code to what your groups page is called )

<script>
x$(document).ready(function() {
x$('.page-home .groupList').load('/squadrons-and-commands .groupHub .matrix');
});
</script>

Now we just need a little css to remove some padding and markers that show as default and you add this to your design studio > custom css

/** GROUPS LIST ON HOME PAGE CUSTOM LIST **/
.groupList ul {
list-style-type: none!important;
padding-left:0px;
}

That's it all done, you should now see your groups load into that box, as I mentioned before it will show the default style of the groups list so we may need to tweak some css you already have to resize the groups etc as you had before.

 

[Steve Ewing]

Thanks Biz for the information.

I have just one issue...I have no idea how to "Next go to your Social Site Builder > Cstom Code > End Of Page Section and add this code to it and save"

 

[Bizz]

[Steve Ewing]

My social site manager page doesn't have even half of those options.

 

[Bizz]

This is normally what an admin see's, only the network creator can see all the other options. You can check how you are logged in by clicking on members in the green bar then in the list look for your name, in the categories/roll it should say Network Creator, if it says admin then you will need to contact Ning as I presume you are the network creator. Did you sign into your network with your Ning account details ?

 

[Steve Ewing]

I'm just an administrator. I'll forward a link to this thread to the Network Creator and see if he can't add everything.

Thanks!!

 

[Steve Ewing]

The Network Creator added everything, Now I guess it needs "tweaked" to make the new "Group" display properly like the old Group Hub displayed.

Old Hub icons/fonts look like this:
New group icons/fonts look like this:

 

[Steve Ewing]

It suddenly dawned on me to copy the CSS that set all the parameters that made the original list appear correctly and so I renamed all the names from "groupHub" to "groupList" and that fixed the alignment and size issues in the new group when I pasted it into the Global CSS box in Design Studio>Custom CSS>Global CSS. The one thing doing that didn't do is change the font and color of the number of members text (I'm not even sure how it knows to show that infomation). Is there some additional CSS code that can change that?

Also, I moved the old Content box for the Group hub to another column temporarily. Can it be deleted without causing a problem with the new content box?

 

[Bizz]

This css will change the font size and colou . Replace with the colours you want and also font size

.groupList .groupHub-groupInfo{ color: blue; font-size:10px }

Yes you can remove the old content box as it's not needed and will not affect the new one.

[Steve Ewing]

Bizz,

Both I and our Network Creator thank you for all the help!! We now have all groups displaying in the proper format and colors!!