Building and Branding the Channel Overhang


This Instant TV Channel walk-through applies only to Custom SDK Roku channels. All branding for Direct Publisher Roku channels is configured on the channel's "Branding" page in your Roku Developer Account.

The overhang is the banner across the top of a Roku screen that contains the channel's logo, brand or slogan. It is usually built using several separate image files or URLs. Instant TV Channel's "what you see is what you get" (WYSIWYG) Theme Editor is used to quickly build and brand the overhang by dragging the overhang image components to the desired position. Alternatively, the overhang image positions can be specified using X and Y coordinates.

A channel always has two sets of overhang images. One set of images is used only for HD displays, and one set of images is used only for SD displays. The SD images are usually just reduced size versions of the HD images. The images can be formatted as PNG, JPG, or GIF, however PNG is usually preferred because it permits the use of partial transparency to produce soft edges that blend in smoothly with the background.


In the example Roku screen shown above, the overhang in blue is at the top, and a blank main body in green is below the overhang. Normally the main body will contain selectable poster images or content details. All of the images in the overhang example above use partial transparency.

The overhang for Horizontal List screens and Springboard/Detail screens consists of the following parameters specified in the Instant TV Channel Theme Editor:

  1. OverhangSliceHD or OverhangSliceSD - An image that provides the background of the overhang. The OverhangSlice is usually a PNG formatted image which uses partial transparency at its lower edge to smoothly blend the overhang into the background color of the rest of the screen. The image is duplicated horizontally until it fills up the full width of the screen. The typical height of the OverhangSliceHD image is 124 pixels and the enforced maximum height is 138 pixels. The typical height of the OverhangSliceSD image is 83 pixels and the enforced maximum height is 92 pixels. If the OverhangSlice image is taller than the enforced maximum height it is automatically cropped by the player.
  2. OverhangLogoHD or OverhangLogoSD - An image that is displayed on top of the OverhangSlice background. The OverhangLogo image is usually a PNG formatted image containing the channel's logo or brand. It will typically use partial transparency to blend in smoothly with the OverhangSlice background. If the OverhangLogo image height exceeds the enforced maximum height (138 px for HD or 92 px for SD) or if the width exceeds the screen width (1280 px for HD or 720 px for SD) the image will be cropped.
  3. OverhangSecondaryLogoHD or OverhangSecondaryLogoSD - An additional image that is displayed on top of the OverhangSlice background. The OverhangSecondaryLogo image is usually a PNG formatted image containing an additional logo, brand, or slogan. It will typically use partial transparency to blend in smoothly with the OverhangSlice background. If the OverhangSecondaryLogo image height exceeds the enforced maximum height (138 px for HD or 92 px for SD) or if the width exceeds the screen width (1280 px for HD or 720 px for SD) the image will be cropped.

The overhang for Grid screens consists of the following parameters specified in the Instant TV Channel Theme Editor:

  1. GridScreenOverhangSliceHD or GridScreenOverhangSliceSD - An image that provides the background for the overhang. The GridScreenOverhangSlice is usually a PNG formatted image which uses partial transparency at its lower edge to smoothly blend the overhang into the background color of the rest of the grid screen. The image is duplicated horizontally until it fills up the full width of the screen.
  2. GridScreenLogoHD or GridScreenLogoSD - An image that is displayed on top of the GridScreenOverhangSlice background. It will typically use partial transparency to blend in smoothly with the GridScreenOverhangSlice background. If the image size exceeds the maximum size of the overhang it will be cropped.
  3. The GridScreenOverhangHeightHD and GridScreenOverhangHeightSD parameters determine the height in pixels of the Grid's overhang. Roku does not define the minimum or maximum values for GridScreenOverhangHeight in the Roku SDK, however values of 69 for HD and 49 for SD will usually produce satisfactory results. These parameters also determine the position on the screen where the grid posters disappear and reappear when scrolled.

An alternative method of creating an overhang is to use a single full-screen-width (1280 px for HD and 720 px for SD) OverhangSlice or GridScreenOverhangSlice image for the entire overhang, without using an OverhangLogo, OverhangSecondaryLogo, or GridScreenLogo. This usually requires a much larger file size, particularly if a PNG formatted image is used. Images exceeding 100 KB in size cannot be included in the PKG file and must be specified with a URL instead.


Overhang image components can either be included within the channel's package (PKG) file, or they can be specified with a URL.

  • Including the overhang images within the channel's PKG file allows the channel to load quickly, and is the preferred method. If the images are changed in the Theme Editor, a new PKG file must be created and uploaded to your Roku Developer Account.
  • Specifying the overhang images by URL allows the images to be modified without requiring a new PKG file. Because the player must download the images instead of obtaining them from the channel's PKG file, a delay of several seconds may occur while the overhang is drawn.

How to include an overhang image in the PKG file:

  1. Enter the Theme Editor by clicking on the Theme link on the left side of the Instant TV Channel page.
  2. Using the vertical scroll slider labeled Scroll to view/edit all parameters, scroll down until the parameter name of the overhang component you wish to include in the PKG file is visible.

  1. The Pkg checkbox next to the image should already have a checkmark displayed in it. If the checkmark is not displayed, then click the checkbox to display the checkmark.
  2. Click on the image. This should result in the Upload dialog box being displayed.

  1. Click the Browse or Select button in the Upload dialog box.
  2. Navigate to and select the image that you wish to upload. The name of the file will appear within the dialog box.
  3. Click the Upload button in the Upload dialog box. The dialog box will disappear and the uploaded image will be displayed to the right of the Pkg checkbox.

Specifying an overhang image by its URL:

  1. Enter the Theme Editor by clicking on the Theme link on the left side of the Instant TV Channel page.
  2. Using the vertical scroll slider labeled Scroll to view/edit all parameters, scroll down until the parameter name of the overhang component you wish to specify is visible.
  3. Uncheck the Pkg checkbox to the right of the parameter name. The image will be replaced by an empty textbox and the text "No Image Selected".

  1. Enter the URL of the image into the empty textbox. The URL must point to a valid image file stored on an external server or storage system.

  1. The image pointed to by the URL is displayed to the right of the Pkg checkbox.
  2. Optional - To add the image pointed to by the URL into the channel's PKG file, re-check the Pkg checkbox.

For more information about how developers can quickly build a channel using Instant TV Channel, please see this Walk-Through.

Questions or comments about this Roku developer page can be sent to .

Instant TV Channel is a cloud-based tool for Roku developers and content providers that shortens development time and eases maintenance after deployment.



Access Code: U463
Check out Instant TV Channel by adding our latest demonstration channel to your Roku player, or watch the YouTube video.

Need help with your Roku?

We are unable to provide technical support for your Roku device.

Please visit www.roku.com for assistance.



Instant TV Channel is not affiliated with nor endorsed by Roku Inc.