Skip to main content

Global Theme

The applications Global Theme does two things. First, it sets the applications splash screen. Second, it applies styles and other options to all screens and menus within the application. An individual screen can over-write the global theme for most styles or options. Example: Your global theme uses a background color and all screens within the application show this background color. However, on one screen you want to use a different background. In this case, that screen would over-write the global background with it's own unique background.

Splash Screen

Not all applications use splash screens. When a splash screen is used, it's a two-step process to setup. First, you create the splash screen in the apps list of screens and menus. Next, the Splash Screen is set in the Global Theme.

Theme Properties

Most themes only use a few properties and rely on the app defaults for the remaining properties. Do not include properties that you don't need. The order of the properties in the configuration data is not important. However, property names and values are case sensitive. Both of these sample themes are OK. One sets no properties and the other sets several properties. The itemId, itemNickname and itemType properties are required.

Sample theme with only the required properties:

{
"itemId": "9994884929",
"itemType": "BT_theme",
"itemNickname": "My Empty Theme"
}

Sample theme with some additional properties:

{
"itemId": "99594848382",
"itemType": "BT_theme",
"itemNickname": "White on Black Theme",
"navBarStyle": "transparent",
"toolbarStyle": "transparent",
"navBarBackgroundColor": "#000000",
"backgroundColor": "#000000",
"listStyle": "round",
"listBackgroundColor": "#000000",
"listTitleFontColor": "#FFFFFF",
"listRowSelectionStyle": "gray"
}
Global Theme Properties
Item Id *"itemId":"a unique id"
A unique number or string identifying this item from all other items in the configuration file.
Item Nickname *"itemNickname":"a unique nickname"
The nickname of the item in the Buzztouch control panel.
Item Type *"itemType":"BT_theme"
Identifies this type of item as a BT_theme item.
Splash Screen Item Id"splashScreenItemId":"itemId of splash screen"
The unique itemId of the Splash Screen from the app's list of screens.
Status Bar, Navigation Bar, Bottom Bar
Status Bar Style"statusBarStyle":"default"
Options: default, solid, transparent, hidden.
Navigation Bar Style"navBarStyle":"solid"
Options: solid, transparent, hidden.
Navigation Bar Color"navBarBackgroundColor":"#000000"
Hexidecimal color.
Bottom Tool Bar Style"toolbarStyle":"solid"
Options: solid, transparent.
Tab Bar Color"tabBarColor":"#000000"
Hexidecimal color.
Prevent Scrolling"preventAllScrolling":"0"
Numeric: 0 or 1. Zero is "no, do not prevent scrolling." This property applies to any screen that uses scrolling.
Background Color, Image
Background Color"backgroundColor":"#000000"
Hexidecimal color or a keyword: "clear" or "stripes" (do not enter quotes).
Background Color Transparency"backgroundColorOpacity":"100"
Numeric Value: 1 - 100, 1 is totally transparent.
Background Color Gradient Top"backgroundColorGradientTop":"#000000"
Hexidecimal color. Background gradients flow top-to-bottom and are placed "on-top" of a possible background color.
Background Color Gradient Bottom"backgroundColorGradientTop":"#FFFFFF"
Hexidecimal color. Background gradients flow top-to-bottom and are placed "on-top" of a possible background color.
Background Image Small Device"backgroundImageNameSmallDevice":"background-small.png" or "backgroundImageURLSmallDevice":"URL to background-small.png"
The file name of the image added to the project or the URL to the image. Background images are placed "on-top" of possible background colors. Use an image name OR a URL, not both.
Background Image Large Device"backgroundImageNameLargeDevice":"background-large.png" or "backgroundImageURLLargeDevice":"URL to background-large.png"
The file name of the image added to the project or the URL to the image. Background images are placed "on-top" of possible background colors. Use an image name OR a URL, not both.
Background Image Transparency"backgroundImageOpacity":"100"
Number: 1 - 100, 1 is totally transparent.
Background Image Scale"backgroundImageScale":"center"Options: center, fullScreen, fullScreenPreserve, top, bottom, topLeft, topRight, bottomLeft, bottomRight.
List Menu, List Items
List Style"listStyle":"plain"Options: plain or round. Round creates rounded corners and margins around the list exposing the background color.
List Background Color"listBackgroundColor":"clear"Hexidecimal color or a keyword: "clear" or "stripes" (do not enter quotes).
List Rows Background Color"listRowBackgroundColor":"#FFFFFF"Hexidecimal color or "clear" (do not enter quotes).
List Title Text Font Color"listTitleFontColor":"#000000"Hexidecimal color. Title is line 1 of text.
List Description Text Font Color"listDescriptionFontColor":"#000000"Hexidecimal color. Description is line 2 or more of text.
List Row Seperator Color"listRowSeparatorColor":"#000000"Hexidecimal color or "clear" (do not enter quotes).
List Row Selection Style"listRowSelectionStyle":"blue"Options: blue, gray, none.
List Row Height Small Device"listRowHeightSmallDevice":"50"Numeric: The height of the list rows on small devices. Default is 50.
List Row Height Large Device"listRowHeightLargeDevice":"50"Numeric: The height of the list rows on large devices. Defaults is 50.
List Title Height Small Device"listTitleHeightSmallDevice":"30"Numeric: The height of the title in the row. If a description is used, the description height is the difference between the title height and the row height. Default is 30.
List Title Height Large Device"listTitleHeightLargeDevice":"30"Numeric: The height of the title in the row. If a description is used, the description height is the difference between the title height and the row height. Default is 30.
List Title Font Size Small Device"listTitleFontSizeSmallDevice":"20"Numeric: The font size of the title. Default is 20.
List Title Font Size Large Device"listTitleFontSizeLargeDevice":"20"Numeric: The font size of the title. Default is 20.
List Description Font Size Small Device"listDescriptionFontSizeSmallDevice":"15"Numeric: The font size of the description. Default is 15.
List Description Font Size Large Device"listDescriptionFontSizeLargeDevice":"15"Numeric: The font size of the description. Default is 15.
List Header Height Small Device"listHeaderHeightSmallDevice":"10"Numeric: The amount of space between the top of the list and the top of the screen. Default is 10.
List Header Height Large Device"listHeaderHeightLargeDevice":"10"Numeric: The amount of space between the top of the list and the top of the screen. Default is 10.
List Footer Height Small Device"listFooterHeightSmallDevice":"50"Numeric: The amount of space between the bottom of the list and the bottom of the screen. Default is 50.
List Footer Height Large Device"listFooterHeightLargeDevice":"50"Numeric: The amount of space between the bottom of the list and the bottom of the screen. Default is 50.
Prevent Scrolling"preventAllScrolling":"0"Options: 0 or 1 where 1 = yes.
List Menu Icons, Images
Icon Size Small Device"listIconSizeSmallDevice":"30"Ignored if the List Items in the menu do not use icons.
Icon Size Large Device"listIconSizeLargeDevice":"50"Ignored if the List Items in the menu do not use icons.
Icon Size Small Device"listIconScale":"center"Options: center or scale. If the icons (or images) are larger then the row-height, use scale. If the icons are smaller than the row-height, use center.
Apply Shiny Effect"listIconApplyShinyEffect":"0"Options: 0 or 1 where 1 = yes. Applies a shiny-effect to the image. Use this to dress-up bland square thumbnails.
Corner Radius"listIconCornerRadius":"8"Number. Use this to dress-up blank square thumbnails.
Button Menu, Button Items
Buttons Layout Style"buttonLayoutStyle":"grid"Options: grid, verticalLeft, verticalRight, horizontalTop, horizontalBottom. Default is grid.
Buttons Label Layout Style"buttonLabelLayoutStyle":"bottom"Options: above, top, middle, bottom, below. Default is below. Set to "middle" to prevent extra space needed for button labels.
Buttons Label Font Color"buttonLabelFontColor":"#000000"Hexidecimal color.
Buttons Background Color"buttonBackgroundColor":"#000000"Hexidecimal color.
Buttons Apply Drop Shadow"buttonDropShadow":"0"Options: 0 or 1. Zero is "no, do not use apply drop shadow." Default is 0.
Buttons Drop Shadow Color"buttonShadowColor":"#000000"Hexidecimal color.
Buttons Transparency"buttonOpacity":"100"Numeric 1 - 100. 1 is totally transparent.
Buttons Corner Radius Small Device"buttonCornerRadiusSmallDevice":"5"Numeric. Default is 5.
Buttons Corner Radius Large Device"buttonCornerRadiusLargeDevice":"10"Numeric. Default is 10.
Buttons Icon Color"buttonsUseWhiteIcons":"0"Numeric. 0 or 1. Icons in project have a matching white version. Settings this to 1 allows you to use white icons on dark background colors.
Buttons Size Small Device"buttonSizeSmallDevice":"60"Numeric. Buttons are square with this height / width. Default is 60.
Buttons Size Large Device"buttonSizeLargeDevice":"60"Numeric. Buttons are square with this height / width. Default is 60.
Buttons Padding Small Device"buttonPaddingSmallDevice":"15"Numeric. The amount of space between each button. Default is 15.
Buttons Padding Large Device"buttonPaddingLargeDevice":"15"Numeric. The amount of space between each button. Default is 15.
Buttons Label Font Size Small Device"buttonLabelFontSizeSmallDevice":"13"Numeric. The size of the font if a label is used. Default is 13.
Buttons Label Font Size Large Device"buttonLabelFontSizeLargeDevice":"13"Numeric. The size of the font if a label is used. Default is 13.
Prevent Scrolling"preventAllScrolling":"0"Options: 0 or 1 where 1 = yes.

* Required