Skip to main content
Mitratech Success Center

Client Support Center

Need help? Click a product group below to select your application and get access to knowledge articles, webinars, training content, and release notes or to contact our support team.

Authorized users - log in to create a ticket, view tickets status and check your success plan details.

 

Dazzle Color Profiles Administration

  1. Last updated
  2. Save as PDF

Users can now personalize or customize TeamConnect for their company through Dazzle Color Profiles Administration.

CSS Variables in MitraDazzle Color Profiles

Prerequisites

Below are the pre-requisites required:

  1. TeamConnect 7.0+
  2. Text editor:
How to apply MitraDazzle Color Profiles?
Steps to Follow Screen capture for Reference
  1. Download the MitraDazzle Color Profile from the client success center. Go to Admin > Admin Settings > User Interface > Color Profile Management.
 Admin Settings > User Interface > Color Profile Management page
  1. Under Color Profile Management, upload the downloaded MitraDazzle color profile and click the Upload file button.
 Upload Color Profile file tab
  1. After uploading the MitraDazzle color profile, select it from the dropdown list under color profile management > current color profile.
 color profile management block
  1. Click "update" button.
 click updated button once uploading the MitraDazzle color profile
  1. The user can see the change in the Team Connect user interface.
 The user can see the change in the Team Connect user interface.

 

How to change the Variables in MitraDazzle Color Profile?
Steps to Follow Screen capture for Reference
  1. For the current applied color profile i.e. "MitraDazzle" file, right-click in the browser and select “Inspect” to open the developer tools panel in the browser and scroll down to “Inherited from html” section to find all the variables.
 clipboard_e59dfcb3e4f57adb751c9dcdfa1dc6c9f.png
  1. Change the variables as needed by clicking on the variable name.
    • When modifying the variable, you can specify a color name and observe that the changes are made.
    • Alternatively,  you can click the box to open the color picker, where you can change the color as needed.
    • Also, you can use the eye dropper to apply already existing color on the selected variable.

Note: These changes are only effective on this page; if you navigate away, the changes will be lost.

 clipboard_e0ec4185391de96a37778c0a8c17c9909.png
  1. Now to make these modification permanent, copy the entire list of variables by right clicking and selecting “Copy All Declarations”.
Note: Click on “Show All properties”, or the user might miss variables and it will cause problems on the user interface.		 clipboard_e6fb12e295bd3a205e7814d61c4b00979.png
  1. Open a notepad or Visual Studio Code or any other text editor.
  2. In the text editor, open the default MitraDazzle file.
  3. Paste the changed variables over the existing variables under the root section between the braces, and replacing the old variables.

Note: To ensure that the original color profile is retained, save this under a new file name.

 clipboard_ea957f2a8b211de9737876cb672a4f1ff.png
  1. Close the text editor and open your TeamConnect user interface under Admin Settings.
  2. Upload the modified MitraDazzle file by clicking upload color profile button.
  3. Once uploaded, select the modified MitraDazzle file and click Update button.
  4. If everything looks good, you're finished updating the colors with the modified MitraDazzle color profile. Repeat the same process to update more variables.
  5. You can see that the changes done to the variables will effect the entire user interface of your TeamConnect.
 clipboard_e89f43df57409c2c60de912a1f99dbfa2.png

Note: To get a consistent look and feel in MitraDazzle color profile, many of the CSS display properties have been overridden using “!important”.

When working with MitraDazzle color profile applied on an instance & if you’re using "display:none;" to show/hide fields either using CSS/JS in XMLs or using interactions in Screen Designer please keep note to apply it on the following classes -

  • row
  • form-row
  • column
  • field-cell

These classes have specialized CSS applied to allow for show/hide to work correctly with MitraDazzle color profile and maintain visual consistency.

 

MitraDazzle Color Profile Enhancement: Label-Field Layout Configuration

The MitraDazzle color profile now supports customizable label-field layouts using a new LESS variable, @layout-type. This feature allows users to choose between two distinct orientations for arranging labels and fields in forms: Top-Down and Side-Side.

Note:

  • Available from MitraDazzle v1.3+. Please download the latest version from the Color Profile Administration article.
  • A LESS Variable requires updates to the color profile and cannot be accessed on the Dev Tools like the CSS Variables mentioned above.
  • It is recommended that you save your previous color profile before applying this new color profile to your environment

The @layout-type variable determines the layout of labels and fields within forms in the MitraDazzle profile. Below are the two available options:

Description

Screen capture for Reference
  1. Download the latest MitraDazzle Color Profile from the Color Profile Administration article.
  2.  Find the variable "@layout-type" in the MitraDazzle Color profile. This will be available below the CSS variables section.
  3. Update the variable as per preference mentioned below.
  4. Save the updated MitraDazzle Color Profile as a new copy by using "Save As" under the File Menu
  5. Upload the new copy to the environment and confirm if the changes have been applied.
  6. It is best practise to document the steps taken, updates made to the variables and a copy of the file. This will be useful information whenever TeamConnect goes through an upgrade process.
 clipboard_ec29d3a6b3a2565752c3142cde2735113.png

 Top-Down Layout (@layout-type: TopDown;) 

Labels are positioned directly above the corresponding fields.

 Top Down Layout.png

Side-By-Side Layout (@layout-type: SideSide;)

Labels are aligned horizontally next to their corresponding fields.

 Side Side Layout.png