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.

Since the font color of the buttons is white, the selected colors should not be too bright. This ensures good readability.

General

In addition to neutral shades of gray, two accent colors are used in the application. The primary color 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 color. Use the color selector to choose the colors or (if known) enter the RGB value of the color in hexadecimal format into the corresponding input fields.

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 colors in the logo are stored for the RGB color space. The color 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).

Adjust (if necessary at all) only one of the two sizes so that the logo is not distorted. In most cases, an adjustment of the height to 100% is sufficient to scale the logo in such a way that it fits completely into the display area. If the logo is then truncated on the right-hand side, try adjusting the width to 100% instead, without adjusting the height.

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 color 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 colors in the logo are stored for the RGB color space. The color space for print media CMYK causes problems in some browsers.

Please consider the following recommendations for the best user experience when using a background image:

  • 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-color area as background instead of an image, activate "Use background color" and select the desired color.

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.

Use the development tools integrated in your browser (usually shown by pressing F12) to determine the required CSS selectors based on the live preview.
Changes to CSS selectors

Please note that CSS selectors may change in future updates due to further development of the Cryptshare Web App. Therefore, check after each update whether changes to advanced CSS continue to work. Due to the complete freedom to make changes through advanced CSS, it is not possible for Pointsharp GmbH to ensure that after each update these changes will continue to be functional.