status tag colors with ActiveAdmin
Better to go with custom class approach
status_tag 'TAG', class: 'class'
In the repo you can see that only a few colours are available, namely green, orange and red.
.status_tag {
background: darken($secondary-color, 15%);
color: #fff;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 3px 5px 2px 5px;
font-size: 0.8em;
&.ok, &.published, &.complete, &.completed, &.green { background: #8daa92; }
&.warn, &.warning, &.orange { background: #e29b20; }
&.error, &.errored, &.red { background: #d45f53; }
}
If you want to add new ones, you will have to edit your active_admin.css.scss like so
body.active_admin {
.status_tag.blue { background: #63B8FF; }
}
We can override ActiveAdmin status_tag (Yes/No) style classes by defining our own style classes inside your active_admin.scss
. I'm using ruby '2.5.3'. I just wanted to style my Yes/No status_tags in different colors instead of default gray and this worked for me.
body.active_admin {
.status_tag.yes {
background: #a9c68d;
}
}
body.active_admin {
.status_tag.no {
background: #b3b3b3;
}
}
Now my dashboard looks like this.