Rails Active Admin CSS Conflicting with Twitter Bootstrap CSS

Rails Active Admin css conflicting with Twitter Bootstrap css

Have you watched the RailsCasts video on using ActiveAdmin? In the video, Ryan shows you how to prevent the ActiveAdmin CSS from stepping on your main app CSS.

http://railscasts.com/episodes/284-active-admin

Moving info from Video into answer

In the application.css you remove:

*= require_tree .

For rails 4, Jiten K suggests adding this to production.rb:

config.assets.precompile += ['active_admin.css']

However one of the comments on that SO answer says this is not needed. I have not needed it so far.

how to stop an active_admin css.scss file changing the whole look of my application

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.

My css file is overridden due to activeadmin

For active_admin to play nice don't include it in the application.css, i.e.: remove the

require_tree .

and require each file separately inside app/assets/stylesheets
but don't put active_admin.css

and on config/production.rb put this

config.assets.precompile += ['active_admin.css']

Ruby on Rails styling conflict with bootstrap

You're doing nothin wrong with the link_to syntax.

link_to only renders a <a href></a> element, it does no styling at all (unless you provide an explicite style attribute).

The appearence is totaly defined by your CSS.

So use your browser's developer tools to check the CSS styles, that are used on your link and show the resuts here for advise.

Maybe Active Admin styles are overriding the bootstrap styles.

Can I use Twitter Bootstrap on only a portion of my Rails app?

Say you have two layout files, application.html.erb and admin.html.erb. You would then simply create two different manifest files, application.css.scss and admin.css.scss. However, you should also create a separate CSS file for Bootstrap, bootstrap_custom.css.scss.

bootstrap_custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

Note: You don't want to use @import in your manifest files since it will need to recompile each time and thus slow down development. Instead, use require when possible!

application.css.scss

//= require bootstrap_custom
//= require_tree .

admin.css.scss

//= require_tree .

Then, correspondingly in your layout files

application.html.erb

<%= stylesheet_link_tag "application" %>

admin.html.erb

<%= stylesheet_link_tag "admin" %>

So now, your application layout has bootstrap and admin layout doesn't.

How can i get rails app to only apply twitter bootstrap css to only selected pages?

Simple: put the Twitter Bootstrap CSS file only in the layouts you're using for the backend!

Twitter bootstrap has Invalid CSS according to Rails 3.1 asset pipeline during precompilation?

I fixed this using the non-minified version of Bootstrap. It'll still get compiled when running rake assets:precompile so it's not an issue :)

Not found bootstrap.css when using twitter-bootstrap-rails gem [Rails3]

You have to run the command

rake assets:precompile

so the CSS files get copied into public folder. Try that, otherwise it may be that you are not adding the CSS to your HTML.

---

Related Topics