How to add custom styles and javascript to the admin panel

You may need to add custom javascript or styles to the spina admin panel. This guide will walk through the steps to accomplish.

Copy the original files

First, navigate to the current application.sass or application.js file you wish to override. The sass and js files are located here:

• https://github.com/denkGroot/Spina/blob/master/app/assets/stylesheets/spina/admin/application.sass
• https://github.com/denkGroot/Spina/blob/master/app/assets/javascripts/spina/admin/application.js

Create paths and paste originals

Next, recreate this entire path inside your apps style and/or javascript folder and paste the raw copied content into the application.js and application.scss files respectively. The created paths and files should live inside your app like this:

• /app/assets/stylesheets/spina/admin/application.sass
• /app/assets/javascripts/spina/admin/application.js

Adjust javascript paths

You must adjust the paths only in the application.js file so they can find the Spina gem's js. You can do so by prepending the files with spina/admin/.

For example:

//= require ./account

becomes:

//= require spina/admin/account

and so on with the remaining relative js files.

Add files to the manifest

Finally, place assets in the same admin js/scss folder and include your new stylesheet or js file into the manifest like normal.

application.sass

@import spina
@import my-new-stylesheet
.infinite-scroll
  @include clear fix

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require spina
//= require spina/admin/account
//= require spina/admin/confirm_delete
//= require spina/admin/pages
//= require spina/admin/spina.trix
//= require spina/admin/spina.infinite_scroll
//= require spina/admin/spina.scaffold
//= require ./my-new-js-file