Versions Compared

Old Version 7

changes.mady.by.user Lynne Wilton (Unlicensed)

Saved on

compared with

New Version Current

changes.mady.by.user Elliot Dooleysmith

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This is an example of modifying the appearance of a Qsign screen:
Image RemovedImage Added

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

    In this example, we will change the colour of the border on the custom header.

    The default stylesheet for

    floor plans

    QSign is '

    Qsign_1024'.
  2. 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;
    }
  3. Change the colour of the border to green by changing 'border-color: #ADADAD;' to 'bordercolor: #00FF00;'.

    QSign'.

    Expand
    titleChange 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:

    Code Block
    .fa-home {
	color: green !important;
}



    Expand
    titleChange the colour of the 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:

    Code Block
    .tblHeaderList {
	color: white;
	background-color: #F6931E;
}



    Expand
    titleChange 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:

    Code Block
    .carousel-inner{
    background-color: lightblue;
}



    Expand
    titleChange 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:

    Code Block
    .tblMeetingList>thead>tr>th {
	color:red;
}



    Expand
    titleChange 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:

    Code Block
    .tblMeetingList>tbody>tr>td {
	color:red;
}



    Expand
    titleChange 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:

    Code Block
    .tomrw td {
	color:red;
}



    Expand
    titleChange 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:

    Code Block
    .tblMeetingList th, .tblMeetingList tr {
	border-bottom: 2px solid blue !important;
}



    Expand
    titleChange 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:

    Code Block
    . screenMessage {
	color: green;
}



    Expand
    titleChange 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:

    Code Block
    .left.carousel-control {
	color: yellow;
}

.right.carousel-control {
	color: yellow;
}



  4. Click Save.
  5. Review the effect of the changes by returning to QSign Profiles and click  in the profile to preview the display.