CSS & JavaScript

Custom CSS and JavaScript files will be loaded automatically if you place them under either:

Note

Swarm only supports customizations placed directly within the SWARM_ROOT/public/custom folder or one sub-folder down. Customizations are added after all standard CSS and JavaScript. If more than one custom file is present they are added in alphabetical order.

Prior to creating any customizations, ensure that the SWARM_ROOT/public/custom folder exists; Swarm does not ship with or create this folder.

Sample Javascript extensions

The following are example Javascript customizations that you might wish to apply to your Swarm installation. Each example can be implemented separately. Ideally, you would apply the Javascript customizations in a single file to reduce the number of web requests required.

Caution

Coding errors in your custom JavaScript files could cause the Swarm UI to stop working. If this occurs, use your browser's development tools to identify which file contains the problem, and move that file out of the SWARM_ROOT/public/custom folder. When the problem has been resolved, the file can be returned.

Make the Created column on the Reviews page clickable

$(document).on( 'click', '.reviews-table td.created', function() {
    var change = $(this).closest('tr').data('id');
    window.location = '/reviews/' + change;
});

Save these lines in a file, perhaps reviews-created-clickable.js, within the SWARM_ROOT/public/custom folder. Swarm automatically includes the JavaScript file, making the entries in the Created column clickable immediately for all for subsequent review page views.

Adjust the number of "more context" lines for diffs

swarm.diff.moreContextLines = 25;

Replace the 25 with the number of lines of context that should be retrieved each time the more context bar is clicked when viewing a diff.

Save this line in a file, perhaps more-context-lines.js, within the SWARM_ROOT/public/custom folder. Swarm automatically includes the JavaScript file, adjusting the number of more context lines immediately for subsequent page views.

Note

Try to avoid making this value arbitrarily large, as the file being diffed could be very large; users wouldn't expect to see the entire file when clicking the more context bar. If you need to see the whole file, click the Show full context icon.

Customize the review state options text

var original = swarm.review.buildStateMenu;
swarm.review.buildStateMenu = function(){
   original();
   var needsReview = $('.icon-review-needsReview').parent();
   needsReview.html(needsReview.html().replace(
     'Needs Review', 'You need to review'
   ));
}

Replace the You need to review with the text you'd prefer to see instead of Needs Review.

Save this line in a file, perhaps customize-review-states.js, within the SWARM_ROOT/public/custom folder. Swarm automatically includes the JavaScript file, adjusting the text of the review states immediately for subsequent page views.

Sample CSS customizations

The following are example CSS customizations that you might wish to apply to your Swarm installation. Each example can be implemented separately. Ideally, you would apply the CSS customizations in a single file to reduce the number of web requests required.

Adjust the default tab size

body {
    tab-size: 4;
}

Replace the 4 with the tab size you prefer.

Save these lines in a file, perhaps tab-size.css, within the SWARM_ROOT/public/custom folder. Swarm automatically includes the CSS file, adjusting the tab size immediately for subsequent page views.

Apply a custom background to the login screen

body.route-login {
    background: url("/custom/login_background.jpg") no-repeat center fixed;
}

Replace the /custom/login_background.jpg URL fragment with image you want to use. If you do not specify a full URL, the image you specify must exist within the SWARM_ROOT/public folder, preferably within the SWARM_ROOT/public/custom folder.

Save these lines in a file, perhaps login-background.css, within the SWARM_ROOT/public/custom folder. Swarm automatically includes the CSS file, immediately replacing the login screen's background for subsequent page views.

Adjust the appearance of avatars

img.avatar {
    border: 2px dashed red;
    border-radius: 10%;
}

You can make a number of adjustments to the way Swarm presents avatars, such as adding a border and adjusting the border radius, as the example above demonstrates. You should avoid attempting to set specific sizes because Swarm uses different sizes depending on where the avatar is displayed.

Save these lines in a file, perhaps avatars.css, within the SWARM_ROOT/public/custom folder. Swarm automatically includes the CSS file, immediately replacing the login screen's background for subsequent page views.