Looking to style your Digital Signage to look more in alignment with your Corporate Branding? The CSS Editor on the Digital Signage allows you to control the style of the overall Signage or specific slides.

IMPORTANTThis is an advanced, and technical feature – use only if you have CSS Knowledge.

Spread The Love

Where to find the CSS Editor

1) Go to the Digital Signage in the CustomerGauge application. Menu -> Setup Section –> Digital Signage

2) Edit the signage you wish to style (you may want to create a temporary copy if you don't want to work on a running Signage)

3) Click the CSS Editor tab while editing your Signage

                    Click the CSS Editor tab while editing your Signage

Styling slides by sequence

To make it a little easier to target certain slides to style separately from each other, we've introduced CSS classes for each slide in a "sequence".

A sequence is the order of the slides in which they're being presented.

The CSS classes of the start counting at 0, so you'd target slides in the following manner:

CSS class name
Slide being affected
1st slide
2nd slide
3rd slide

Note: the downside of this approach is that if you change the order of your slides, you'd need to change your CSS to reflect those order changes.

Styling slides by slide type

If you'd rather define your CSS by targeting specific slide types, you can do that as well.

Look up the CSS class name in the table below to target a specific slide type.

CSS class name
Slide type
Comment Carousel
Custom HTML
Digital Clock
NPS Trend
Sent Surveys
Survey Results

Do note: "! important" is important

Due to the continuous nature of the Digital Signage, slides are created on the fly, and the CSS may not "stick" due to the elements being rendered later (and options being applied, etc.).

If you want to ensure that your style is always applied, make sure you append your CSS declaration with "! important".

So for example, let's say you want all your slides to have a black background color:

.slide {
    background-color: black;

To ensure your black background, simply append "! important" after your declaration:

.slide {
    background-color: black ! important;

Some Examples

In need of inspiration, or just curious what you can achieve? Have a look at some screenshots below!

                    A modified Comment Carousel, focusing on the comment alone

                    There is no stopping your creativity!

                    Practically every slide can be styled!

                    You can even re-arrange elements to give a completely different look!