CSSCurrent en:Web Application Designer

Aus Cryptshare Documentation
Version vom 8. Oktober 2021, 14:34 Uhr von imported>Frorathm
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu:Navigation, Suche



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

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


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