Custom Backoffice for LocomotiveCMS

If you want to add extra JavaScript or stylesheets to the Locomotive backoffice, just create the following view partial:

# app/views/locomotive/shared/_main_app_head.html.haml
= stylesheet_link_tag 'your_custom_css', :media => 'screen'
= javascript_include_tag 'your_custom_js'

It overrides an empty partial of Locomotive and will be rendered right before </head> after all Locomotive JavaScript and stylesheet inclusions.

I prefer

… to put all my files in the scope locomotive/extensions:

/app/
·   assets/
    ·   javascripts/
        ·   locomotive/
            ·   extensions.js.coffee
            ·   extensions/
                ·   models/...
                ·   views/...
    ·   stylesheets/
        ·   locomotive/
            ·   extensions.css
            ·   extensions/
                ·   backoffice/...
                    ·   menu/...

Then a tree require here:

# app/assets/javascripts/locomotive/extensions.js.coffee
#= require_tree ./extensions

And there:

# app/assets/stylesheets/locomotive/extensions.css
/*
 *= require_tree ./extensions
 */

And adjusted names in the partial:

# app/views/locomotive/shared/_main_app_head.html.haml
= stylesheet_link_tag 'locomotive/extensions', :media => 'screen'
= javascript_include_tag 'locomotive/extensions'