CSSCurrent en:Web Application Designer
Web Application Designer
You can customize the user interface design directly in the administration interface. Simple adjustments can be made in basic mode ("Basic" tab). Further adjustments, for which special technical knowledge is required, can be made in the advanced mode ("Advanced" tab). Click "Apply" to save changes and to instantly activate the adjustments in the web application.
Live Preview
A live preview of the design is displayed on the right side of the main area. This preview contains a selection of display and input elements, enable to see the effects of the adjustments. All changes are immediately displayed in the live preview.
Basic
In the "Basic" section, it is possible to easily change the look of the web application's user interface without any further technical knowledge. In most cases, these options are sufficient to adapt the application according to your corporate design.
General
In addition to neutral shades of grey, two accent colours are used in the application. The primary colour is used to highlight the main actions of a page, such as the most important buttons. Subordinate actions or additional functions are accentuated by the secondary colour. Use the colour selector to choose the colours or (if known) enter the RGB value of the colour in hexadecimal format into the corresponding input fields.
Logo
The application header provides an area to display the logo. The default one is the Cryptshare logo, which you can replace with your own logo. The following file types are valid:
- JPEG (*. jpg)
- PNG (*. png)
- SVG (*. svg)
Make sure that the colours in the logo are stored for the RGB colour space. The colour space for print media CMYK causes problems in some browsers. To adjust the display size of the provided logo, the width and height of the image can be specified relative to the available space (in %) or absolute (in pixels). The available space for the logo has a width of 540 px and a height of 70 px. To fit your logo to this space activate the checkboxes "Adjust width" or "Adjust height". If only one of the two dimensions is adjusted, the other is determined by the aspect ratio proportional to the adjusted size. If both dimensions are not adjusted, the logo will be displayed in its original size (possibly as a cut-out if the available space is not sufficient).
The logo can be aligned left, right or centred within the available area. To do this, select the corresponding option in the "Position" selection list.
Background
Either a colour or a background image can be used as background for the application (that is the area displayed around the application frame). Select a file and click "Upload" to set it as the background image. The following file types are valid:
- JPEG (*.jpg)
- PNG (*.png)
- SVG (*.svg)
Make sure that the colours in the logo are stored for the RGB colour space. The colour space for print media CMYK causes problems in some browsers.
- Due to the standard colors of the application, darker images are more suitable than brighter ones.
- Set resolution and compression in a way that the file size is small enough to handle slower (e. g. mobile) connections. We recommend a maximum file size of 100KB.
- Select an image with few details or apply a blur filter to it so that the background does not distract from the actual application.
If you want to use a single-colour area as background instead of an image, activate "Use background colour" and select the desired colour.
Advanced
In this mode, additional customizations can be made using custom CSS rules. If case of conflicts, these custom rules overwrite the default stylesheets as well as the adjustments made in the "Basic" section.