Loading...

Reducing the Birthdays column on your homepage

Tags: birthday
Reducing the Birthdays column on your homepage
reducing-the-birthdays-column-on-your-homepage
D'you have a large social network on GROU.PS? Have you ever had problems with your "Birthday" list? Too many celebrants, the list just goes on and on and makes your homepage too long? Here is a solution for you.. reduce the "Birthdays" column to only display three celebrants and placed a "See All" link, which displays the remaining celebrants in a pop up, when clicked.

Here's how we did it:

First find the id name of your "Birthday" list. Mine was block_no_1099491

So, I forced the height of my list to 107px. This makes it display only three celebrants. The first three.

#block_no_1099491 {
  height107px!important;
}


The above CSS goes into your Template CSS.

After this, add a new block and put the below code in it:

<script type="text/javascript">
var messagebday = document.getElementById("block_no_1099491").innerHTML;
</script>
<a href="javascript:;" onclick="groups.modalBox.showHTML(messagebday);" title="See all Birthdays">See all</a>

Put this block directly underneath the "Birthday" list block.

Now you may want to get rid of the "Title" of the block in which the "See All" link is in. 

If the id name of the block in which the "See All" link is top_block_no_1099493 then you will have to add the below CSS code to your Template CSS. 

Although, I am aware of the irony of the id name of your block being top_block_no_1099493, I am sure it will be of the format: top_block_no_XXXXXX, when the are integers.

#top_block_no_1099493 .box_top {
  displaynone!important;
}
#top_block_no_1099493 {
  directionrtl!important;
  margin-top-15px!important;
}

Thanks go to Lagbook!