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.
The images described below 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:
OverhangSliceHD - An image that provides
the background of the overhang.
The OverhangSliceHD 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.
If the OverhangSliceHD image is taller than the enforced maximum height
it is automatically cropped by the player.
OverhangLogoHD - An image that is displayed
on top of the Overhang Slice background.
The OverhangLogoHD 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 OverhangLogoHD image height exceeds the enforced maximum height of 138 px,
or if the width exceeds the screen width of 1280 px,
the image will be cropped.
OverhangSecondaryLogoHD - An
additional image that is displayed on top of the OverhangSlice background.
The OverhangSecondaryLogoHD 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 OverhangSliceHD background.
If the OverhangSecondaryLogoHD image height exceeds the enforced maximum height of 138 px,
or if the width exceeds the screen width of 1280 px,
the image will be cropped.
The overhang for Grid screens consists of the following parameters
specified in the Instant TV Channel Theme Editor:
GridOverhangSliceHD -
An image that provides the background for the overhang.
The GridOverhangSliceHD 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.
GridLogoHD -
An image that is displayed on top of the GridOverhangSliceHD background.
It will typically use partial transparency to blend in smoothly with
the GridOverhangSliceHD background.
If the image size exceeds the maximum size of the overhang it will be cropped.
The GridOverhangHeightHD
parameter determines the height in pixels of the Grid's overhang.
Roku does not define the minimum or maximum values
for GridOverhangHeightHD in the Roku SDK,
however a value of 69 or 70 will
usually produce satisfactory results.
This parameter also determines 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 1280px full-screen-width
OverhangSliceHD or GridOverhangSliceHD image for the entire overhang,
without using an OverhangLogoHD, OverhangSecondaryLogoHD, or GridLogoHD.
This usually requires a much larger file size,
particularly if a PNG formatted image is used.
Large images should not be included in the PKG file and
should 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:
Enter the Theme Editor by clicking on the Theme link on the left
side of the Instant TV Channel page.
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.
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.
Click on the image.
This should result in the Upload dialog box being displayed.
Click the Browse or Select button in the Upload dialog box.
Navigate to and select the image that you wish to upload.
The name of the file will appear within the dialog box.
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:
Enter the Theme Editor by clicking on the Theme link on the left
side of the Instant TV Channel page.
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.
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".
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.
The image pointed to by the URL is displayed to the right of the Pkg checkbox.
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
Instant TV Channel is a cloud-based tool for Roku developers and content providers that shortens development time and eases maintenance after deployment.
