Style Toolbar
The Style Toolbar is used to customize the appearance and position of components across Games, Game Centers, and Surveys.
The options available in the toolbar depend on the component you are editing. Only styling options supported by that component will be shown.
Typography
For text-based components, you can customize settings such as:
- Font
- Font size
- Bold
- Text alignment
- Line height
- Letter spacing
- Text color
Text color supports solid colors.
Shape and positioning
Shape settings control the size, position, and appearance of the component.
Depending on the component, you can adjust:
- X and Y position
- Width and height
- Z-index
- Corner radius
- Padding
- Stroke
- Drop shadow
- Fill
Position and size values can be entered using either pixels (px) or percentages (%).
Fill
Fill controls the background of the component.
Available fill types may include:
- Solid color
- Gradient
- Image
Image fill is only available for supported components. When available, you can upload an image to use as the component background.
Animation
Combine multiple filters to narrow down the Game Library and quickly find games that match both your branding needs and engagement goals.
You can add a simple entrance animation to supported components.
Choose:
- How the component enters pick from 5 animations
- Which direction it animates from
- Animation duration in ms
Use animations to add movement without changing how the component functions.
Custom CSS
For more advanced customization, you can add your own CSS in the CSS field.
Custom CSS gives you additional control when the standard Style Toolbar settings are not enough.
Import styling
If you have already styled a similar component, you can reuse those settings instead of recreating them.
- Open the options menu in the Style Toolbar.
- Select Import Settings.
- Choose the game you want to import styling from,
the game needs to have that component for it to be styled.
The available styling settings will be copied to the current component.