Skip to content

Theming and customization

bbenezech edited this page Dec 27, 2011 · 41 revisions

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. (available mixins here)
  • modify all the variables provided by rails_admin and bootstrap and add others for you to use in variables.css.scss. (available variables here)
  • 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, ..

Images

You can use any image available to the asset pipeline.

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:

Existing themes:

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