The Global Style section, under the Appearance Step, controls
your tab headers, font, and the majority of the colors found throughout
the app. It's also the place you can create separate appearances for
specific tabs, differentiating individual tab style based on your needs.
Header
Here
you'll select a header image, if you'd like one to appear at the top of
your tabs and More menu (if enabled). You can choose from the pre-loaded
options in the bottom scrolling menu, or upload your own. Any time you
upload your own header, it will appear at the top of the menu.
- Bar Background Color: When you decrease the opacity of your global header, you can set a background color for it. In the simulation to the right, you can see the turquoise background color of the header. Different header textures yield different shades, so play around with the options.
- Background Opacity: This sets your header's opacity, with the far left being the most opaque (non-transparent) and the far right being the least opaque (transparent). See below for examples of how the header appearance differs between the two extremes.
- Bar Item & Text Color: This controls the font color that appears at the top of tabs & menus. For example, "Menu" in the simulation above is controlled by this setting. Your tab titles will also be controlled by this.
- Shadow: Select the shadow color for your Bar Item Text. In the example above, you can see the pink shadow behind "More."
Most Opaque:
Least Opaque:
Fonts
In the
Fonts section, you can select the global font for your app. Keep in
mind, Android and HTML5 don't support different fonts, so this section
only applies to iOS.
Lists
The
Lists section controls the colors of most option lists within your app,
from your More menu to item lists (which appear in almost every tab).
- Section: Select the Bar & Text color for Sections within your app. This setting will apply within tabs like Info 2-Tier & 3-Tier and Menu, which have Section Titles. It also controls some other less obvious areas of your app, like the bar color beneath each push notification in the Messages tab (see Fig. A below), the History bar in the QR Scanner tab (see Fig. B), and the recording total bar in the Voice Recording tab (see Fig. C). Most anytime you see a bar like these within your app, the Section settings will control its colors.
- Odd Row: This setting will apply to all odd rows within your app's menu lists. This includes your More menu (if applicable) and in-tab menus. As mentioned in the Section explanation above, other tabs use these colors in less obvious ways. For example, the first push notification in your Messages tab (Fig. A), the first item in your QR Scanner tab History (Fig. B), and the first recording in your Voice Recorder tab (Fig. C) will all take on the odd row color.
- Even Row: See Odd Row for a full explanation. In the examples below, you can see the Even Row colors reflected in the second items within each list.
Figure A
Figure B
Figure C
Features
The
Features section probably has the steepest learning curve of all, but
once you get the hang of all that it controls, it will be a cinch to
make quick edits to your app. As the image above indicates, you can
think of Button Text/Button & Image and Feature Text/Background
Color as pairs (font & background color). The text settings should
contrast well with the settings below them and never be set to the same
color, otherwise text will be unreadable (or at least difficult to
read).
- Button Text: The font color for text that appears on buttons throughout your app. See Figures D, E & F below for examples of the white Button Text on the green Button & Image color.
- Button & Image: The background color of the buttons themselves. See Figures D, E & F below for examples of the green Button & Image color.
- Feature Text: The main font color for text that appears throughout the app, like item and tab descriptions. See Figures D, E & F below for examples of the yellow Feature Text on the blue Background Color.
- Background Color: The main background color for tabs and description boxes. Keep in mind, if you don't have a background image assigned to a tab, this color will take over. See Figures D, E & F below for examples of the blue Background Color.
Figure D
Figure E
Figure F
Individual Tabs
Last but not least, you can change the appearance for specific tabs
without affecting the appearance of your app as a whole. This section
allows you to create separate appearances for tabs that you want to
differentiate. Just click the editing icon to the right of a tab to get
started.
Under the General tab you can adjust the tab settings (Title, Icon, and active/inactive) as you would in the Functionality Step. Click Browse next to Upload Custom Icon if you want to upload your own 64x64px icon.
Under the Appearance tab
you can start customizing the appearance to differentiate it from the
rest of your app. Click Create Separate Appearance to begin.
Customization options will appear in the window. These settings will
default to your Global Style selections. You can start making
adjustments as desired under the Buttons, Icon Color, Header & Color sections. Click Browse in the Buttons section if you want to upload your own 130x130px Button background image.
Make
sure to click Save (next to Appearance) after you make any changes. If
at any point you wish to revert your tab back to the default Global
Style settings, you can click Delete Separate Appearance at the top right.