Title: Proteus Custom JavaScript & CSS plug-in

This plug-in allows administrators to insert custom JavaScript (including jQuery) and/or CSS codes into the Proteus skin in order to modify functions, designs, styles, and decorations of the skin.


Notice: The plugin's configuration editors (the [JavaScript] and [CSS] text areas) in version 1.0.1 or higher are not compatible with those in the version 1.0.0. Please make sure to copy all your descriptions in these text areas and paste them into NotePad or something as backups before updating the plug-in.

Click the link below to download the com.traction.proteus.customjscss-NN.zip file. (NN means the version number.)

Upload the zip file in Server Settings > Plugins page.

After uploading, you will see the following I18N ERROR. Don't worry. This error means "you need to restart TeamPage server to load the I18N resources (language files)."

Requires Restart

Click [Restart TeamPage] in Server Settings > General > Manage Server page. If your TeamPage server is hosted in Traction's cloud environment, you will need to restart your server twice to load the I18N resources correctly.

After restarting, you will see that the plugin's name show up correctly.

Install Comoleted


Click the [Configure] link to display the configuration view.

The configuration view has two text areas, JavaScript and CSS.


The Proteus skin consists of two parts, "outside" and "inside". The "outside" of the skin is loaded first and then the page content (a title of a page, body descriptions, sidebar etc.) is loaded as the "inside" of the skin via Ajax.

This means that the JavaScript codes work on Proteus should be written within the scope of Proteus.addHandler("load", function(){ DO SOMETHING });.

Example 1 - Replacing [View Profile] in the profile menu with [My Profile Page]

Fill-in the following JavaScript code.

Proteus.addHandler("load", function() {
  $('.profile-menu .menuitem-profile').html('<i></i>My Profile Page');


Example 2 - Replacing [Dashboard] tab label with [Main Page]

Fill-in the following code.

Proteus.addHandler("load", function() {
  $('#primary-tabs .tab-dashboard a span').text('Main Page');



Example 1 - Coloring the heading "What are you working on?" red

Fill-in the following CSS code.

.view-status #body .liveblog-post h2 {
  color: #cc0000;


Example 2 - Coloring the notification number red and enlarging 25%

Fill-in the following CSS code.

#menu .notifications-count {
  background-color: #c00;
  font-size: 125%;


Related Articles
Article: Forum6922 (permalink)
Categories: :Doc:plug-in
Date: May 24, 2018; 1:57:15 PM Eastern Daylight Time

Author Name: Takashi Okutsu
Author ID: takashi