Admin Dashboard Custom CSS

Spree Admin Dashboard stylesheet system is built in top Bootstrap and uses SASS preprocessor to compile custom stylesheets. To be precise we’re using DART-SASS (so you don’t need to install Node.js).

You can find the stylesheets files in app/assets/stylesheets/spree/admin directory.

The main entry point file is application.scss which uses SASS @import directive to include other stylesheets.

​

Overriding existing SASS code

​

Adding custom CSS

Besides SASS you can still include standard CSS files. To do so:

1. Create a new file in your application app/assets/stylesheets directory:

   touch app/assets/stylesheets/custom_spree_admin.css
   

2. Add some CSS rules to the file:

   .custom-class {
     color: red;
   }
   

3. Create a template file in your application app/views/spree/admin/shared directory:

   touch app/views/spree/admin/shared/custom_spree_admin_stylesheets.html.erb
   

4. Use standard Ruby on Rails stylesheet_link_tag

   <%= stylesheet_link_tag 'custom_spree_admin' %>
   

5. Register this template in the Spree initializer (config/initializers/spree.rb):

   Rails.application.config.spree_admin.head_partials << 'spree/admin/shared/custom_spree_admin_stylesheets'
   

That’s it! Now you’re custom CSS code will be included after loading the standard Admin stylesheets.