8

I have a ruby on rails project, ruby2 and rails4. I've got the bootstrap-sass gem installed. I recently installed the activeadmin gem, which adds a file active_admin.css.scss to my app/styles folder:

// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

Now the buttons and forms throughout my project, which I've designed with bootstrap class, look all different. It's like the active_admin.css.scss is over-riding my whole project. When I comment out the below lines like so:

   // @import "active_admin/mixins";
   // @import "active_admin/base";

My original buttons return, but ActiveAdmin is a mess to look at.Any idea how I can sort out this problem - just have active_admin.css.scss deal with my actice_admin stuff, and leave the rest alone?

Andrew Grimm
  • 78,473
  • 57
  • 200
  • 338
CHarris
  • 2,693
  • 8
  • 45
  • 71
  • do you have firebug installed? check which class is overwritten, then you need to update them, – Muhammad Mar 08 '14 at 09:29
  • don't have firebug installed, I use Chrome. I can see 'color: #38678b; text-decoration: underline;', classes I don't want to use - it's changed the colour and decoration of my links, but don't how to change these, as they're not explicitly defined in css.scss files. Must be taken from the active_admin gem file. – CHarris Mar 08 '14 at 09:39
  • then it must be written in .js file search and update. – Muhammad Mar 08 '14 at 09:47

5 Answers5

6

Usually admin area has its own layout and assets (javascripts and stylesheets). I doubt there's any need to include active_admin assets in your app's none admin pages.

If your application.css includes all stylesheets by default with this:

*= require_true .

Then copying 3rd-party assets into assets folder will break your style as you describe. Consider changing it to include stylesheets explicitly or using the methods described in this article:

http://mrdanadams.com/2011/exclude-active-admin-js-css-rails/

The article is 3 years old so it's possible parts of it have to be changed, but the idea is there.

James Chen
  • 10,794
  • 1
  • 41
  • 38
  • I didn't include it by choice - it just put the scss file in there, when I did gem install active_admin. – CHarris Mar 08 '14 at 10:10
  • Well in this case I guess your application.css includes all css under the folder by default (`*= require_true .`). I'll update the answer. – James Chen Mar 08 '14 at 12:30
  • Elegant solution! And enlgihtened me about `require_tree` too! – IcyFlame Oct 03 '14 at 10:29
4

A better solution that works for Rails 4 is to move active_admin css and javascript files to /vendor. To load the assets correctly in production, add the following lines to config/environments/production.rb:

config.assets.precompile += 
%w( #{Rails.root}/vendor/assets/stylesheets/active_admin.css.scss)
config.assets.precompile += 
%w( #{Rails.root}/vendor/assets/javascripts/active_admin.js.coffee)

I found the fix in this issue.

Karim Sonbol
  • 2,581
  • 2
  • 18
  • 16
  • 1
    Thanks. Be sure to run assets using RAILS_ENV: rake assets:precompile RAILS_ENV=production if you are pushing your assets on heroku/server – Omer Aslam May 29 '14 at 14:04
3

Thanks to a trail of research started by James Chen below (and thanks to Ryan Bates!) I found this video: http://railscasts.com/episodes/284-active-admin

Towards the end of the video, it fixes my problem. Wouldn't mind, but I watched the first part of the video several days ago to get the active_admin gem installed, and then stopped watching.

Basically, if you have sass installed, change your application.css file to application.css.scss, and some other small bits and bobs.

CHarris
  • 2,693
  • 8
  • 45
  • 71
3

Thanks to James Chen and the link to Dan Adam's blog. I decided to consolidate the two articles into this answer. The following steps should resolve the problem on Rails 4.0:

1 - Ensure that your Active Admin assets are not in the root folders which are applied to the whole application:

cd app/assets/javascripts
mkdir admin
mv active_admin.js.coffee admin/

cd ../stylesheets
mkdir admin
mv active_admin.css.scss admin/

2 - And actually, make sure that the assets are not included, via editing both files assets/stylesheets/application.css and assets/javascripts/application.js change require_tree . to require_directory .

3 - Now you need to change your Active Admin initializer to grab the two files you just excluded in steps 1 and 2: In file config/initializers/active_admin.rb add the following lines:

config.clear_stylesheets!
config.register_stylesheet 'admin/active_admin.css'

config.clear_javascripts!
config.register_javascript 'admin/active_admin.js'
Sojoodi
  • 552
  • 5
  • 10
1

As @Karen pointed out in this answer Rails Active Admin css conflicting with Twitter Bootstrap css, you could just move the stylesheet active_admin.css.scss from app/assets/stylesheets to vendor/assets/stylesheets

Community
  • 1
  • 1
AdrieanKhisbe
  • 3,899
  • 8
  • 37
  • 45