Customize the widgets on your KickApps pages

From KickApps Documentation

Contents 1 Overview 2 Widgets created when the Video Sharing App is enabled 3 Widgets created when the Audio Sharing App is enabled 4 Widgets created when the Blogs App is enabled 5 Widgets created when the Photo Sharing App is enabled 6 Customizing the default widgets on your KickApps hosted pages 7 Customizing the Video Player for Video Play Page 8 Replacing default widgets on KickApps hosted pages

Overview

If you're using the Video Sharing, Audio Sharing, Photo Sharing, or Blog Apps, your KickApps-powered pages come installed with a number of Flash-based widgets (like video and audio players) to render the media items associated with these Apps. You can customize the look, feel, and functionality of these widgets in the App Studio by either customizing the default widgets that are automatically generated when you enable their associated Apps, or by creating brand new widgets and using them to replace the default ones.

Widgets created when the Video Sharing App is enabled

Name of default widget	Location	Additional Apps required
Video Player for Video Play Page	Video Play Page
Video Player for Community Home	KA Pre-made Community Homepage
Video Player for Group Page	Group Page	Groups
Video Player for Blogs	Blog Play Page	Blogs
Video Player for Message Boards	Message Board Pages	Message Board
Video Player for Community Mail	My Home > My Messages
Video Player for Member Page	My Home > My Widgets

Widgets created when the Audio Sharing App is enabled

Name of default widget	Location	Additional Apps required
Audio Player for Audio Play Page	Audio Play Page
Audio Player for Blogs	Blog Play Page	Blogs
Audio Player for Message Boards	Message Board Pages	Message Board
Audio Player for Community Mail	My Home > My Messages
Audio Player for Member Page	My Home > My Widgets

Widgets created when the Blogs App is enabled

Name of default widget	Location
Blog List for Member Page	My Home > My Widgets

Widgets created when the Photo Sharing App is enabled

Name of default widget	Location
Photo Share for Member Page	My Home > My Widgets

Customizing the default widgets on your KickApps hosted pages

The default widgets on your KickApps pages are listed in the tables above. They are named according to their function and the page on which they're installed. To get started customizing a default widget, first visit its associated page. This is actually a necessary step, as the widget is only created when its page is first viewed. Checking out its page will also give you a sense of the overall context in which your widget will live. Having done so, visit the App Studio, select Menu > Open, and find your widget among those listed in your Widget Manager.

The next section offers a brief example of customizing the default Video Player widget for the Video Play Page.

Customizing the Video Player for Video Play Page

The default video player widget for the video play page is called "Video Player for Video Play Page". To customize this widget, open it in the widget manager, available in the App Studio under File > Open.

Opening the default Video Player for Video Play Page widget, we get a basic neutrally-styled Video Player Lite:

With a few clicks of the mouse, though, you can style this player to reflect your brand's color scheme:

Customizing the video player's colors and button styling is a good way to start. Another good way to customize your player is to add a watermark. Doing so is easy:

1. Create a transparent .png of the image you'd like to use for the watermark in your image editing application of choice.
2. Back in the App Studio, upload the image into your App Studio Assets.
3. Drag your uploaded image from the App Studio Assets window onto the stage (learn more).
4. Position the image component where you'd like your watermark, and, if you like, tweak the Opacity setting to achieve a transparent effect:

Continue editing until you're satisfied with your widget. When you're finished, click File > Save.

Your changes will be reflected in the widget on your KickApps-hosted page, as well as any other place that this widget has been embedded.

Please note: If you decide to increase the width of your video or audio players beyond 420px, you'll need to adjust the CSS of their containing elements by adding CSS like the following to the <head> section of your Global Page Template (available under Configure > Pages > Global Page Template):

<style type="text/css">
#ka_leftColumn, #ka_playPagePlayer {
   width: 500px;
}
</style>

Learn more about customizing your community using CSS.

Replacing default widgets on KickApps hosted pages

To replace a default widget, first create the widget that you'd like to use as the replacement and save it. Then, still in the App Studio, select Menu > Publish. You'll be taken to the Widget Manager. In this screen, select the Publish to KickApps pages tab.

Tick off the checkboxes next to the pages to which you'd like to publish the selected widget. If you're not sure which page is being referred to, click its link and a new browser tab will open showing the corresponding page on your site. When you're done, click Save. Your widget will appear on the selected pages, replacing the widget that was there before, within 5 minutes.