The login screen is often the very first thing a user sees when they open your app —
so it’s worth making sure that first impression is yours, not the default. A handful of
settings let you swap in your own logo, background, and button colors, and this how-to
walks you through each one, in the order to set them.

Goal

By the end, your login screen will show your logo at the top, sit on your brand
background (a solid color or a full-screen image), and use Login and Sign Up
buttons in your brand colors, with label and link text that stays easy to read.

Prerequisites

• An admin account on the WordPress site that powers your app.
• Your brand assets ready to upload:
  • A logo image, ideally a transparent PNG that reads well on a dark or light background.
  • Optionally, a high-resolution background image.
• Your brand color values (hex codes) for the background, button fill, button text, and
  link text.

Every setting below is global — it applies to every user role at once. There’s no
way to set different login branding per role.

Where these settings live

You’ll find all the login branding controls in one place: the Login Settings group
on the Login Button content type. To get there, open the Mobile App Manager, edit
the Login Button under App Navigation, then open Login Settings. Every field
named in the steps below lives right there.

If your app uses Require Login?, the login screen shows up before any content, so
these branding settings carry extra weight. Turn Require Login off, and the login
screen still appears any time someone chooses to sign in — so it’s worth branding
either way.

Steps

1. Set the screen background

Start by deciding whether your login screen sits on a solid color or a full-screen image.

• Screen Background Color sets a solid color behind the form. The default is
  #000000 (black). It’s what users see when there’s no background image, and it’s also
  what shows while an image is still loading — so set it even if you’re planning to use
  one.
• Background Image sets a full-screen image that covers the background color
  whenever one is uploaded. Use a high-resolution image that still reads well behind the
  login form on both phone and tablet, and keep any important detail — a focal subject,
  say — away from the center, since that’s where the form sits on top.

Want just a flat brand color? Set Screen Background Color and leave
Background Image empty.

2. Add your logo

Upload your logo to Top Logo and it’ll appear at the top of the login screen, above
the form. A transparent PNG works best here, since it blends into whichever background
you set up in Step 1 — check it against both your background color and your image.

3. Color the buttons

The Login and Sign Up buttons are colored together, from a single pair of
settings:

• Button Background Color — the fill color of both buttons. Default #ffffff (white).
• Button Text Color — the label color on both buttons. Default #000000 (black).

Choose these two together so the labels stay legible against the fill — a dark fill
wants light text, and a light fill wants dark.

4. Color the secondary links

The smaller secondary links on the login screen — things like Forgot password? and the
Terms & Conditions link — take their color from Links text color (default
#ffffff, white). Pick a value with enough contrast against your background color or
image that these links stay readable, and keep in mind that light link text can vanish
on a light background — so recheck this any time you change the background.

5. (Optional) Match the button labels to your brand voice

Color isn’t the whole story — your wording matters too. If the default text doesn’t
sound like your app, rename the buttons with these text fields (leave any of them blank
to keep the app’s default wording):

• Login Button Title — the primary sign-in button (e.g. “Sign In” or “Member Login”).
• Signup Button Title — the create-account button (e.g. “Create Account” or “Join”).
• Send Code Button Title — the button that sends a sign-up/verification code, used in
  code-based or passwordless signup (e.g. “Email My Code”).

6. Save and preview

Save your settings, then open the app (or your preview build) to see the login screen
for real. Check that:

• The logo reads cleanly against the background.
• The button fill and text have enough contrast.
• The secondary links are visible.
• Everything still works on both a phone-sized and a tablet-sized screen, since the
  background image and form layout scale differently on each.

Adjust the colors and save again as needed, until the screen matches your brand.

Tips

• Set the background color even when you’re using an image. It’s the fallback users
  see while the image loads, and if it ever fails to load at all.
• Contrast is the thing to watch. The most common branding mistake is light link or
  button text sitting on a light background (or the reverse) — so preview on a real
  device, not just the color swatches.
• Keep the center of any background image clear so the logo and inputs stay
  readable on top of it.

Related

• Require Login? — controls whether the login screen is the first thing users see.
• App setting: Top Logo (login_top_logo_url)
• App setting: Screen Background Color (login_background_color)
• App setting: Background Image (login_background_image)
• App setting: Button Background Color (user_profile_button_background_color)
• App setting: Button Text Color (user_profile_button_text_color)
• App setting: Links text color (user_profile_links_text_color)

What’s next

Once your login screen is on-brand, carry those same color choices into the rest of the
app — the tab bar, home screen, and menus — so the experience feels consistent from the
very first screen onward.