KB0032: Using a Custom Style Sheet

It’s possible for an administrator to alter some aspects of the look and feel of Qualoupe by creating a custom style sheet on the server. This is a CSS file, the same as would be used for styling a website. Qualoupe looks for a specific CSS file each time an application loads, and this can include rules that override the standard appearance of the application.

Creating a Custom Style Sheet

Qualoupe doesn’t ship with a custom style sheet, so you’ll need to create one if you wish to use this feature. Within your Qualoupe installation directory should be a subdirectory called includes. Create a blank file in there called custom_page_style.css – if one already exists then simply use that file instead, appending code to the end of it as necessary.

For example, if your Qualoupe installation directory is C:\inetpub\wwwroot\qualoupe you will need to create C:\inetpub\wwwroot\qualoupe\includes\custom_page_style.css

Add Some CSS

Having created the file, you can now add some CSS to alter the styling of certain aspects of Qualoupe. Below you can find a selection of code snippets; copy and paste any that you need into the CSS file, leaving a blank line or two between each of them.

1) Reduce animations

By default Qualoupe uses some animations to fade parts of the UI in and out. This can cause apparent stuttering or jerking problems when used with a remote desktop environment such as Citrix. This snippet reduces the fade time to a minimum so that Citrix does not have to send so many updates.


/* Effectively disable animations to make things smoother under Citrix */
vbox[anonid="initial-blocking-layer"], [anonid="blocking-layer"], vbox[anonid="busy-layer"], tfs_lightbox {
transition-duration: 0.1s;
}

2) Changing the login screen background

Custom Qualoupe login screen

Some customers like to replace the background image on the login screen with a company logo or other image. This can be done using the CSS background property, or by using any of the background-* properties (such as background-image or background-color) to set individual aspects of the background.

See the background documentation at the Mozilla developer site, and follow the links to the individual properties there for a more detailed breakdown of the options.

Note: You should always include a CSS color value as part of the background property to ensure the application can fall back to a known colour if the image fails to load. If you use a PNG image with transparent or translucent areas, this colour will also show through (recommended for non-rectangular logos). JPEG images are also allowed, but this format does not support transparency.

If you use an image you should place it in the Qualoupe “images” directory, and modify the snippet to point to the correct file name. Alternatively you can use a full http URL to an image on another machine.

Examples:

a) Setting a fixed colour background


/* Use *one* of the following lines to set a fixed colour background. */
/* The only difference between them is the way that the colour is specified. */
.login-background { background: lightblue; }
.login-background { background: #ddf; }
.login-background { background: #ddffdd; }
.login-background { background: rgb(255, 230, 255); }

b) Setting a fixed colour background with a logo in the bottom right


/* Set a fixed colour background and logo. */
.login-background { background: #ddf url("../images/logo.png") no-repeat bottom right; }

c) Setting a fixed colour background with a full-sized image


/* Set a fixed colour background and full-sized image. */
.login-background { background: #ddf url("../images/background.jpg") center/cover; }

d) Setting a gradient background


/* Set a 45 degree gradient background running from light blue to white. */
.login-background { linear-gradient( 45deg, lightblue, white); }

/* Set a radial gradient background running from light blue in the middle to white at the edge. */
.login-background { radial-gradient(lightblue, white); }

e) Setting a gradient and a logo (or multiple images)

A CSS gradient is treated as an image, so to use it with a logo requires you to effectively stack multiple images on top of each other. This can be done in CSS by comma-separating the image specifications, running from the topmost image to the one on the bottom.

/* Set a 45 degree gradient background with a logo on top of it. */
.login-background {
background: url("../images/logo.png") no-repeat bottom right,
linear-gradient(45deg, lightblue, white);
}

3) Changing the favourites tab background

Custom favourites tab with gradient and logo

On the main Qualoupe home screen, each tab can have a different coloured background and may optionally include an image positioned in one of 9 locations. Most tabs are set by the administrator via the Roles Manager, providing a consistent environment across users.

The Favourites tab (the left-most tab on the screen) is a little different. This holds a user-specific set of icons, allowing users to add and remove them at will so that they have convenient access to the applications they use most. As this is a more “personal” screen, users are free to change the background colour and/or image via a right-click context menu.

If you wish to disable the ability for users to set their own backgrounds on the Favourites tab, and instead enforce a single design for all users, you can do so with the following code. Note that the options here are similar to those for setting the login screen background, above, with the addition of the “!important” keyword to the end of the line.

Examples:

a) Setting a fixed colour background


/* Use *one* of the following lines to set a fixed colour background. */
/* The only difference between them is the way that the colour is specified. */
[name="launchgroup-Favourites"] { background: lightblue !important; }
[name="launchgroup-Favourites"] { background: #ddf !important; }
[name="launchgroup-Favourites"] { background: #ddffdd !important; }
[name="launchgroup-Favourites"] { background: rgb(255, 230, 255) !important; }

b) Setting a fixed colour background with a logo in the bottom right


/* Set a fixed colour background and logo. */
[name="launchgroup-Favourites"] { background: #ddf url("../images/logo.png") no-repeat bottom right !important; }

c) Setting a fixed colour background with a full-sized image


/* Set a fixed colour background and full-sized image. */
[name="launchgroup-Favourites"] { background: #ddf url("../images/background.jpg") center/cover !important; }

d) Setting a gradient background


/* Set a 45 degree gradient background running from light blue to white. */
[name="launchgroup-Favourites"] { linear-gradient( 45deg, lightblue, white) !important; }

/* Set a radial gradient background running from light blue in the middle to white at the edge. */
[name="launchgroup-Favourites"] { radial-gradient(lightblue, white) !important; }

e) Setting a gradient and a logo (or multiple images)

A CSS gradient is treated as an image, so to use it with a logo requires you to effectively stack multiple images on top of each other. This can be done in CSS by comma-separating the image specifications, running from the topmost image to the one on the bottom.

/* Set a 45 degree gradient background with a logo on top of it. */
[name="launchgroup-Favourites"] {
background: url("../images/logo.png") no-repeat bottom right,
linear-gradient(45deg, lightblue, white) !important;
}

4) Only allow the currently loaded record to be printed

Print warning

By default the Qualoupe print dialog allows you to choose between printing no records, the currently loaded record, or all the selected records. These options cater to different types of report. In many cases, however, it’s only ever necessary to print the currently loaded record, so the other options can be removed using this CSS (note that this will remove the options from every print dialog throughout Qualuope):


/* Hide the "No records" and "Selected records" options in the print dialog, to only allow printing the current record */
[anonid="radio-no_records"], [anonid="radio-selected_records"], [anonid="vbox-tree-print_records"] {
display: none;
}

If you don’t wish users to print with the “No Records” option, it can be useful to notify them if they click on the Print button with no record loaded. This snippet will insert a message into the print dialog in that situation:


/* Display a warning if the user brings up the print dialog with no record loaded */
[anonid="lb-print_report"] radiogroup[value="0"]::before {
content: "Please load a record before printing";
display: block;
font-size: large;
font-weight: bold;
color: red;
}

5) Changing the display of limit violations

Custom limit compliance

Qualoupe defaults to indicating limit violations by “candy striping” the background of the row with a light shade of orange for warning limits, and a light shade of red for error limits. The stripes are implemented as CSS repeating linear gradients, so you can use the custom CSS file to override them with something else. For example, to get a stronger shade of red on your error limit violations, use this snippet:


.LC3:nth-child(odd) {
background: repeating-linear-gradient(-45deg, rgba(255,128,128,0.8), rgba(255,128,128,0.8) 21px, rgba(255,128,128,0) 21px, rgba(255,128,128,0) 42px) !important;
}

.LC3:nth-child(even) {
background: repeating-linear-gradient(-45deg, rgba(255,128,128,0), rgba(255,128,128,0) 21px, rgba(255,128,128,0.8) 21px, rgba(255,128,128,0.8) 42px) !important;
}

Alternatively, to turn off the stripes altogether, and just use solid shades of red for odd and even lines in the results entry area, use this:


.LC3:nth-child(odd) { background: #fcc !important; }
.LC3:nth-child(even) { background: #faa !important; }

You can replace “.LC3” with “.LC2” to affect the warning limits. You can even use “.LC1” if you wish to style the rows of results that have limits in place, but which have all passed successfully.

6) Changing the display of invalid fields

Custom invalid field

Many fields in Qualoupe include automatic validation to ensure that only acceptable data are entered. If an invalid entry is made, the background of the field changes to a light red (salmon pink) colour, and the outline of the field is rendered with a dashed line (to aid colour blind users who may not otherwise be able to distinguish the background colour).

If you wish to change the display of invalid fields to make them more obvious, you can use a snipped such as this one, which gives them a yellow background and thick red border (note that using a border thickness other than 1px can cause the fields to move a little as they change state):


/* Give invalid fields a yellow background and solid thick red border. */
[matchesRegEx='false']>tfs_xbl_lookupbox>hbox, [matchesRegEx='false']>tfs_xbl_multiline_textbox>vbox {
background: yellow;
border: 3px solid red;
}

Conclusion

This document only just scratches the surface of what is possible with some custom CSS in Qualoupe. If you’re already familiar with CSS there should be plenty here to get your teeth into, and we’ll add more over time as other useful examples spring to mind.

markc

Comments are closed.

Request a Demo