Tony's Collections
Tony's Bundles
tony /
Active Admin Theme
Active Admin Theme
Active Admin theme makes Active Admin look nice.
Setup
Add the css file to your active admin css. Replace
URL_HERE
with the url from the Files tab.# config/initializers/active_admin.rb config.register_stylesheet 'URL_HERE'
Restart your server
If necessary, tweak the variables to your liking.
html { --styled-active-admin-body-bg-color: blue; }
Code
:root {
--styled-active-admin-body-bg-color: #f6f6f6;
--styled-active-admin-sidebar-bg-color: #f4542c;
--styled-active-admin-button-color: #f4542c;
--styled-active-admin-button-hover-color: #e04923;
--styled-active-admin-sidebar-text-color: #fff;
--styled-active-admin-sidebar-active-link-color: #191919;
--styled-active-admin-sidebar-active-link-bg-color: rgba(255,255,255,1);
--styled-active-admin-sidebar-link-hover-color: rgba(255,255,255,1);
--styled-active-admin-sidebar-link-hover-bg-color: transparent;
--styled-active-admin-border-radius-sm: 5px;
--styled-active-admin-border-radius-md: 10px;
--styled-active-admin-form-input-height: 50px;
}
#footer {
display: none;
}
body {
background-color: var(--styled-active-admin-body-bg-color);
}
.header .site_title,
.header #tabs {
background-color: var(--styled-active-admin-sidebar-bg-color);
color: var(--styled-active-admin-sidebar-text-color);
}
.header #tabs {
border-right: none;
padding: 0 12px;
}
.header #tabs li a,
.header #tabs li.has_nested ul a {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
display: flex;
align-items: center;
color: var(--styled-active-admin-sidebar-link-color);
border-radius: var(--styled-active-admin-border-radius-sm);
}
.header #tabs li a:hover {
background: var(--styled-active-admin-sidebar-link-hover-bg-color);
color: var(--styled-active-admin-sidebar-link-hover-color);
}
.header #tabs li.current > a,
.header #tabs li.current > a:hover,
.header #tabs li.has_nested ul a:hover {
background-color: var(--styled-active-admin-sidebar-active-link-bg-color);
color: var(--styled-active-admin-sidebar-active-link-color);
}
.header #tabs li.has_nested ul {
background-color: unset;
border-top: unset;
border-bottom: unset;
padding: 5px;
}
.header #tabs li.has_nested ul li {
margin-bottom: 3px;
}
.header #utility_nav {
display: none;
}
body.active_admin {
padding-top: 0px !important;
}
.header .site_title {
text-align: left;
padding-left: 20px;
border-bottom: none;
}
#title_bar #titlebar_right .action_item a,
body.index .table_actions .member_link,
input[type="submit"],
body.index .scopes .scope:active a,
body.index .scopes .scope:focus a,
body.index .scopes .scope.selected a,
input[type="checkbox"]:checked {
background-color: var(--styled-active-admin-button-color);
}
#title_bar #titlebar_right .action_item a:hover,
body.index .table_actions .member_link:hover,
input[type="submit"]:hover {
background: var(--styled-active-admin-button-hover-color);
}
#active_admin_content {
display: flex
}
body.index #sidebar {
position: unset;
}
body.logged_in.edit .input select,
body.logged_in.create .input select,
body.logged_in.update .input select {
height: var(--styled-active-admin-form-input-height) !important;
width: 50% !important;
}
body.index #main_content {
background-color: unset;
padding: unset;
box-shadow: unset;
}
.paginated_collection_contents {
background: #fff;
border-radius: var(--styled-active-admin-border-radius-sm);
padding: 10px;
thead tr,
tbody tr {
border: none
}
}
thead tr {
background-color: var(--styled-active-admin-body-bg-color);
th,
th a {
font-weight: bold;
}
}
.paginated_collection_contents,
.sidebar_section.panel {
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
}
#sidebar .sidebar_section input[type="submit"] {
height: unset;
}
#login {
border-top: 0px;
border-radius: var(--styled-active-admin-border-radius-md);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}
.header #tabs li.has_nested > a:nth-child(1):after {
color: #fff;
}
.header #tabs li.has_nested.current > a:nth-child(1):after {
color: #000;
}
.header #tabs li.has_nested ul a {
padding: 0 15px;
}
Add this to the <head> of your page