Use The Sandbox to Get Your Site Ready for the Latest KickApps Release


Early morning EST on Tuesday, January 29, we’ll be updating a number of pages in your KickApps-powered community to make them even more engaging for your members.   If you’ve added any custom CSS or HTML to your site, please read below as you may need to tweak your code in preparation for this release. If you haven’t, there’s nothing for you to do.

To help you transition successfully, we’ve set up a sandbox area in which you’ll be able to add CSS or HTML to your site and see what your pages will look like when the update goes live on the 29th. All changes must be made by Monday, January 28 at 9pm EST to ensure that your transition is as seamless as possible for you and your members.

About The Sandbox

The sandbox environment is running a pre-release version of the KickApps platform that includes the forthcoming page code updates. You can use it to preview how these updates will affect your customized KickApps member-facing pages and determine what tweaks you'll need to make so that your pages render correctly when the updates roll out.

Which pages are being updated?

While we’ve made a number of little changes across the platform, the main changes are on the following pages, so make sure to focus on them as you browse through the sandbox environment:

  • The member "my home" page has been rebuilt to provide your members with the most relevant community information and functionality right when they log in. Members can now get updates on what their friends are up to, see what people are saying about their media contributions, and keep tabs on all the latest community media--all from their "personal dashboard" pages. For easier access to these pages, we've added a "my home" link to the main navigation, and the "my home" subnav to the subnav bar. (prefer the old subnav arrangement?)
  • Your message board pages have been completely redesigned to enhance usability. We've also added new administrative tools for creating, editing, and disabling discussions, as well as pins, flagging, and RSS feeds.
  • Group Pages have been completely overhauled with an all-new layout.
  • To make it even easier for you to create an engaging social media experience from the word GO, your Pre-made Homepage has been spruced up with light design changes and additional hooks for styling.

Using The Sandbox

  1. Log in to the sandbox using your current KickApps Affiliate Center account information. (Note: if you opened your KickApps account after January 16, 2008, you'll have to create your own sandbox account. See this note for more details.)
  2. Click the "Launch site" link to see what your site will look like when the new page updates go live.
  3. Using a tool like Firebug, review each type of member-facing page within the sandbox and identify the specific areas you'll need to tweak. See below for an overview of the major code changes.
  4. Based on what you learn in step 3, make all the appropriate changes to the sandbox's Global Page Template. (The Global Page Template is a new page in the Affiliate Center; it's a streamlined replacement for both the “Set Site Styles” and “Enter Header & Footer Code” pages in the current Affiliate Center.)
  5. Return to each of the sandbox's member-facing pages and confirm that the changes you made in step 4 work. If not, keep tweaking your code until you get what you want.
  6. Follow the same process to update the code within any advertising slots that you're using. Ad templates for each page are available in the sandbox under the "Configure Advertising" tab.
  7. Once you're comfortable with the changes you've made on the Global Page Template and/or each of the applicable ad template pages, select the "Apply these settings to my live site when the launch occurs" checkbox at the bottom of each of these pages, and we'll automatically apply those settings to your live site on the 29th. If you do not select these checkboxes, when the update goes live we'll simply migrate the code and settings from your live Affiliate Center account on the 28th. Note: if you plan on using the auto-update feature, you must have all your settings saved by 9pm EST on Monday, January 28, 2008.

We're all very excited to bring you these updates and are eager to make your transition as seamless as possible. Please remember that your changes must be saved by 9PM EST on Monday, January 28th. If you have any questions, feel free to post to the Transition Guides forum here on KickDeveloper.

What are the major code changes?

New Classes for "Content Blocks"

Most KickApps-powered pages can be easily divided into a number of blocks of content, like this:

To help you (and, yes, us too!) style these chunks of content, we've standardized the way that we mark them up. We're calling these areas "content blocks" and have divided them into two parts: the "titlebar", which usually displays a label or title for the area beneath it, and the "body", which is the area beneath the "titlebar" where the content is displayed. In this release, we've added the class .ka_contentTitleto all content block titlebars, and .ka_contentBodyto all content block bodies. These hooks are incredibly powerful, as there are content blocks on most every page. We encourage you to experiment with them, as they can help to simplify your code.

New IDs and classes added to the <body> tag of each page type

New IDs and classes have been added to the <body> tag of each page type. The new IDs identify the basic page type, and the new classes qualify that page type by both media type and the order in which the media is being sorted. So, for instance, here is the first part of the <body> tag for the video list page, sorted by "most recent":

<body id="ka_listPage" class="VIDEO recent"...

The following table lists out the IDs for all of the major pages. We encourage you to look under the hood to find the new IDs of any subpages that you're interested in.

IDPage Type
#ka_homepage Pre-made Community Homepage
#ka_myhome Member "my home" Page
#ka_profilePage Member Profile Page
#ka_listPage List Page
#ka_playPage Play Page
#ka_groups Group Page
#ka_forums Message Board
#ka_discussions Message Board > Specific Forum
#ka_replies Message Board > Specific Forum > Specific Discussion

New Media Type Classes

  • .VIDEO
  • .AUDIO
  • .PHOTO
  • .BLOG
  • .USER (for member list page)
  • .GROUP

New Sort Classes

  • .recent (most recent)
  • .rating (highest rated)
  • .popular (most viewed/played)
  • .favorite (top favorites)

When does the sandbox close?

Alas, even good things must come to an end. The sandbox environment will be closing down on Tuesday, February 12, 2008. You will no longer be able to access the sandbox after that date. Please plan accordingly.




Note: if you signed up for KickApps after January 16, 2008, and would like to make use of the sandbox, you'll have to create a new account in the sandbox environment by signing up here. You can use this account to get your site ready for the new release.  You will not have access to the auto-update feature described in step 7, so you'll have to transition your site manually after the launch occurs on 1/29. To do so, simply copy the code you added in the sandbox environment to the corresponding sections in the Affiliate Center of your live site. back

The new "my home" subnav has been added to the main subnav bar. If you prefer the old way, where these links were broken out below the navbar, you can reinstate the old "my home" nav by copying the following CSS to the <head></head> section of your Global Page Template:

<style type="text/css"> /* Reinstate classic "my home" nav */ #ka_getActive, #ka_myHomeURL, body#ka_myhome #ka_contentContainer h2, body#ka_myhome #ka_headerSubNav ul {display:none} #ka_manageAccountInfo { height:auto !important; margin:0pt; min-height:95px; padding:0pt; width:730px; display:block !important; } #ka_letterboxUserProfile { border:1px solid #CCCCCC; float:left; height:70px; margin:0pt 10px 0pt 0pt; padding:0pt; width:94px; } #ka_manageAccountInfo h3#ka_myHome { border:medium none; margin:0pt 0pt 4px 105px; padding:0pt; text-transform:capitalize; } #ka_manageNav { font-size:0.9em; margin:0pt 0pt 4px; padding:0pt; } #ka_manageNav ul { margin:0pt 0pt 4px; padding:2px 0pt; } #ka_manageNav li { display:inline; list-style-type:none; margin-right:16px; padding-left:24px; } /* End classic "my home" nav */ </style> back