Skip to end of metadata
Go to start of metadata




Customizing the Web Application Design

About Language Packages

The language section gives an overview about installed languages. The language that is highlighted in bold letters is the default language.
This means, if a user opens the website with a browser using a language that is not installed in Cryptshare, the default language will be used.
The pre-configured default language is English.

Downloading default language packs

Default language packages can be downloaded here.

User Interface Design (Version 3)


The information in this section is only relevant for Crypshare Server version 3. X. X. For newer versions, including 4.0.0 and onwards, please refer to the following section (see below).

The User Interface Design Package changes the look of the User Interface. You can visit our Web Application Designer on

https://www.cryptshare.com/en/support/user-interface-designer.html

to create an individual package for your installation of Cryptshare.

The Web Application Design Package downloaded from our website can then be uploaded and installed in this section.

Some examples on how other customers enhanced their Web-application:

Customizing the Design of the User Interface

Web Application Designer (as of Version 4)

Starting with Cryptshare Server version 4.0.0, you can customize the user interface design directly in the administration interface.

Importing web appilcation design packages from the previous "Web Application Designer" (see above) is no longer possible. Web application packages that have already been installed (or contain customizations) are carried over to the greatest extent when updating to version 4.0.0. Please check whether manual adjustments are still necessary after the update has been performed.

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.


Table of content



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.

Email Layout

This new section provides an interface for the customization of the HTML Email Layout. It is possible to change the color and the application logo in the upper left corner of each email

All email notifications in Cryptshare have an application logo in the upper left corner of the email header. This logo can be replaced by your own logo.To replace the logo, simply upload a new logo here, according to the requirements listed below.You can see the result in the email preview at the bottom.

Prerequisites

  • Only PNG graphics are allowed
  • The maximum width of the image should be 200 pixels
  • The color space should be set to RGB


Remark

Under certain circumstances, the email logo can not be exchanged directly and the process terminates with an error message.

In this case you should restart the Cryptshare server and try again.
Please check also the above prerquisites.
If this does not lead to the desired result, please read this knowledgebase Article: Email logo cannot be uploaded on the Administration Interface

Email Colors

For email notifications there are 7 pre-defined color settings which can be changed by using the respective color pickers.

Color Pickers

Color Selection

Select the preferred color by either clicking on it using your mouse or entering a HEX value into the input field below.

Reset

Use the reset button of each color picker to restore the color which was saved at last.

Color Sections within the Email

Header 1

Right now this header is only used for the recipient notification. All other notifications do only use the setting for Header 2.

Header 2

This color setting is used throughout all email notifications as background for the title of the email.

Background

The content of the email is centered. The background setting sets the color for the surrounding area of the main content.

Content Background

The background color sets the background of the email content.

Text

The main color setting for the message text and other text pasages.

Foot Left

Sets the background color for the left section within the email footer.

Foot Right

Sets the background color for the right section within the email footer.

Default Colors/Reset to Defaults

Clicking the button 'Default Colors' will restore the default Cryptshare Color Settings.

HTML Emails are highly customizable. Please read the chapter for HTML Email Templates for details.

Custom Links

This view allows you to create and edit individual custom links for each language, displayed as entries of the page menu in the application.

A custom link has the following properties:

  • Activated / Not activated: Determines whether the menu item is displayed in the menu. Disable a link to hide it temporarily or permanently without removing it altogether. This is also interesting for entries that are not removable ("Help", see below).
  • Menu label: The text displayed in the menu. Please note that too long a text may affect the menu layout and ease of use. Choose the most meaningful and short caption possible.
  • Target URL: The URL that is opened when you click on the menu item. User-defined links are always opened in a new browser tab or (depending on the configuration of the browser) in a new browser window. A URL consists of an Internet address and the preceding protocol, such as http://www.cryptshare.com.
  • Assigned language: A tab is displayed for each language that has been installed for the user interface. Custom links are managed separately for each language. In this way, you can present different links to the user, depending on the language, which, for example, refer to different variants of an external Web page.

To create a new entry, click the "Add link" button. The new link is added to the list and can be edited directly (the label and target URL are required).

The menu label and the target URL of existing entries can be edited by clicking on the  button. Both fields are required, the target URL must also have a valid format (see above). Click  to complete editing, or  to discard the changes.

To delete an existing entry, click on the trashcan icon . After saving the changes (see below) the entry will be permanently removed from the menu of the respective language.

By default, a "Help" link is created for each installed language, which refers to the Cryptshare documentation at https://wiki.cryptshare.com. This link cannot be edited or deleted. If you would like to integrate your own "Help" link into the application, you can deactivate the default entry with the checkbox "Active?" (deactivate) and create your own entry instead.

The arrangement of custom links in the application menu can be customized using the buttons  and .

Please note that the completed editing is only saved permanently when you click on the "Save changes" button.

Custom Link Example: Download Link for Cryptshare for Office 365 & Outlook

You can use the custom links feature to integrate a link to the Cryptshare for Office 365 & Outlook Installer into the User Interface to allow your users to quickly get the latest installer.

To add this, please follow these steps:

  1. Go to the "Custom Links" section of the "Customization" page.


  2. Switch to the tab with the language you want to create the link for.


  3. Click "Add link".


  4. A new entry will appear where you can enter the label, for example "Cryptshare for Office 365 & Outlook Installer", and the link, which should link to a copy of the installer that you placed on your server.

  5. Save the new entry by clicking on the check mark button, followed by clicking on "Save Changes".



  6. If you want to add the link to multiple languages, repeat step 2 to 5 for the other languages.

The link will be visible and usable by all users with access to the User Interface; if you want the installer to be only available to internal users, this approach does not work.