Skip to content

Theming and customization for RailsAdmin 2.x and earlier

Jump to bottom Edit New page
Mitsuhiro Shibuya edited this page Sep 18, 2022 · 1 revision

For custom theming (application scoped), simply override these files in your app:

app/assets/stylesheets/rails_admin/custom/mixins.scss
app/assets/stylesheets/rails_admin/custom/theming.scss
app/assets/stylesheets/rails_admin/custom/variables.scss
app/assets/javascripts/rails_admin/custom/ui.js

Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder. Some additional steps might be required, as others reported here: https://github.com/sferik/rails_admin/issues/738#issuecomment-26615578

For custom JavaScript code

RailsAdmin 2.x and below uses jquery-pjax (https://github.com/defunkt/jquery-pjax) to load pages instead of normal HTTP requests.

Use this event to check that the page is loaded before executing your code:

$(document).on('rails_admin.dom_ready', function() { 
  /* your js code here */
});

To create a distributable theme

rails plugin new rails_admin_<__THEME_NAME__> -m https://gist.githubusercontent.com/bbenezech/1523639/raw/42579a263c219d111c03936f93ff25a7d8999bda/rails_admin_theme_creator --skip-gemfile --skip-bundle -T -O --full

Then add to your application Gemfile (before RailsAdmin):

gem 'rails_admin_<__THEME_NAME__>', :path => '../rails_admin_<__THEME_NAME__>'

Inside your rails_admin application config/application.rb, just after Bundler.require:

ENV['RAILS_ADMIN_THEME'] = '<__THEME_NAME__>'

This will allow for convenient live development testing.

Please follow the convention: rails_admin_ prefix for all RailsAdmin related gems.

Once done, upload it on Github with a valid gemspec (change authors, email and project descriptions) to share your work.

CSS

Put all the real theming in theming.css.scss. It can be regular CSS, LESS or SCSS

Note that if you choose to use SCSS, you can:

  • modify all the mixins provided by rails_admin and bootstrap and add others for you to use in mixins.scss. (available mixins here)
  • modify all the variables provided by rails_admin and bootstrap and add others for you to use in variables.scss. Note that the variables in variables.scss are imported before Bootstrap's variables which all have set the !default flag. This effectively means that you can customize chained variables by just assigning a custom value to the first one instead of the need to override each single one. E.g. you do not have to override $btn-success-bg, $label-succes-bg and $progress-bar-success-bg but only assign a custom value to $brand-success. (available variables here)
  • In theming.scss:
    • use all mixins and variables. (your owns, Bootstrap's and RailsAdmin's)
    • include any other .scss file with @import rails_admin/themes/__THEME_NAME__/my_scss_file and organize your the rest of your theme the way you want.

JS

Use anything you want that the asset pipeline supports: regular JS, includes, Coffee, ..

Images

You can use any image available to the asset pipeline.

Use a theme

In your Gemfile:

gem 'rails_admin_example_theme', :git => 'git://github.com/bbenezech/rails_admin_example_theme.git'

Inside config/application.rb, just after Bundler.require:

ENV['RAILS_ADMIN_THEME'] = 'example_theme'

Resources:

Existing themes:

Home

Add a custom sidebar
Clone this wiki locally