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.
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.
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.
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.
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.
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).
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.
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.
- 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.
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.
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
Email Header Logo
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.
- Only PNG graphics are allowed
- The maximum width of the image should be 200 pixels
- The color space should be set to RGB
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
For email notifications there are 7 pre-defined color settings which can be changed by using the respective color pickers.
Select the preferred color by either clicking on it using your mouse or entering a HEX value into the input field below.
Use the reset button of each color picker to restore the color which was saved at last.
Color Sections within the Email
Right now this header is only used for the recipient notification. All other notifications do only use the setting for Header 2.
This color setting is used throughout all email notifications as background for the title of the email.
The content of the email is centered. The background setting sets the color for the surrounding area of the main content.
The background color sets the background of the email content.
The main color setting for the message text and other text pasages.
Sets the background color for the left section within the email footer.
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.
This view allows you to create and edit individual custom links for each language, displayed as entries of the page menu in the application.
About Custom Links
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.
Managing Custom Links
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.
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.
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:
- Go to the "Custom Links" section of the "Customization" page.
- Switch to the tab with the language you want to create the link for.
- Click "Add link".
- 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.
- Save the new entry by clicking on the check mark button, followed by clicking on "Save Changes".
- If you want to add the link to multiple languages, repeat step 2 to 5 for the other languages.