How to modified ActiveAdmin in Rails

modifiled thems,fix ui,add view of you rails models into active admin

Here’s a step-by-step guide to customize ActiveAdmin themes, fix UI issues, and add views for your Rails models into ActiveAdmin:

---

✅ 1. Modify ActiveAdmin Themes (UI Customization)

ActiveAdmin comes with basic styling via Arbre, ActiveAdmin Stylesheets (based on ActiveAdmin::Base), and scss.

👉 Change ActiveAdmin Styles:

Locate:

bashCopyEditapp/assets/stylesheets/active_admin.scss

Example:

scssCopyEdit// Active Admin Customizations
@import "active_admin/mixins";
@import "active_admin/base";

body.active_admin {
  .header {
    background-color: #1d3557;
  }

  .main_content {
    background: #f1faee;
    color: #333;
  }

  .sidebar {
    background-color: #457b9d;
    color: white;
  }

  .footer {
    background-color: #1d3557;
    color: white;
  }
}

✅ Customize Fonts & Buttons:

scssCopyEditbody.active_admin {
  font-family: 'Arial', sans-serif;
  .button {
    background-color: #e63946;
    &:hover {
      background-color: #d62828;
    }
  }
}

Recompile Assets:

bashCopyEditrails assets:precompile

---

✅ 2. Fix ActiveAdmin UI Issues

If you see layout or CSS bugs:

• Ensure correct SCSS imports:

scssCopyEdit@import "active_admin/mixins";
@import "active_admin/base";

• Use browser inspector (F12) to debug conflicting styles.

• For forms/inputs breaking:

scssCopyEdit.active_admin .input {
  width: 100%;
  max-width: 500px;
}

• Fix responsive issues:

scssCopyEditbody.active_admin {
  .main_content {
    padding: 20px;
  }
}

---

✅ 3. Add Views for Rails Models in ActiveAdmin

Example: Add Product Model

bashCopyEditrails generate active_admin:resource Product

This creates app/admin/products.rb

rubyCopyEditActiveAdmin.register Product do
  permit_params :name, :price, :description, :stock

  index do
    selectable_column
    id_column
    column :name
    column :price
    column :stock
    actions
  end

  filter :name
  filter :price
  filter :stock

  form do |f|
    f.inputs "Product Details" do
      f.input :name
      f.input :price
      f.input :description
      f.input :stock
    end
    f.actions
  end
end

---

✅ Add Custom Show View (Detailed Page):

rubyCopyEditshow do
  attributes_table do
    row :name
    row :price
    row :description
    row :stock
    row :created_at
    row :updated_at
  end
end

---

✅ Bonus: Add Custom Pages in ActiveAdmin:

bashCopyEditrails generate active_admin:page "Dashboard"

Example:

rubyCopyEditActiveAdmin.register_page "Dashboard" do
  content do
    para "Welcome to the Admin Dashboard!"
  end
end