-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Theming and customization for RailsAdmin 2.x and earlier
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
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 */
});
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.
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 invariables.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.
Use anything you want that the asset pipeline supports: regular JS, includes, Coffee, ..
You can use any image available to the asset pipeline.
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'
- Example theme: technical stub you can use for bootstrapping. Everything should look painfully greenish.
- Flatly theme: Bootstrap 2 flatly theme.
- Rails Admin Material: A Material design theme.
- Rollincode theme: Bootstrap 3 flat theme.
- SoftwareBrothers theme: SoftwareBrothers theme
- Designer, or feel like one? Add your own.