LogoLogo
Join our community
  • AdminJS
  • Contribute
  • Demo
  • Addons Marketplace
  • Installation
    • Getting started
    • Plugins
      • Adonis
      • Express
      • Nest
      • Fastify
      • Hapi
      • Koa
      • Community Plugins
        • FeathersJS
        • AdonisJS
      • Matrix
    • Adapters
      • TypeORM
      • Sequelize
      • Prisma
      • MikroORM
      • Objection
      • SQL
      • Mongoose
      • Community Adapters
        • AdonisJS
    • What's new in v7?
    • Migration Guide v7
  • Basics
    • Resource
    • Action
    • Property
    • Features
      • Relations
      • Upload
      • Logger
      • Import & Export
      • Password
      • Leaflet Maps
      • Writing your own features
    • API
      • List
      • New
      • Search
      • Show
      • Edit
      • Delete
      • Bulk Delete
    • Themes
    • Authentication
      • FirebaseAuthProvider
      • MatrixAuthProvider
  • How to write an addon?
  • UI Customization
    • Writing your own Components
    • Overwriting CSS styles
    • Dashboard customization
    • Changing the form view
    • Storybook
  • Tutorials
    • Role-Based Access Control
    • Internationalization (i18n)
    • Content Management System
    • Custom components library
    • Custom component internationalization
  • FAQ
    • PDF Generator
    • Charts
    • Forgot Password
  • ⚠️Legacy documentation
Powered by GitBook
On this page
  1. UI Customization

Overwriting CSS styles

Admin comes with default look. As of version 6.4 there is an easy way to change default styles. We added special data-css attributes to essential html tags. Their values are build dynamically and depend on resource, action and container.

Simple example

If we have the resource user we can style entire form as well as individual fields in this form. In this specific case form has data-css="users-edit-form" (edit is an action name). Field password is tagged by users-edit-password

This naming convention give you ability to style every resource, every action and every container separately. You can also use more general attribute selector: for instance [data-css$="edit-form"] to style every form in AdminJS

Configuration

First, you must assure that AdminJS has access to static files. For express based app you should add line similar to this:

import * as url from 'url'
// other imports

const __dirname = url.fileURLToPath(new URL('.', import.meta.url))

app.use(express.static(path.join(__dirname, "../public")));

Next, you should tell AdminJS where your CSS style sheet file is located, placing following code in your config file (where sidebar.css is name your CSS file and its location is in public ):

assets: {
    styles: ["/sidebar.css"],
}

Ready to use example

Below you find simple example changing colors in AdminJS sidebar

:root {
  --topbar-color: white;
  --sidebar-bg-color: darkgray;
  --sidebar-color: white;
  --sidebar-link-color: orange;
}

section[data-css="sidebar"] {
  background-color: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color);
  border: none;
}

section[data-css="sidebar"] svg {
  fill: var(--sidebar-color) !important;
}

a[data-css="sidebar-logo"] {
  background-color: var(--sidebar-bg-color) !important;
}

section[data-css="sidebar-resources"] {
  background: var(--sidebar-bg-color) !important;
}

[data-css="sidebar"] section a {
  background: var(--sidebar-bg-color) !important;
  color: var(--sidebar-color);
}

[data-css="sidebar"] a:hover {
  color: var(--sidebar-link-color);
}
PreviousWriting your own ComponentsNextDashboard customization

Last updated 2 years ago