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

Welcome to TeamConnect 7.1. 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 New TeamConnect Logo?
Steps to Follow Screen capture for Reference
  1. Go to Admin > Admin Settings > User Interface > Logo Management.

Note: The user can create their own custom Logo or they can use the new TeamConnect logo.

 clipboard_e32a82c7fe43ab4d30cd01561a439841c.png
  1. Under Logo Management, upload the downloaded new TeamConnect Logo file and click the Upload file button.
 clipboard_e892d6266453447b3c02334ceae70fd38.png
  1. After uploading the new logo file, select the logo file from the dropdown list under Logo management > Logo file.

Note: Make sure to select the check box "Enable Custom Logo" if you need to add any custom logo to TeamConnect.		 clipboard_ef637217b46a7961b204848ecc175529e.png
  1. Click "Update" button.
 clipboard_efb93f3a73b665a0188d86b88e9577001.png
  1. You can see that the TeamConnect's Logo has been updated.
 clipboard_effa812d68d1ea8fb3cc7ff445b4a8b5a.png
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.
 clipboard_e1fba165cd7bc2d21475006806238c883.png
  1. Under Color Profile Management, upload the downloaded MitraDazzle color profile and click the Upload file button.
 clipboard_e7ca16d799aab0e5de2c38197dfd97f40.png
  1. After uploading the MitraDazzle color profile, select it from the dropdown list under color profile management > current color profile.
 clipboard_efed3991c30c98abd67c52387d2414340.png
  1. Click "update" button.
 clipboard_ecaba1635bfc21d557bf52c7cd1a86b69.png
  1. The user can see the change in the Team Connect user interface.
 clipboard_e521a09cb498c9820c6e74576d73df13f.png

 

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.