How to Set the Look of the Game?

Published · Updated

The shared look of the guest screens is set in one place: Game Screens → Main. The design style, colors, logo, background and the place of the lock icon you choose here apply to all screens at once, from Welcome to Scoreboard. Each screen's own tab only holds the background, logo place and texts specific to that screen. This article explains every section in the Main tab and how a screen overrides the value that comes from Main.


i
In short
  1. Design Style sets the shape language and the font, UI Colors sets the palette. The two are independent.
  2. Default Logo is off in a new event; turn the switch on after uploading the file. The logo's place is set with Logo position in each screen's tab.
  3. Default Background takes an image or a video. Background Opacity says how prominent the image is; the default is 20%.
  4. The Dashboard Icon is the lock icon that lets you get back to the settings; its default place is the bottom right.
  5. If you touch Background or Background Opacity in a screen tab, that screen detaches from Main.

Preview and reset


The Screen Preview at the top of the tab shows the style, colors, logo, background and lock icon you chose right away. Tapping an element in the preview scrolls the page to that element's setting. Full Screen enlarges the preview; you close it by tapping the empty area or with the X in the corner.

Reset to Defaults puts everything in this tab back to the start: the style, the palette and the twelve color rows, the default background, the opacity and the lock icon. First the question Reset this screen? appears; you confirm with Reset. The logo is not part of this reset; to remove the logo, turn its own switch off. The button of the same name in the screen tabs only resets that screen; it does not touch the settings here.

Design Style


There are five cards; one is selected. The style changes the corner rounding, borders, shadows and font. There is no separate font setting; the font comes with the style. The colors do not change; they are chosen separately below.

StyleLook
FrostBacklit frosted glass. Soft, rounded, translucent. This is the one selected in a new event.
Arcade NightArcade token. Cut corners and a misregistered print edge.
ClayModelling clay. Inflated, borderless; volume comes from shadow.
BrutalPoster print. Thick outline and a hard, blur-free shadow.
PixelOld console screen. Stepped edges and scanlines.

UI Colors


The ready-made palettes sit at the top: Purple Dream (default), Ocean Breeze, Sunset Glow, Dark Mode, Minimal Light and Custom. Tapping a palette writes all six basic colors at once and returns the six product-specific rows (the question and option colors) to automatic. In the rows below you can change each color one by one; in the picker that opens when you tap the box, you choose a solid color or a gradient. Changing a single color does not change the selected palette card; the Custom card is only a marker, it does not touch the colors.

ColorWhere it is used on the guest screen
BackgroundThe screen's base. If there is no background image or it is transparent, this color shows. On a light base the text is automatically black, on a dark one white.
Primary TextTitles, the accent color, progress lines and the automatic fill of the option boxes.
Secondary TextSubtitles and the second accent color.
Button BGThe main buttons: Touch to start, Continue, Play again, Back.
Button TextThe text of these buttons.
CountdownThe shrinking time bar at the top of the game screen.
Question TextThe text of the question. If empty, black or white depending on the base.
Option TextThe text of the options. If empty, black or white depending on the base.
Correct AnswerThe highlight of the correct answer. If empty, green.
Wrong AnswerThe highlight of the wrong answer. If empty, red.
Question BoxThe box behind the question text. If empty, no box is drawn.
Option BoxThe fill of the option buttons. If empty, a slightly transparent version of the Primary Text color.

The last six rows only affect the game screen. After you choose a ready-made palette, these rows are empty and the screen is drawn with automatic values; only fill in what you need.

Default Logo


Upload a JPG or PNG file into the Logo field and turn on the switch next to it. In a new event the switch is off; even if you upload a file, the logo is not shown while the switch is off. The logo is the same file on all guest screens. Its place is set per screen: each screen tab (Call to Action, Input, Game, Thanks, Scoreboard) has a Logo position grid, the default is Top center. The pause screen's logo is set separately in the Pause tab. A video file is not shown as a logo.

Default Background and opacity


Upload an image or video into the Background field. In a new event the switch is on, and since no file is selected, a built-in sample image is used. If you upload your own file, all screens show it; video plays muted and in a loop. If you turn the switch off, no image remains on any screen; the screens are painted only with the Background color.

The Background Opacity slider says how prominent the image is: 100% is the image itself, 0% is invisible. The default is 20%; at this value the image looks faded and the base color dominates. If you want the photo to look clear, raise the value. While the background switch is off, the slider is disabled.

Dashboard Icon


This is the lock icon in the corner of the guest screens; when tapped, it asks for the PIN and returns to the settings. You choose its place from a 3×3 grid; in a new event it is Bottom Right. The switch below it removes the icon completely (Off); then you can only return to the settings with F11 or F12 on a keyboard. The visibility options are 100%, 50%, 25% and 0%: 0% makes the icon invisible but its spot works; tapping that corner 5 times within 3 seconds opens the PIN window. The same icon sits in the same place on the pause screen too.

The sound setting is not in this tab; the correct, wrong and time-up sounds are turned on and off with the Session → Game → Sound effects (correct / wrong / time up) switch.

Detaching a screen from Main


The five screen tabs carry the same skeleton: the preview at the top, then Content position, Logo position, Text alignment, Texts, and at the very bottom Background and Background Opacity. The last two override the values in Main for that screen only:

  • Background: as long as you do not touch it, the screen shows the background from Main. If you upload your own file, only that screen changes. If you turn the switch off here, only that screen is left without an image; even if the background in Main is on, it does not come to that screen.
  • Background Opacity: the value in Main applies until you touch the slider. Once you touch it, that screen uses its own value and no longer follows changes in Main. There is no way to reattach it; if you like, you set the number in Main to the same value by hand.
  • Logo position: the logo file comes from Main, its place is chosen here.
  • Colors, style and the lock icon do not change per screen; they always come from Main.

The Reset to Defaults in a screen tab only resets that screen's background, opacity and texts; the position and alignment settings stay. The Pause tab has its own Custom Background and Background Opacity settings; if left empty, the pause screen also uses the background from Main. For the text settings of the screen tabs, see the article How to Set the Screen Texts and Buttons?

!
Common mistakes

Uploading a logo and not turning the switch on: in a new event the switch is off, the logo is not shown.

Thinking the background image "did not arrive": at 20% Background Opacity the image is faded. Raise the value.

Choosing a light palette such as Minimal Light and setting Question Text to white by hand: the text is unreadable. Leave the row empty; the color is chosen by itself according to the base.

Expecting to change the opacity from Main after touching it in a screen tab: that screen now uses its own value.

Turning off the Background switch in a screen tab and expecting the image from Main to come: a screen that is off stays without an image.

Setting the Dashboard Icon to Off on a tablet: without a keyboard you cannot get back to the settings.

Was this article helpful?

Not sure where to start? We can help.

Tell us about your project. Our team will help with the next step.

By submitting, you agree to our Terms and Privacy Policy.