Custom CSS and JavaScript files will be loaded automatically if you place them under either:
SWARM_ROOT/public/custom/*.(css|js)
SWARM_ROOT/public/custom/sub-folder/*.(css|js)
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.
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.
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.
$(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.
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.
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.
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
. Swarm automatically includes the JavaScript file, adjusting the text of the review states immediately for subsequent page views.
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.
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.
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.
.navbar-site .brand {
background: url("/custom/navbar_logo.jpg") no-repeat center;
}
Replace the /custom/navbar_logo.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 navbar-logo.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.
Swarm's navbar design supports logos up to 24 pixels tall. Even if your logo fits within that height, you may need to also adjust the width, height, margins, or padding to suit your logo.
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.