The Appearance Studio
Edit your look beside your real embed, on every screen and device, with compare and undo
The Appearance Studio is where you edit your look. It shows your real embed, wearing the changes you make as you make them, so you see what players will see before anything is saved.
Open It
Open Manage > Your operator and choose the Appearance tab, beside Overview, Environments and Go-live. Phoenix staff open the same tab from Manage > Operators, on the operator's page.
Your Admins can change the look. Other staff who can open Manage see the studio read-only ("Read only: changing it needs the admin role"), with the preview and compare still working.
The studio edits one environment's look at a time. The Editing switch at the top chooses Sandbox or Production; see Saving, Copying and Restoring.
The Preview
The middle of the studio is your operator's real embed, in the environment you are editing, opened as a visitor on your own events. A visitor cannot trade, has no account and causes no wallet calls, so Portfolio shows its sign-in prompt and Buy asks the visitor to sign in. Nothing you do in the preview touches a player.
- Screens (on the left) switch the preview between Home, Event page, Buy ticket, Portfolio and Session ended. Event page and Buy ticket open an event your players see; if Curation shows your players none yet, they are unavailable. You can also move around inside the preview, and the list follows.
- Desktop, Tablet and Phone set the size of the page. Every device side by side shows all three at one scale, so you can compare them.
- Dark and Light switch the preview between the two modes. They show how the look reads in each, and do not change your Default mode setting.
- Seen as: Visitor / Player switches who the header is drawn for. Visitor is how the preview opens, and the header shows a Sign in button. Player draws the header for a sample signed-in player, with a sample name and balance, so you can see the balance, Deposit, notifications and account picture. The sample has no notifications, and its buttons do nothing. The pages stay what a visitor sees, and the studio says so above the preview.
- Compare puts your draft beside what production players see now, with each side named ("Your draft" and "Production now"). Above the two previews, a line names the settings your draft changes against production; choose one to go to it.
- Color blind shows the preview as a player with red-green color blindness (deuteranopia) sees it. It does not change the look.
- Full screen gives the preview the whole screen.
The preview needs the environment to be set up. If it is not, the studio says so and points you to Environments.
The Settings
The settings panel on the right holds the look in eight groups. Every change shows in the preview at once and is not saved until you save. Every setting shows one line saying what it changes and where players see it.
| Group | Settings |
|---|---|
| Brand | Brand mark: Name or Logo; for a logo, Logo, Dark logo and Logo height |
| Header | Header: Full, Slim or Hidden. Under Full and Slim, It shows has a switch for each part: Logo or name, Search, Notifications, Balance, Deposit and Account. Links to Activity, Leaderboard, Portfolio and Saved is In the header, Tabs in the page or Your site's menu. A Where things go note under them says what players find where |
| Colors | Brand color, Second color, Background tint and Yes and No colors. Click a color to drag in the picker, slide the hue, or type a hex such as #1A2B3C. Each has a link back to its default ("Use the default: Phoenix violet", "same as brand", "follows brand"). Yes and No colors is Standard, Colorblind or Custom, and Custom adds a Yes color and a No color |
| Type | Font: Geist, Google or File, with a sample line in the chosen font |
| Shape | Corners: Sharp, Soft or Round; Spacing: Comfortable or Compact |
| Layout | Layout: Standard or Board; Card style: Outcomes or Binary |
| Charts | Chart lines: Smooth, Straight or Steps; Chart fill: Lines only or Filled; Chart colors: Built in or Your own, with 2 to 8 colors |
| Mode | Default mode: Dark, Light or Device |
On a narrow screen the settings open from Edit look, and the screens run along the top.
A logo or font is checked as you type: the studio loads it the way the embed will, and shows Loads when it does. An address that is not https, an image that is not there, a Google family that does not exist, or a font file whose server does not allow other sites to use it is marked at its field, and you cannot save until it is fixed. Until an address is valid, the preview keeps showing the saved logo or font. A Custom Yes or No color without a hue (a gray, black or white), or Yes and No hues less than 40 degrees apart, is marked at its field the same way.
The Header Group
The Header group follows the rules on Header:
- Hidden offers only Tabs in the page and Your site's menu for the links. Hiding a header whose links were in it moves them to tabs in the page. Showing it again brings back the parts the saved header carries, or every part when the saved header is Hidden.
- A Full or Slim header with every part off and the links not in it is marked at its field as showing nothing ("choose Hidden instead"), and you cannot save it.
- Where things go lists, for a desktop and for a phone, where the header's parts, search, the links and the language picker end up under your choices. It adds that Leaders and Activity show only while they are on in Curation, Features.
- This look names the header in a few words, for example "Slim, no search, tabs in the page".
- To check how it reads for a signed-in player, switch Seen as to Player.
What Differs From the Default
- A setting that differs from Phoenix's default carries a dot. Its reset button puts that one setting back to Phoenix's default.
- Each group heading counts the settings in it that differ from the default.
- A setting changed since the last save says Unsaved, and its group says unsaved.
This Look
This look, at the top of the settings, lists every setting your look changes from Phoenix's look, with its value. Choose one to bring it into view and to take the preview to where it shows.
What Players See
Colors the embed adjusts for legibility are listed under their setting as Adjusted for legibility, with the shade players see on light and on dark surfaces. Yes and No colors and your own Chart colors also show Players see swatches for dark and light surfaces. The rules are on Your Look, and the Custom Yes and No rules are under Yes and No Colors.
The Preview Follows Your Edits
As you edit a setting, the preview moves to the screen where it shows:
- Yes and No colors open the buy ticket.
- Chart lines and Chart fill open the event page.
- Chart colors open an event with several markets. If your players are shown none, the studio says so.
- Layout and Card style show the home feed.
- Settings that show on every screen leave the preview where it is.
Undo, Redo and Reset
Above the preview, Undo and Redo step through your changes in this session (Ctrl or Cmd + Z, and with Shift to redo). A run of changes to one control, such as dragging a slider, is one step. Reset puts the whole draft back to the saved look. To put one setting back to Phoenix's default instead, use that setting's own reset button.
If you leave the page with unsaved changes, the back office asks whether to discard them.