This is an example of modifying the appearance of a Qsign screen:
Locate the stylesheet to be changed, reference to the diagram above will indicate which class or ID needs to be altered to achieve the desired effect.
The default stylesheet for QSign is 'QSign'.Expand title Change the colour of the home icon to green. Locate the ‘.fa-home’ class in the style sheet content. If ‘.fa-home’ is not found, then one can be created at the end of the existing content:
.fa-home {
color: green !important;
}
...
Expand Expand Expand Expand Expand Expand
...
title Change the colour of
...
the
...
.fa-home {
color: green !important;
}
...
header to white and background color to amber. Locate the ’.
...
tblHeaderList’ class in the style sheet content. If ’.
...
tblHeaderList’ is not found, then one can be created at the end of the existing content:
.tblHeaderList {
color: white;
background-color: #F6931E;
}
...
Expand title Change the background colour of the List to lightblue. Locate the ‘.carousel-
...
inner’ class in the style sheet content. If ‘.carousel-
...
inner’ is not found, then one can be created at the end of the existing content:
.carousel-inner{
background-color: lightblue;
}
Expand title Change the text colour of the ‘List’ header to red. Locate the ‘.
...
tblMeetingList>thead>tr>th’ class in the style sheet content. If ‘.
...
tblMeetingList>thead>tr>th’ is not found, then one can be created at the end of the existing content:
.tblMeetingList>thead>tr>th {
color:red;
}
Expand title Change the text colour of the meeting list to red. Locate the ‘.
...
tblMeetingList>tbody>tr>td’ class in the style sheet content. If ‘.
...
tblMeetingList>tbody>tr>td’ is not found, then one can be created at the end of the existing content:
.tblMeetingList>tbody>tr>td {
color:red;
}
Expand title Change the text colour of ‘Tomorrow’ header in the list to red. Locate the ‘.tomrw
...
td’ class in the style sheet content. If ‘.tomrw
...
td’ is not found, then one can be created at the end of the existing content:
.tomrw td {
color:red;
}
Expand title Change the line colour of meeting separator to blue. Locate the ‘.tblMeetingList th, .tblMeetingList
...
tr’ class in the style sheet content. If ‘.tblMeetingList th, .tblMeetingList
...
tr’ is not found, then one can be created at the end of the existing content:
.tblMeetingList th, .tblMeetingList tr {
border-bottom: 2px solid blue !important;
}
Expand title Change the live message colour to green. Locate the ‘.
...
screenMessage’ class in the style sheet content. If ‘.
...
screenMessage’ is not found, then one can be created at the end of the existing content:
. screenMessage {
color: green;
}
Expand title Change the navigation button colour to yellow. Locate the ‘.left.carousel-
...
control’ and ‘.right.carousel-
...
control’ class in the style sheet content. If ‘.left.carousel-
...
control’ and ‘.right.carousel-
...
control’ is not found, then one can be created at the end of the existing content:
.left.carousel-control {
color: yellow;
}
.right.carousel-control {
color: yellow;
}
...
- Click Save.
- Review the effect of the changes by returning to QSign Profiles and click in the profile to preview the display.
- Locate '#customheader' ID in the stylesheet content:
#customheader {
margin: 0px;
border-style: solid;
border-width: 1 0 1 0;
border-color: #ADADAD;
position: relative;
width: 100%;
top: 10px;
text-align: center;
float: left;
} - Change the colour of the border to green by changing 'border-color: #ADADAD;' to 'bordercolor: #00FF00;'.
- Click Save.
- Review the effect of the changes by returning to QSign Profiles and click
in the profile to preview the display.