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.



Install



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

Setup



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



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



JavaScript



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');
});


Screenshot



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');
});


Screenshot



CSS



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;
}


Screenshot



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%;
}


Screenshot





Attachments:
requires_restart_en.png
plugin_installed_en.png
enter_configuration_en.png
configuration_view.png
my_profile_page.png
main_page.png
color_red1.png
color_red2.png
Related Articles
commented on by (1)
Forum6927: Example: A usecase of the Proteus Custom JavaScript & CSS plug-in
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