Introduction

To overcome the limited design control of the standard cell types provided for TV (Standard Component types and Cells in Quick Brick TV apps you can replaxce them with power cells. These can be custom made or there are 2 available from Applicaster:

 Replace standard Hero with Power Cell

The standard Hero cell can be replaced with a specific power cell to look like this

Use this article to understand how to set up your app build to use power cells and attach them to a component :Making sure your QuickBrick TV build is set up to to use Power Cell Plugins

Ensure the following power cell plugin is added to your app (rebuild if necessary)

Configure the power cell design as required for that component

• Default background color
  • The color of the highlight line below the image when the cell is not in focus
  • Set to transparent if line not required
• Focus background color
  • The color of the highlight line below the image when the cell is in focus
  • Set to transparent if line not required
• Default text color
  • The color of the text over the image when the cell is not in focus
  • Set to transparent if text not required
• Focus text color
  • The color of the text in the image when the cell is in focus
  • Set to transparent if text not required
• Set font family for cells per TV device type
• Font size
• Font shadow
  • Set transparent if not required
• Set number of lines in title
  • NOTE this can only be = 1 at the moment
• Set number of lines in subtitle
  • NOTE this is not available at the moment

Replace standard Grid and List with a Power Cell

The standard Grid and List cell can be replaced with a specific power cell to look like these examples but the configuration is quite flexible

Image, 3 rows of text, focus color on text background, square corners

Image, 1 row of text, no background highlight, focus color on text, slight rounding of corners

Ensure the following plugin is added to your app

Use the same cell replacement method in UI Builder as outlined above for a Hero cell.

Configuration

The following can be configured in the Power Cell

Item	Parameters
Content Badge	Image (132x132px) Position over image
Lock Badge	Lock and unlock Image (132x132px) Position over image
Image	Image ratio (only 16x9 supported) Placeholder color if no feed image Placeholder image if no feed image Overlay image (e.g. shading transparency) Corner radius Feed data key for image source	Image size is 454px x 254px
Cell style	Focused and non-focus colour of area behind text. Set to transparent if not needed Cell corner radius Cell bottom padding and margin (see later in article for more information) Font family: Do not add here, add in the text fields
Run time label	Add a runtime label if present in feed, configure fonts and background color, radius
Text label 1,2,3	Up to 3 individual text  fields Configure number of text lines per field Configure font type, color, size per field Configure margins around text, line height, spacings

 Cell Margins and Padding

In the cell styling fields the are entries for margin and padding

Bottom Margin: At the moment spacing between cells and components (so the spacing outside of a cell) is currently hard coded within QB TV apps so Bottom Margin entries do not have any effect on the layout.

Bottom Padding: This can be used to add extra space within a cell at the bottom

In the following example the Bottom Padding is set to 0. In combination with the number of lines iof text in text label 3 lines (which has been set to a value of 4) a cell that has 4 lines of text will run to the bottom of the cell (as in the 2nd cell here). Where there is only enough metadata for 3 lines of text (as in the first example) the text will end and there will be a space at the bottom regardless of Bottom Padding being set to 0

In this example Bottom Padding has been set to a value of 20 and the effect on the cell can be seen.

Text Label Spacings

Spacing within the text label area can be controlled by their respective settings and some of these settings will "compound" e.g. Margin Top and Bottom between text elements will add together.

Line Height: ensure this is greater than the Font Size setting or Font Height will be cropped

Letter Spacing: The vertical spacing between characters

Number of lines: The number of wrapped lines that will be displayed before truncation of the metadata takes place.

Margin Top: Space added at the top of a text label. For the first text label in the cell this will control the spacing of the label from the bottom of the image. For any subsequent text labels in the cell it will control the spacing between them.

Margin Right: The spacing of text from the right of the cell.

Margin Bottom: For the first last text label in the cell this will control the spacing of the label from the bottom of the cell. For any previous text labels in the cell it will control the spacing between them.

Margin Left: The spacing of text from the left of the cell.