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.