Skip to main content
Mitratech Success Center

Color Profile Administration

  1. Last updated
  2. Save as PDF
Beginning with TeamConnect 5.0, team administrators are able to further customize TeamConnect for their company through color profile administration. Custom profile color schemes can be designed by an administrator and made available to all users. While regular TeamConnect user preferences on color profiles will trump color profiles set by administrators, administrators retain control over what selections are made available.

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. 

    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

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

TC6_Comp_View_Enhanced.jpg

 

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.)

TC6_Comp_Edit_Enhanced.jpg

 

Example of the Classic theme

TC6_ClassicTheme_Applied.png

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.UpdateUI_AdminSettings.png
     
  4. Upload the .LESS file and add a comment, then click Upload File.
    TC_ColorProfileUpload.png

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.

Removing Color Profiles

To remove a color profile as a choice for their users, administrators must follow these steps in order for best results:

  1. From the Custom Variables folder in your Documents, select the check-box for the LESS file you would like to remove. 
    Note: See the steps for Uploading a LESS file for help locating this folder, if necessary.
  2. Click theScreen Shot 2017-09-20 at 11.15.42 AM.png icon to go to the respective page for that file.
  3. Click the Delete button to remove the LESS file. 
    Note: After deleting the LESS file, users will no longer see that option as a choice in their Color Profile selection. However, users who already had this option selected will still see their same profile design.
  4. To entirely remove the color profile, go to the Custom Styles folder within the System document directory and repeat the same delete process as outlined in steps 2 and 3 of this section. Users with this style in use will be moved to the default color scheme.

If the CSS (Custom Styles) file is deleted and the LESS file (Custom Variables) remains, the option will persist for users, and the stylesheet will be re-created upon selection.

 

Important: Color Profile - Break in Invoice Review grid

When the user uploads the the existing LESS file, the invoice review grid CSS (Custom Styles) file is broken on My Approvals page and not rendering properly.

This issue occurs because the page was opened in 80% browser size. When the user displays the page at 100% browser size, the issue is resolved.

Hence, the user should be cautious so that if the above error occurs then the user should upload the same LESS file again by deleting the existing one.

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. 
Issue.png

 

  1. Click on Setup.
  2. Open an Object.
    OpenAnyObject.png
     
  3. From that Object's General Tab, click on the Go to <ObjectName> Folder button.
    ObjectFolderButton.png
     
  4. Click on the System link in the path.
    SystemLink.png
     
  5. Clear the files out of the Custom Styles and Custom Variables folders.
    CustomVariablesAndCustomStyles.png
     
  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.