support for active_admin - css namespacing

[linojon]

I'm trying to use ckeditor-rails with active_admin, it "works" fine but looks terrible, all the css is overridden by active_admin's styles. I've fiddled all evening to work around it but cannot find a way. (I know its possible because the galetahub/ckeditor gem does, but for other reasons i'm not using that gem).

apparently active_admin normalizes body.active_admin * {...}

when i use firebug to remove the active_admin class from the < body > tag, the ckeditor tools look right, but of course the rest of the admin page is unstyled. Any suggestions please? if you have ideas that might require changes to ckeditor-rails i'll do it and send a pull request. Thanks!

[arwed]

I have the same problem

[tsechingho]

It's not ckeditor's fault. The active_admin put namespace on body, ant it may break css of other gems

just give these css of ckeditor a namespace body.active_admin.

you should write your won ckeditor/skins/moono/editor.css and ckeditor/skins/moono/dialog.css. All other browser specific css inside ckeditor/skins/moono/ should be rewritten too.

css of ckeditor

if file named app/assets/stylesheets/ckeditor/skins/moono/active_admin_editor.css.scss like following:

body.active_admin {
  .cke_toolgroup {
    margin: 0 6px 5px 0;
    border: 1px solid #a6a6a6;
    border-bottom-color: #979797;
  }
  a.cke_button {
    padding: 4px 6px;
  }
}

you should import these css files to active_admin.css.scss, like

@import "ckeditor/skins/moono/active_admin_editor";

and the editor will look as it should be.

the css of plugins may need such hack.

css of other parts

you also need to fix css of label like: (field of Page#content)

#page_content_input {
  label {
    display: none;
  }
}

hope these ideas help.

[itay-grudev]

I solved the issue. It's from Active Admin's CSS Reset. It's imported by calling @import "active_admin/base"; in app/assets/stylesheets/active_admin.css.scss To fix it remove that line and replace it with the code from: https://github.com/gregbell/active_admin/blob/master/app/assets/stylesheets/active_admin/_base.css.scss without the first 5 lines where the reset is imported.