ブートストラップを使用したActiveAdminの再スキンク

Question

ブートストラップテンプレートテーマを使用してActiveAdminを再スキンしたいとします。しかし、私はそれに合わせてページのレイアウトを変更する必要があります。

私が欲しいものに合わせてActiveAdminのレイアウトを上書きすることはできますか？通常の慣習とは違って見えますが、私はむしろ通常のテンプレートを使用してそれを達成し、必要な順番で必要なコンテンツの部分を生成したいと思います。

Answer 1

Iveはこれまでに同様のことをしました。この骨子をチェックhttps://gist.github.com/bigfive/6017435

は基本的にあなたがそう

ようARBRE view_factory上のメソッドを呼び出すことができます active_admin_reskinレイアウトで

# config/initializers/active_admin_patch.rb 
module ActiveAdmin 
    class BaseController 
    def determine_active_admin_layout 
     'active_admin_reskin' 
    end 
    end 
end 

そして、その:determine_active_admin_layout方法オーバーライドすることで、あなたの新しいレイアウトを使用するために、アクティブな管理ベースコントローラにパッチを適用

view_factory[#{params[:action]}_page"].new(Arbre::Context.new(assigns, self)).send(:build_header) 

要点（https://gist.github.com/bigfive/6017435）では、Iveはこれらのメソッドを簡単に呼び出すための小さなヘルパーを作成しました。

は、特にここでは、様々なARBRE文書で使用可能である方法を参照するには、アクティブな管理のソースコードを見てください：https://github.com/gregbell/active_admin/blob/master/lib/active_admin/views/pages/base.rb

マークアップは、あなたが好きなように変更されたら、あなたはactive_admin.css.scssに@include 'bootstrap'することができますジェネレータが作成してナットしたファイル。

Answer 2

使用しているAAのバージョンによって異なります。

（0.6.0 <コミット：ec9996406df5c07f4720eabc0120f710ae46c997を）：

はあなたSCSSが含まれていますが、body.active_adminグループであなたのCSSセレクタをカプセル化します。さらに、特異性が重要なので、AAのデフォルトのスタイルをオーバーライドする場合は、必要な動作を得るために完全なセレクタをオーバーライドする必要があります。

これらのスタイルを使用してこれらのスタイルを上書きする場合は、AA's stylesheetsを参照して、サイトのスタイルをどのように変更するかを確認してください。 AAスタイルシートが含まれていれば、カスタムスタイリングを含めるだけです。

後コミット：ec9996406df5c07f4720eabc0120f710ae46c997

スタイルシートの名前空間は、最近削除されている、と私はthroroughlyまだ意味合いをテストしていません。

Answer 3

簡単な答えが載るでしょう

@import "bootstrap"; active_admin.css.scssに

公式には、今https://github.com/gregbell/active_admin/issues/1027

Answer 4

BigFiveの受け入れ答えは、最初に私のために働いたが、その後の形でエラーをレンダリングするときにカスタムパーシャルをレンダリングする際にいくつかのバグを生産したりするためにサポートされていないその。

彼のアプローチに触発されて、AAがレイアウトを動的に生成するために使用する個々のメソッドをオーバーライドするように変更しました（AAは簡単に変更できる静的レイアウトファイルを使用しないため）。

ソースコードで利用できるメソッドを見つけることはできますが、それはわかりやすく、html elementで始まります。

例：

いくつかのクラスを追加して再編成する要素：

あなたにはあなたのスタイルを置くことができます。

資産/スタイルシート/ active_admin.css.scss

し、HTML説明：

設定/初期化/ active_admin_patch.rb：

module ActiveAdmin 
    module Views 
    class Header 

     alias_method :original_build_site_title, :build_site_title 
     alias_method :original_build_global_navigation, :build_global_navigation 
     alias_method :original_build_utility_navigation, :build_utility_navigation 

     def build_site_title 
     div class: "side_bar_top" do 
      original_build_site_title 
     end 
     end 

     def build_global_navigation 
     div class: "side_bar_content" do 
      original_build_global_navigation 
     end 
     end 

     def build_utility_navigation 
     div class: "side_bar_footer" do 
      original_build_utility_navigation 
     end 
     end 
    end 

    module Pages 
     class Base 

     alias_method :original_build, :build 

     # This should be the same as add_classes_to_body but for the html main element 
     def add_classes_to_html_tag 
      document.add_class(params[:action]) 
      document.add_class(params[:controller].gsub('/', '_')) 
      document.add_class("active_admin") 
      document.add_class("logged_in") 
      document.add_class(active_admin_namespace.name.to_s + "_namespace") 
     end 

     def build(*args) 
      original_build 
      add_classes_to_html_tag 
     end 

     def build_page 
      within @body do 
      div id: "wrapper" do 
       div id: "details_view" do 
       build_title_bar 
       build_page_content 
       #build_footer 
       end 
       div id: "master_view" do 
       build_header 
       end 
      end 
      end 
     end 
     end 
    end 
    end 
end