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