Theming and customization

RailsAdmin uses a sass release of bootstrap for CSS, and bootstrap/jquery-ui for JS.

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

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

To create a distributable theme

rails plugin new rails_admin_<__THEME_NAME__> -m https://raw.github.com/gist/1523639 --skip-gemfile --skip-bundle -T -O

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.css.scss.
• modify all the variables provided by rails_admin and bootstrap and add others for you to use in variables.css.scss.
• In theming.css.scss:
  • use all defined mixins and variables.
  • 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, ..

Use a theme

In your Gemfile, before RailsAdmin:

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:

• Boostrap
• Bootstrap Sass

Existing themes:

• Example theme: technical stub you can use for bootstrapping. Everything should look painfully greenish.
• Designer of feel like one? Add your own.