Shortening Your Play Pages' Related Media List

by Chris and David

With the launch of version 2.2, we removed the scrollbars that used to appear on the "Related Media" section of your site's media Play pages. Now, users can see all the related media without having to fiddle with small scrollbars, improving the likelihood that people will stay active on your site.

In some cases, this change can result in Play pages that look a little unbalanced: the right column can get a lot longer than the left, especially if there aren't many comments on the page. With a simple CSS snippet, you can limit the length of the related media module on the Play page, using a scrollable div to display the content.

To do so, simply add this custom CSS code to the <head></head> section of your Global Page Template (in the Affiliate Center under Configure > Pages):

<style type="text/css">

#ka_related {
    min-height:300px; /* set this number to whatever height you prefer */
}

#ka_relatedList {
   height:300px; /* should match the #ka_related height value */
   overflow:scroll;
}

</style>

In the example above, we've set the height for the newly-scrolling section to 300 pixels. If you're comfortable editing CSS, you can change it to whatever height you'd prefer. You can see an example of this CSS customization on the MyRide community site.

In our next release, we're also going to reduce the number of related media in the lists from 25 to 10. That should also help your overall page balance.

Have any questions? Post them on the Customizing Your Pages forum, where we'll answer them and share your experience with other KickApps community builders.

We're also available at support@kickapps.com.