CSS & JavaScript

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

  • public/custom/*.(css|js)

  • public/custom/sub-folder/*.(css|js)

Note

Swarm only supports customizations placed directly within the public/custom folder or one sub-folder down. Items will be 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 custom folder exists; Swarm does not ship with or create this folder.

Sample JavaScript extension

Below is an example of a simple JavaScript extension that makes 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 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.

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 public/custom folder. When the problem has been resolved, the file can be returned.

Sample CSS customization

Below is an example of a simple CSS customization that changes the default tab size: 

body {
    tab-size: 4;
}

Replace the 4 with the tab size you prefer.

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