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.


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
.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!