Setting a Background Image and Color with Themes

knlowledgeart

Setting a Background Image and Color with Themes

In Ceros, you can set experience level themes that will be carried across your entire experience. This includes background colors and images, page advance arrows, menu displays, and carousel settings.

theme panel

Select Theme from the menu in the top-right corner of the Ceros Studio to open the panel.

Tools in Theme Panel

Background Color: Sets the color that appears behind each page and outside the canvas dimensions if displayed in a larger space. You can select your background color using the built-in color picker or by entering Hex, RGB or CMYK values.

Background Image: Sets an image that appears behind each page and outside the canvas. Ceros supports a maximum background image dimension of 2048 x 2048 pixels. The image will automatically scale to fill the entire screen and will remain pinned in the viewport.

Chrome Color: Defines the background of arrows, menus and video controls that appear throughout your experience.

Icon/Text Color: Defines the foreground color of arrows menus and video controls.

Show Arrows / Show Menu: Where you can choose to show or hide the navigation arrows and top menu bar of your experience.

Navigation arrows will only display on multi-page experiences. If you remove the arrows, don’t forget to provide users will an alternate form of navigation for your multi-page experience.

Note: Hiding the menu will also hide the social media sharing widget.

Carousel Settings: Allows users to navigate back to the first page by advancing forward from the last page. Additionally, you can create a slideshow functionality by choosing the auto-advance option and specifying how many seconds to display each page.

Reset to Default: Because sometimes you just need to start over.

Helpful Tips

  • It’s important to make sure Chrome and Icon colors contrast. These elements will appear “invisible” if the background and the foreground are the same color.
  • Proceed with caution when using Auto-advance. Most users prefer to control their own pace.
  • When using this feature, be sure the content on each page can be easily understood in the time allotted.