Using CSS to customize your Digital Signage
Modified on: Wed, 28 Feb, 2018 at 4:44 PM
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.
IMPORTANT: This is an advanced, and technical feature – use only if you have CSS Knowledge.
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 |
| .slide_0 | 1st slide |
| .slide_1 | 2nd slide |
| .slide_2 | 3rd slide |
| etc. | |
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 | Comment Carousel |
| #custom_html | Custom HTML |
| #current_time | Digital Clock |
| #firefighting | Fire-fighting |
| #nps_gauge | Gauge |
| #show_image | Image |
| #nps_trend | NPS Trend |
| #nps_score | Score |
| #sent_surveys | Sent Surveys |
| #survey_results | 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!
Did you find it helpful? Yes No
Send feedback