Configure your first app: a guided tour of the settings tabs

Think of the App Settings page as the control room for your app’s look and behavior. It’s one long, tabbed page split into labeled category panels — Nav Header, Bottom Tab Bar, General Settings, Home Screen, Left Menu, and more — and every one of them feeds the same live app. In this tutorial you’ll start from a fresh install, set your two base theme colors, then work through the category panels in order, changing a setting or two in each. By the end you’ll have a branded, working app and a clear map of where everything lives.

You won’t touch every one of the hundreds of available settings — most already have sensible defaults. The goal here is simpler: leave this page knowing what each panel controls and how to find it, with enough changes made that you can see your branding take hold.


What you’ll have at the end

  • Your app’s base dark and light theme colors set, so buttons and icons start from your brand palette.
  • A branded navigation header (background, text color, and optional logo image).
  • A styled bottom tab bar with your selected and unselected icon colors.
  • A few general and home screen touches applied (global font, activity spinner color, home background).
  • A working knowledge of the Left Menu, Listings, Gravity Forms, and other panels so you know where to return.
  • All of it saved and ready to view in the App Previewer.

Prerequisites

Before you start, make sure:

  • You are signed in to WordPress as an administrator. The App Settings page requires the manage_options capability; without it the page will not render.
  • MAM Suite is installed with mam-main active, and your app entitlement is in place.
  • You can reach the App Settings page from the Mobile App Manager (MAM) admin menu. The page headline reads App Settings.

You won’t need any listings, forms, or content yet. This tutorial is about configuration, not data — once you do add content, it’ll flow right into the styling you set up here.


A note on how the page is organized

Two things shape everything else on this page, so it’s worth knowing them before you dive in:

  • Settings are saved per role. Near the top of the page sits a role selector, and whatever you change applies only to the role currently selected there (for example, Any User Not Logged In, or a specific WordPress role you manage). Most first apps only need the default, not-logged-in experience configured — just double-check the role selector before you save, so your changes land where you expect. Managing several roles? A Clone from Role → to Role control lets you copy one role’s settings to another instead of re-entering everything by hand.
  • The General Settings tab is where this tour lives. Across the top of the page you’ll find navigation tabs: General Settings, a tab per app screen (labeled Main – or Left – by screen), and two fixed tabs — Social Accounts and App Store Keys and Settings. The category panels covered below all live inside General Settings. The other tabs handle their own subsystems: social login and sharing accounts on one, app store keys and push notification settings on the other.

Inside General Settings, a row of quick links at the top jumps you straight to any category section, and a small up-arrow on each panel brings you back to the top. Use them freely — the page is long on purpose.


Steps

1. Set your base theme colors

The very first time you open App Settings on a fresh install, it stops you right away and asks for two colors before showing you anything else:

  • Theme Color Dark (defaults to black, #000000)
  • Theme Color Light (defaults to white, #ffffff)

Pick a dark and a light color that fit your brand. As the on-screen note explains, these become the starting defaults for buttons and icons across the app — anywhere a color setting would otherwise default to black or white, it inherits your dark or light choice instead. You can always override any individual color later; this step just saves you from editing dozens of colors by hand.

Click Save and the page reloads into the full settings view with all the category panels. (This one-time screen only shows up until your colors are set — you won’t see it again.)

2. Confirm the role you’re editing

With the full page showing, look for the role selector near the top. For a first app, leave it on the default (typically Any User Not Logged In) so your branding reaches everyone who opens the app. Keep in mind: whatever you change from here saves against this role.

3. Brand the Nav Header

Jump to the Nav Header panel — the first category, and the bar that runs across the top of every screen. A few good first changes:

  • Header Background — the color of the navigation bar. Set it to your brand color.
  • Header text color — the color of titles and icons in that bar. Pick a color with good contrast against the background.
  • Image for Nav Header — optionally upload a logo image to show in the header instead of plain text.
  • Status bar color — choose light or dark so the phone’s status bar text stays legible over your header.

A handful of other options live here too — all-caps titles, a transparent header, a custom header font, content starting at the very top of the screen — but they’re refinements you can safely leave at their defaults for now.

4. Style the Bottom Tab Bar

Move to the Bottom Tab Bar panel — the row of tabs anchored along the bottom of the app. Set:

  • Bottom Tab bar Color — the bar’s background.
  • Bottom Tab bar Selected Icon Color — the highlight color for the active tab.
  • Bottom Tab bar Un-selected Icon Color — the dimmer color for inactive tabs.

You can also hide tab titles or switch the home screen to use the tab bar from here — leave both alone unless you have a specific reason to change them.

5. Set global behavior in General Settings

Open the General Settings panel, where these options shape the whole app rather than just one screen. Reasonable first touches:

  • Global Font — the typeface for the entire app (defaults to Roboto).
  • Activity Spinner Color — the loading spinner color; set it to your brand.
  • Home screen background color — the canvas behind your home content. (This one lives in the General Settings panel, not the Home Screen panel.)
  • Use Push Notifications / Use GPS / Use Camera — turn on only the device capabilities your app actually needs.

Leave performance toggles like Disable Caching and Force Reload on Open off unless you’re actively troubleshooting something.

6. Dress up the Home Screen

Open the Home Screen panel — the biggest section on the page. Don’t let its size throw you; for a first pass, set just a couple of things and make a mental note of the rest for later:

  • Home Screen View — the home layout style.
  • Home Screen Default Category — the category the home screen opens to.

This panel is also home to features like GeoFilters, featured and recent listings, filter-bar chips, tagged navigation, check-in, and the cart button. None of them are required to ship a first app — just skim the titles so you know where to find them, and come back once you’re ready to turn one on.

7. Configure the Left Menu

Open the Left Menu panel — the slide-out menu users pull in from the side. Useful starters:

  • Background Color, Text Color, and Icon Color — match these to your brand.
  • Has left menu logo / Top image Image URL — optionally show a logo at the top of the menu.
  • Show Username on left menu if logged in? — show the signed-in user’s name at the top.

8. Skim the content-oriented panels

The remaining panels each govern a specific content type or subsystem. You can leave every one at its defaults for a first app, but it’s worth knowing what’s what:

  • Gravity Forms (Forms) — form behavior: camera-only photos, image format/size, auto-filled GPS fields, picker prompts. Relevant once you add forms.
  • User Profile — which form backs the user profile (appears when the Gravity Forms integration is active).
  • Listings — how directory listings and detail screens look: placeholder image, reviews, favorites, sharing, distance display, category tab bars, and more.
  • Activity, Calendar — styling for those screen types if your app uses them. (Review styling lives inside the Listings panel, not a separate Reviews panel.)
  • Misc — odds and ends such as the “no content” message color.

9. Save and review

Scroll to the bottom of the General Settings tab and click Save — your changes are written for whichever role you had selected.

Managing multiple roles and want another one to start from this same look? Use the Clone from Role → to Role control near the top instead of redoing all this work by hand.


What’s next

  • Preview your app — open the App Previewer, scan a QR code, and watch your branded app load live on a phone or tablet, so you can confirm the header, tab bar, and colors you just set.
  • Choose your home layout — see Choose your app home screen layout to pick a pre-built home arrangement, which your branding will then style automatically.
  • Add real content — your listings, forms, and screens will all inherit the styling you set up here. Once that content exists, return to the relevant panel (Listings, Gravity Forms, Calendar) to fine-tune how it appears.
  • Tune per role — if different user roles need a different look, switch the role selector and revisit the panels that matter, or clone a finished role as your starting point.
Was this article helpful?
Contents

    Need Support?

    Can't find the answer you're looking for? Don't worry we're here to help!