Adding icons to ActiveScaffold’s actions

Problem
You want to replace the standard text descriptions in ActiveScaffold’s actions with your icons.

Solution

  1. Create a file called active_scaffold_overrides.css in ror_project/public/stylesheets
  2. Copy the css code from ror_project/vendor/plugins/active_scaffold/frontends/default/stylesheets/stylesheet.css and paste it in to the file created in the previous step.
  3. Create a directory my_images in ror_project/public/images/activescaffold to hold your images.
  4. Copy to the new directory the images you want to use in the application.
  5. In the active_scaffold_overrides.css file find the section named:
    /* Table :: Actions (Edit,Delete) .... */

    and for each action that you want to use an icon add (ie edit)

    .active_scaffold tr.record td.actions a.edit {
        display:     block;
        width:        16px;
        height:       16px;
        background: transparent url(../../../images/active_scaffold/my_images/image.png) no-repeat right 50%;
    }
  6. In the application.rb, if you want the links to be the same for the whole application add:
    ActiveScaffold.set_defaults do |config|
        config.update.link.label =""
    end
  7. in your layout/application.rhtml (create one if you don’t already have one), include
    <%= stylesheet_link_tag "active_scaffold_overrides" %>
  8. Restart webrick/mongrel