Developing a Custom Color Profile

The full process for developing custom profiles is as follows:

1. Right-click the LESS Template File Example provided on step 2 and click Save Link As.. or Save Target As...
2. Save the file locally with your desired template name. Ensure that it maintains the ".less" extension.
   
   Note: You may need to select 'All Files' from the Save as Type dropdown and manually enter the '.less' extension after the file name in the File name entry field before saving.

   LESS Template Link	TCE Version Introduced	Additions from Initial Template
   Initial LESS Template File Example	TeamConnect 5.0	N/A
   LESS Template File Example - 5.0.1	TeamConnect 5.0.1 (This version also applies to later 5.0.x releases, 5.1 and 5.2)	Now supports custom colors for top navigation bar, block titles, and left navigation bar.
   LESS Template File Example  - 6.0	TeamConnect 6.0	Support for additional custom colors and border sizing on the top navigational bar. Support for configuring whether or not page titles are in line with the button bar or on their own line.
   LESS Template File Example - Classic - 6.0 LESS Template File Example - Enhanced - 6.0	TeamConnect 6.0	The "Classic" theme attempts to display fields and labels in the horizontal orientation that existed in previous versions of TeamConnect.  Please see the Sample section to view what the Classic vs Enhanced view looks like.
   MitratechHighContrast MitratechBlueClassic MitratechBlueNormal MitratechGreenClassic MitratechGreenNormal MitratechPurpleClassic MitratechPurpleNormal MitratechVioletClassic MitratechVioletNormal	TeamConnect 6.3.x releases, 7.0 and 7.1	Introduced various enhanced color profiles, as well as different user interface color and high contrast update.
   MitraDazzle_Official	TeamConnect 7.1 & above	Introduced CSS variables, better UX to change colors on the color profile & added the new MitraExperience Design System.

   
   Important: Only one file can be downloaded and applied to TeamConnect. Additionally, if users download either TC6 Classic or TC6 Enhanced, then they will get the regular TC6 theme PLUS the enhancements that were applied to the Classic and Enhanced templates. 
    
3. Edit the LESS file to your desired color specifications with your favorite text editor (e.g. Notepad++, Sublime, etc.). Colors are determined via hex codes. Hex codes color pickers can be found on several web sites, including the w3schools color picker. 
   
   Important: Please review the Best Practices for Custom Color Profile Editing below to ensure compatibility with TeamConnect.
    
4. Save the new LESS file, making sure that you do not have any spaces or special characters in the name

Handling Custom Color Profile

NOTE: Introduced in TCE 7.1 version.

The user can recompile the .LESS file manually i.e. to recompile individual and “All” Color Profiles and also to recompile new/existing color profiles uploaded from the newly introduced “Recompile” button.

Previously, below TCE 7.1 versions, users needed to modify the .less file by navigating to the document section and checking out. Once modified, the user would check in the modified .less file by uploading it with different document versioning. As the changes will not apply suddenly, the user would navigate back to Admin > Admin Settings > User Interface, and upload the modified .less file to recompile the same. Though users can still perform this in TCE 7.1, it is still kept as an alternate way.

To eliminate this cumbersome process of deleting the color profile or renaming the .less file, a new feature is introduced to recompile that modified color profile. 

Now let us go through the process of recompilation:

1. When a user selects an individual Color Profile to recompile: Users make edits and after document check-in, they can select this edited file in the color profile dropdown or they can directly upload the edited .less file from the “Upload Color Profile” button under Color Profile Management block,  and once clicked on the newly created “Recompile Color Profile” button, that particular selected file gets recompiled.

Below are the steps to follow:

• Open TeamConnect.

• Login with the user account that has group rights equivalent to TeamConnect Admin group and Documents.

NOTE: When the user with no document permissions opens the “User interface page” in Admin Settings, the user will not be able to see any text related to the “Upload color Profile” button.

• Navigate to Admin > Admin Settings > User Interface.

• Once the user makes an edit in their custom color profile, they can directly upload the edited .less file from the “Upload Color Profile” button under Color Profile Management block or through the document section as explained above.

• A new button is introduced under the Color Profile Management block, named as “Recompile” beside the newly created “Recompile Color Profile” dropdown.

• After selecting the edited color profile from the “Recompile Color Profile” dropdown, the user can click on the “Recompile” button and the recompilation will be completed.

NOTE: A success message as “Selected color profile(s) have been recompiled successfully” will appear confirming the color profile has been compiled.

NOTE: Also, when a user recompiles any specific color profiles, if there is any color profile that is corrupt or incorrect, a message is displayed with the text as, “The system experienced a problem and could not complete your request. Please try your request again or have your system administrator check the system logs for additional details.”

2. When a user has bulk Color Profile to recompile: Whenever there are bulk edits involving multiple color profiles, then once a user selects “All” from “Recompile Color Profile” dropdown and clicks on the “Recompile” button, all color profiles will be recompiled.

Important Note:

The process of recompiling "All" Color profiles can sometimes take minutes depending on the number of color profiles in the system and the load on the server. If the user is experiencing timeouts when recompiling all color profiles, please check the Application Server & Web servers documentation to make sure your instance has sufficient resources allocated. If the users are still experiencing problems, please reach out to support.

Below are the steps to follow:

• Open TeamConnect.

• Login with the group rights equivalent to TeamConnect Admin group and Documents.

• Navigate to Admin > Admin Settings > User Interface.

• Once the user makes an edit in their custom color profile (say 5 color profiles added), they can directly upload the edited .less file from the “Upload Color Profile” button under Color Profile Management block

• Select “All” from the “Recompile Color Profile” dropdown and click on the Recompile button. The recompile process will start.

NOTE: When the user clicks on the Recompile button, a dialog box is displayed with a warning message “Recompiling All color profiles may take a few minutes. You will not be able to perform any action during the recompilation process. Are you sure you want to proceed?” with the options to “Recompile All'' and “Cancel”.

NOTE: If the recompilation process fails, for example, 3 out of 5 color profiles, a red color (error) banner message is displayed as, “3 of 5 Color Profiles failed recompilation. Please check the logs for failures.”

If the recompilation process succeeds, a green color banner message is displayed as “5 of 5 Color Profiles successfully recompiled”.

NOTE: If a user deletes the existing less file from the documents tab and clicks the “Recompile all” button, the existing css files will not get deleted.

3. When the user use “Upload Color Profile” button to recompile New Color Profiles:

Below are the steps to follow:

• Open TeamConnect.

• Login to TeamConnect Admin User.

• Navigate to Admin > Admin Settings > User Interface.

• Click on the “Upload Color Profile” button and a dialogue box appears where the user has to upload a new .LESS file and click the “Upload File” button.

NOTE: A notification appears at top of the screen as “Document uploaded” once the file is uploaded.

• After the upload, the user should click the “Recompile” button for the recompilation process to start.

• If the recompilation is successful then the dialogue box closes and a success message appears

• If compilation fails, then the dialogue box will close and an error message is displayed “Uploaded file has errors and please check the logs” and the old CSS file will be used.

Important- If a user attempts to change their selected color profile and the recompilation is successful, the user should clear their browser cache before the new changes are reflected on their teamconnect account.

NOTE: Replaced color profiles will get recompiled on click of the ‘Upload’ button. If the existing color profile is replaced, the admin will not need to click the ‘Recompile’ or ‘Update’ button for the new changes to take effect.

4. When the user uploads an existing color profile from the “Upload Color Profile” button:

Below are the steps to follow:

• Open TeamConnect.

• Login with the group rights equivalent to TeamConnect Admin group and Documents.

• Navigate to Admin>>Admin Settings>>User Interface.

• Click on the “Upload Color Profile” button and a dialogue box appears where the user has to upload an existing .LESS file and click the “Upload File” button.

• When the user uploads the existing color profile, a dialogue box “File Replacement Warning” with the message, “Folder/File/Hyperlink with name ‘FileName’ already exists in the same folder. Do you want to replace it?” appears, asking if the user wants to upload the file as already an old version exists.

• If the user chooses not to replace the color profile file with a new one, then the “Cancel” button can be clicked and the dialogue popup will be closed or if the user clicked on “Replace File” button then the old file will be replaced with new file and a success message saying “Color Profile(s) have been uploaded successfully.” will be displayed.

NOTE: It is to be noted that the naming of the replaced file will be the same for the duplicate file.

IMPORTANT: 

Admin makes changes to existing color profile and uploads existing color profile and chooses to recompile it by either clicking update or recompile button:

• If recompilation is successful then the latest modified color profile should prevail.

• if recompilation fails then CSS of the older color profile will prevail.

The user should note that the previous color profile prevails if the updated color profile has any recompilation issues so that the user will not lose CSS of my previous color profile.

New Custom variables will be added to another ‘DefaultCustomVariables.LESS’ file

NOTE: Introduced in TCE 7.1 version.

A fallback variables import system has been introduced to TeamConnect for LESS files. Any newly introduced variables in future TeamConnect versions & missing variables will not cause problems or breakages with the client's custom LESS file as there will be default values assigned through the import system.

Further explaining, a new import in default.less is introduced with filename as “defaultCustomVariables.less” which is a copy of “customVariables.less”. Any existing as well as new custom variables introduced in later versions as part of user interface changes are added to “defaultCustomVariables.less” so that there will be no breakage in user interface.

• The need to keep a backup of previously added files becomes critical as users are required to add multiple custom variable files. Hence to maintain the backup of the “customVariables'' file which is named as “defaultCustomVariables”. So that any new custom variables added in later versions will always stay in the final compiled LESS file.

• If the user makes any changes to the Custom variables file or if there are any mistakes or missing some information, that is causing the breakage, a new Custom variables in 6.x onwards will automatically be added to default .LESS file so that they are present in the final compiled .LESS file.

• Hence a new .LESS file will be created which will be the ‘DefaultCustomVariables.LESS’ file and in this file, all the Custom variables will be present. This file will not be accessible from the TeamConnect user interface.

• For every latest version after TC 7.0, any new variables that will be introduced will be present in the ‘DefaultCustomVariables.LESS’ file.

To recompile Custom Colour profile .LESS File, when user Upgrades

NOTE: Introduced in TCE 7.1 version.

When an admin user upgrades the teamconnect using the installer, any teamconnect in the system that contains a color profile is automatically recompiled during system startup.

Server startup will be slower if the “RECOMPILE_LESS_ON_STARTUP” setting is ON, as it will have additional actions to do on startup. This will be linearly increasing with the number of color profiles in a system.

Additional color profiles that are not in use, such as any test iterations caused by previous limitations of the color profile system should be removed. Hence, this results in server startup being unaffected if the “RECOMPILE_LESS_ON_STARTUP” setting is OFF.

NOTE: If the user has three color profiles, the boot up time is approximately three minutes longer than the normal boot up time. This will happen only once during the upgrade process. This three minutes is dependent on the number of files in the system, with more files taking longer to startup.

TC6 "Classic" vs "Enhanced" Templates

These two custom themes that can be uploaded to TeamConnect titled "Enhanced Readability" and "Classic".

Both themes provide changes to:

• Standard and Custom blocks
• Field labels no longer in all CAPS
• Higher contrast in text fields and labels
• Adjusted font size and weight
• Blocks have tinted background to indicate where they begin and end

In addition, the "Classic" theme attempts to display fields and labels in the horizontal orientation that existed in previous versions of TeamConnect.

Comparison of the View screen with both templates applied

Comparison of the Edit screen with both templates applied

(Note that empty blocks will become visible with the Enhanced template due to the application of the background.)

Example of the Classic theme

Implementing a new Custom Profile

1. Begin by downloading the appropriate .LESS file from the table above. Save it somewhere easily accessible on your computer. 
   Important: Only one file can be downloaded and applied to TeamConnect. Additionally, if users download either TC6 Classic or TC6 Enhanced, then they will get the regular TC6 theme PLUS the enhancements that were applied to the Classic and Enhanced templates. 
2. To implement a new color profile, go to the Admin, open the Admin Settings section of the left menu, then select User Interface. 
3. From the User Interface section of the Admin Settings page, click Upload a new Color Profile.
    
4. Upload the .LESS file and add a comment, then click Upload File.
   

Users are able to click the Use System Color option within their Preferences as a color profile. The choice selected from the Color Profile field on the Company Settings block of Admin Settings>User Interface determines which file is used as this option.

Color Profile Variables

• @block-title:
• @left-nav-hover-text:
• @left-nav-text:
• @left-nav-background:
• @left-nav-hover:
• @top-nav-background:
• @top-nav-hover-background:
• @top-nav-hover-text:
• @top-nav-text:
• @top-nav-selected-text:
• @top-nav-selected-background:
• @top-nav-selected-accent:
• @top-nav-accent-size:
• @nav-selected:
• @selected-border:
• @hover-border:
• @main-border:  
• @anchor-text:
• @anchor-hover:
• @block-header:
• @block-body:
• @block-edit-icon:  
• @table-highlight:
• @button-background:
• @button-background-hover:
• @field-text:
• @block-border:
• @table-border:
• @label-color:
• @left-nav-icon: 

Best Practices for Custom Color Profile Editing

Color profile designers are encouraged to make edits to their profile, test it, and return to make further edits in lieu of completing it all at once without viewing it in the application. Important: If you intend on using the same file name for these revisions and edits, you will need to delete the pre-existing CSS and LESS files for these changes to be reflected. For more information, see Removing Color Profiles within this Color Profile Administration section.

• @field-text should have good contrast with:
  • @block-header
  • @block-body
  • @table-highlight
  • @button-background
  • @button-background-hover
• @label-color should have good contrast with:
  • @block-body
  • @block-header
  • @table-highlight
• @selected-border should have good contrast with:
  • the white (#FFFFFF) background
• @hover-border should have good contrast with:
  • the white (#FFFFFF) background
  • the gray (#949494) main navigation bar background
• @main-border should have good contrast with:
  • o the white (#FFFFFF) background & text in Calendar
  • o the gray (#949494) main navigation bar background
  • o the gray (#EDEDED) on a contact card
• @anchor-hover should have good contrast with:
  • the white (#FFFFFF) background
• @anchor-text should have good contrast with:
  • the white (#FFFFFF) background
• @block-body should have good contrast with:
  • @field-text
  • @label-color
  • the white (#FFFFFF) background
• @block-edit-icon should have good contrast with:
  • @block-header
• @table-highlight should have good contrast with:
  • @field-text
  • @table-border
• @button-background should have good contrast with:
  • the gray (#EDEDED) on the left navigation & button bar
  • the white (#FFFFFF) background
• @button-background-hover should have good contrast with:
  • the gray (#EDEDED) on the left navigation & button bar
  • the white (#FFFFFF) background
• @block-border
  • determines the color of the box shadow, so consider the color against the white (#FFFFFF) background
• @table-border should have good contrast with:
  • @table-highlight
  • @block-body
  • the white (#FFFFFF) background
• @left-nav-icon should have good contrast with:
  • the gray (#EDEDED) on the left navigation
  • the white (#FFFFFF) background
• @block-header should have good contrast with:
  • the white (#FFFFFF) background & text

Sample values for a High Contrast Theme

• @selected-border #AAA
• @hover-border #6C6C6C
• @mani-border #333
• @anchor-text #333

Troubleshooting Color Profiles after Upgrading to TC6

Please review the Upgrading with Custom Colors and Logos section of the Upgrade Considerations page before upgrading to TC6. However, if you have already upgraded and are experiencing issues please follow the instructions below.

If you upgraded to TC6 without removing or disabling Custom Color Profiles and are experiencing the following issue, you will need to purge the CSS and Style Sheets using the Setup Tool. 

1. Click on Setup.
2. Open an Object.
   
    
3. From that Object's General Tab, click on the Go to <ObjectName> Folder button.
   
    
4. Click on the System link in the path.
   
    
5. Clear the files out of the Custom Styles and Custom Variables folders.
   
    
6. Save this work, exit out of the Setup screen, then log out of your TeamConnect instance.
7. Log back in to your TeamConnect instance, download the 6.0 LESS file, then implement the new color profile for your users.