How can I customize the active admin layout?

I need to customize the active admin layou开发者_如何学Got, but how can I do it?

The active admin layout is not actually defined as a layout file, but is generated programatically. Placing a custom layout in the layout directory will therefore not actually override the default layout.

You can, however, monkey-patch or duck-punch the active admin layout methods inside your application.

The following will add an ie-specific stylesheet to the header:

module ActiveAdmin
  module Views
    module Pages
      class Base < Arbre::HTML::Document

        alias_method :original_build_active_admin_head, :build_active_admin_head unless method_defined?(:original_build_active_admin_head)

        def build_active_admin_head
          within @head do
            meta :"http-equiv" => "Content-type", :content => "text/html; charset=utf-8"
            insert_tag Arbre::HTML::Title, [title, active_admin_application.site_title].join(" | ")
            active_admin_application.stylesheets.each do |path|
              link :href => stylesheet_path(path), :media => "screen", :rel => "stylesheet", :type => "text/css"
            end
            active_admin_application.javascripts.each do |path|
              script :src => javascript_path(path), :type => "text/javascript"
            end
            text_node csrf_meta_tag
            text_node "<!--[if lt IE 7]>
            <link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"admin_ie7.css\ />
            <![endif] -->".html_safe
          end
        end

      end
    end
  end
end

Clearly an ugly solution.

When a view is defined in a gem AND in the rails app, the one defined in the Rails app is served. It's a logic priority.

So if you need to override all or some active admin views, you'll have to copy these in your app and change them as you desire.

Maybe ActiveAdmin does provide a nicer way to do this by now? I don't know. However here would be an example for a bit cleaner patch for that situation, in my example to add the webpacker gems javascript_pack_tag to my admin area.

module MyApp
  module ActiveAdmin
    module Views
      module Pages
        module BaseExtension
          def build_active_admin_head
            super
            within @head do
              text_node(javascript_pack_tag('application'))
            end
          end
        end
      end
    end
  end
end

class ActiveAdmin::Views::Pages::Base < Arbre::HTML::Document
  prepend MyApp::ActiveAdmin::Views::Pages::BaseExtension
end

(Using rails 5.1.4) I tried two solutions here that involved messing with the active_admin library, and they did not work for me at all. I found my solution in config/initializers/active_admin.rb. I am adding a small amount of bootstrap styling to the default layout. As far as linking to stylesheets, javascripts, etc., it was as simple as adding this to my active_admin.rb, as per the comments therein:

  # == Register Stylesheets & Javascripts
  #
  # We recommend using the built in Active Admin layout and loading
  # up your own stylesheets / javascripts to customize the look
  # and feel.
  #
  # To load a stylesheet:
  #   config.register_stylesheet 'my_stylesheet.css'
  config.register_stylesheet 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css', { integrity: 'sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk', crossorigin: 'anonymous' }

As far as editing that generated layout, I have yet to figure it out, but it could at least be done indirectly via JavaScript and the inclusion of that javascipt in this file via

config.register_javascript 'active_admin_view_tweaks.js', { defer: true }

I am going to be editing class attributes to make my pages responsive with bootstrap, so I might follow something like this geeksforgeeks article to edit the pages with JavaScript after they've loaded.

I don't know if there is a way to edit the generated layout more directly, but this should work for some cases.

You can override the active admin page layout by putting the following code in your config/intializers/active_admin.rb file:

module AdminPageLayoutOverride
  def build_page(*args)
    within super do
      render "shared/your_custom_view_partial"
    end
  end
end

ActiveAdmin::Views::Pages::Base.send :prepend, AdminPageLayoutOverride

In the above example, I have a custom view file at app/views/shared/_your_custom_view_partial.html.erb location and I am injecting that in all of my active admin pages by the above code.