Rails: fix ActiveAdmin CSS over-riding problem

November 3, 2011

For some reason the ActiveAdmin gem, a great administration framework for rails apps, has its own CSS files loaded for ALL other views (only trying in dev env). Quite annoying and will over-ride your styles. To fix I have just moved the app/assets/stylesheets/active_admin.css.scss to vendor/assets/stylesheets/active_admin.css.scss – It is only loaded when required then.

This example html…

<div id="header">
<div id="utility_nav">
<%= link_to "My Blog", posts_path %>
</div></div>

…looks like this with ActiveAdmin installed.

Because ActiveAdmin has this CSS.

/* line 110, /usr/lib/ruby/gems/1.8/gems/activeadmin-0.3.2/app/assets/stylesheets/active_admin/_header.css.scss */
#header #utility_nav {
  position: absolute;
  right: 25px;
  top: 10px;
  color: #aaa;
}

Moving the CSS file app/assets/stylesheets/active_admin.css.scss to vendor/assets/stylesheets/active_admin.css.scss restores the styling and allows active_admin.css to be loaded when required.