Player Colors & Styles

Customize the design and branding of the player colors, dialog colors, and the custom logo

Updated over a week ago

Spotlightr allows you to completely change and customize the player style to match your brand. The branding options for the video player colors, overlay/link/dialog colors, and custom logo are all found in your Theme.

To configure these features navigate to your Theme >> Player Colors & Logo.

And you'll see three options:

Player Colors

First let's review the Player colors section. Once you click on that you'll see there are 4 color controls:

These can be edited by clicking on the circular color picker next to each one. When you click on one you will get your color picker.

Be aware that in addition to picking your color you can also adjust the transparency of each. The first horizontal bar is the color picker. And the second horizontal bar is the transparency which is pointed to here:

Player Icons & Text

This is the white color that you see by default when you create a new Theme. This is the color for the middle of your play button as well as any text/number and icons in your video controls:

Player Controls Background

This is the background of the Play button and the background of the player controls at the bottom. When you create a new theme by default this is set to transparent so no color is showing on the play button background. There is only the white color set for Player icons & text as shown above.

If I change this color to a blue color it will result in this:

Player Bar

This is the color of the progress bar. Here I've changed it to an orange color:

Player Highlight

This is the color of the gradient that shows at the top and the bottom of the player when you hover over the video.

If you want to completely remove it, just set the transparency control all the way to the left as shown here:

Dialog colors

Next, by clicking on the dialog colors you'll get a whole new set of color configurations:

These are the colors of all of your forms, buttons, quiz questions, links, overlays, etc. across a variety of Spotlightr features like overlays, quizzes, galleries, and more.

You can edit and experiment with the colors here to match your brand palette and you'll see an example of how it will look on the various overlays and modals throughout the application.

Custom Logo

We have a dedicated article for this feature. With this feature you can add your own logo to appear right on your videos in one of the corners.

Did this answer your question?