Building an admin dashboard

One of the biggest problems with Wordpress is the damn admin dashboard, despite the fact that Wordpress was made in 2003 the admin dashboard UI looks like complete garbage. For reference at the time this document was made this is how the dashboard looks.

The reason

As you can see the dashboard UI looks ancient & cluttered. The goal of this documentation is to build a Admin Dashboard that actually looks modern, presentable and is much more homogeneous in it's design ( well at least as much as possible). The approach for this is going to be quite straightforward, we will just be changing the CSS of the the WordPress admin as we do not want any of the functionality to change. The challenge is going to be to create a dashboard that is scalable in terms of adding plugins and updates to WordPress versions without it breaking anything. There are obviously plugins that can do this but they are often insanely buggy or paid and well I don't really want to add another plugin to the entire thing ( WordPress has to many of this already). The reason why this became important was because of Rundown. Handing of WordPress builds to clients is fine until the login to the dashboard that looks like shit and doesn't actually present them with any useful information.

Design Inspiration

To keep things simple we are just going to use one or two main reference points, both of theme have been taken from [[#Ronas IT]]

Inpo 1 White Theme

Inspo 2 Dark Theme

Now to evaluate between these two I am most likely going to go for a black theme as it represents Rundown's brand colors. I will however not be sticking to the exact color pallet from the brand as the black and the lighter black are going to be from this. Also do keep in mind I am sticking to the black theme as we have finite number of plugin that we will be using and I can customize all of them as they are known.

In case for each project you do not know what plugins you are going to be using I would recommend going for a white theme as the color scheme is less bound to break in that case scenario. The code remains the same however.

Breakdown of All Changes

Here is a list of all the aspects of the admin dashboard that we are going to be changing and customizing:

1. Dashboard: We will be making a custom dashboard that actually will shows clients, editors and most user important and relevant information. This is going to be implemented using white label cms and Elementor plugins. Other than this particluar page the rest of the sections are going to be changed using Admin & Site Enhancements plugin.
2. Posts Page
3. Media Page
4. Pages
5. Comments
6. Appearance
7. Plugins
8. Users
9. Settings
10. ACF
11. LiteSpeed Cache ( not sure about this for now )
12. Elementor
13. Hello theme
14. top admin bar
15. notices
16. Google site kit
17. Woocommerce
18. Plugins
19. WordPress Updates
20. Product Page
21. Payments Page
22. Analytics
23. Marketing
24. WP Mail SMTP

#adminmenu, #adminmenu .wp-submenu, #adminmenuback, #adminmenuwrap {
  width: 180px;
  background-color: #0a0903;
}

body {
  background: #0a0903;
  color: #3c434a;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size: 13px;
  line-height: 1.4em;
  min-width: 600px;
}

#wpadminbar {
  direction: ltr;
  color: #c3c4c7;
  font-size: 16px;
  font-weight: 400;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  line-height: 2.46153846;
  height: 42px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 600px;
  z-index: 99999;
  background: #0a0903;
  outline: 1px solid transparent;
}

h1 {
  color: #fff;
  font-size: 2em;
  margin: .67em 0;
}

input[type="color"], input[type="date"], input[type="datetime-local"], input[type="datetime"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea {
  box-shadow: 0 0 0 transparent;
  border-radius: 4px;
  border: 1px solid #8c8f94;
  background-color: #191919;
  color: #fff;
}

.wp-core-ui .button, .wp-core-ui .button-secondary {
  color: #fff;
  border-color: #ec6523;
  background: #ec6523;
  vertical-align: top;
}

.wp-core-ui select {
  font-size: 14px;
  line-height: 2;
  color: #fff;
  border-color: #9D9D9D;
  box-shadow: none;
  border-radius: 5px;
  padding: 0 34px 0 15px;
  min-height: 30px;
  max-width: 25rem;
  -webkit-appearance: none;
  background: #191919 url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
    background-size: auto;
  background-size: 16px 16px;
  cursor: pointer;
  vertical-align: middle;
  border-width: 0;
}


.comment-ays, .feature-filter, .popular-tags, .stuffbox, .widgets-holder-wrap, .wp-editor-container, p.popular-tags, table.widefat {
  background: #191919;
}


#menu-management .menu-edit, #menu-settings-column .accordion-container, .comment-ays, .feature-filter, .manage-menus, .menu-item-handle, .popular-tags, .stuffbox, .widget-inside, .widget-top, .widgets-holder-wrap, .wp-editor-container, p.popular-tags, table.widefat {
  border: 1px solid #c3c4c7;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  border-radius: 5px;
}

body {
  color: #fff;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size: 13px;
  line-height: 1.4em;
}

.widefat tfoot tr td, .widefat tfoot tr th, .widefat thead tr td, .widefat thead tr th {
  color: #fff;
}

#nav-menu-footer, #nav-menu-header, #your-profile #rich_editing, .checkbox, .control-section .accordion-section-title, .menu-item-handle, .postbox .hndle, .side-info, .sidebar-name, .stuffbox .hndle, .widefat tfoot td, .widefat tfoot th, .widefat thead td, .widefat thead th, .widget .widget-top {
  line-height: 2em;
}

a {
  color: #fff;
  transition-property: border,background,color;
  transition-duration: .05s;
  transition-timing-function: ease-in-out;
}

.widefat * {
  word-wrap: break-word;
  background-color: #191919;
}

#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
  background: #1a7e80;
  color: #fff;
}

#wpbody {
  position: relative;
  padding: 50px;
}

.jBox-Modal.admin-notices-modal .jBox-content {
  padding: 8px 28px 32px;
  background-color: #191919;
}

h2, h3 {
  color: #fff;
  font-size: 1.3em;
  margin: 1em 0;
}

.notice, div.error, div.updated {
  background: #191919;
  border: 1px solid #c3c4c7;
  border-left-width: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  margin: 5px 15px 2px;
  padding: 1px 12px;
}

.hostinger-reach-notice .hostinger-reach-notice-content h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 0;
}

.plugins .active td {
  background-color: #191919;
}

widefat p, .widefat ul {
  color: #fff;
}

.notice-warning.notice-alt {
  background-color: #191919;
}

.notice, div.error, div.updated {
  background: #191919;
    background-color: rgb(25, 25, 25);
  border: 1px solid #c3c4c7;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(195, 196, 199);
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(195, 196, 199);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(195, 196, 199);
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: rgb(195, 196, 199);
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
  border-left-width: 01px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  margin: 5px 15px 2px;
  padding: 1px 12px;
  border-radius: 10px;
}

widefat p {
  color: #fff;
}

.widefat td, .widefat td ol, .widefat td p, .widefat td ul {
  font-size: 13px;
  line-height: 1.5em;
  color: #fff;
}

.plugins .active th.check-column {
  border-left: 4px solid #239fae;
}

input[type="checkbox"], input[type="radio"] {
  border: 1px solid #ec6523;
  border-radius: 4px;
  background: #191919;
  color: #50575e;
  clear: none;
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  height: 1rem;
  margin: -.25rem .25rem 0 0;
  outline: 0;
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
  width: 1rem;
  min-width: 1rem;
  -webkit-appearance: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
  transition: .05s border-color ease-in-out;
}

.eui-sxgjea {
  color: rgb(12, 13, 14);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  border-radius: 4px;
  background-color: #191919;
  display: flex;
  -moz-box-pack: justify;
  justify-content: space-between;
}

.eui-sxgjea {
  color: #fff;
}

.eui-161n58v {
  margin: 0px;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  letter-spacing: 0.01071em;
  color: #fff;
}

.eui-1lbipf0 {
  color: rgb(12, 13, 14);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
  border-radius: 4px;
  background-color: #191919;
  display: flex;
  flex-direction: column;
  padding: 24px 32px;
  gap: 16px;
  background-image: none;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

.eui-1lbipf0 {
  color: #fff;
}

.wlcms_content .wlcms-body-wrapper {
  background: #191919;
  border: 1px solid #f1f1f1;
  margin-bottom: 20px;
  border-radius: 10px;
}

#footer-left img {
  vertical-align: top;
  max-height: 30px;
  margin-right: 5px;
  margin-left: 10px;
}

#wpfooter p {
  font-size: 18px;
  margin: 20px;
  line-height: 1.95;
}

#wpfooter {
  color: #fff;
}

body {
  color: #fff;
  font-family: poppins;
  font-size: 13px;
  line-height: 1.4em;
}

.attachments-browser .media-toolbar {
  right: 300px;
  height: 72px;
  background: #191919;
}

.wp-filter {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  margin: 12px 0 25px;
    margin-bottom: 25px;
  padding: 0 10px;
  width: 100%;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  border: 1px solid #c3c4c7;
  background: #fff;
  color: #50575e;
  font-size: 13px;
  border-radius: 10px;
}

.wp-filter {
  color: #fff;
  font-size: 13px;
}

.media-frame input[type="color"], .media-frame input[type="date"], .media-frame input[type="datetime-local"], .media-frame input[type="datetime"], .media-frame input[type="email"], .media-frame input[type="month"], .media-frame input[type="number"], .media-frame input[type="password"], .media-frame input[type="search"], .media-frame input[type="tel"], .media-frame input[type="text"], .media-frame input[type="time"], .media-frame input[type="url"], .media-frame input[type="week"], .media-frame select, .media-frame textarea {
  box-shadow: 0 0 0 transparent;
  border-radius: 5px;
  border: 1px solid #8c8f94;
  background-color: #191919;
  color: #fff;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  font-size: 13px;
  line-height: 1.38461538;
}

.media-frame-content[data-columns="9"] .attachment {
  width: 20%;
}

.wp-core-ui .attachment-preview {
  position: relative;
  box-shadow: inset 0 0 15px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.05);
  background: #f0f0f1;
  cursor: pointer;
  border-radius: 10px;
}

.wp-core-ui .attachment .thumbnail {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  transition: opacity .1s;
  border-radius: 10px;
}

.media-modal-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  min-height: 300px;
  box-shadow: 0 5px 15px rgba(0,0,0,.7);
  background: #191919;
  -webkit-font-smoothing: subpixel-antialiased;
}

.edit-attachment-frame .attachment-media-view .thumbnail {
  box-sizing: border-box;
  padding: 16px;
  height: 100%;
  background-color: #191919;
}

.edit-attachment-frame .attachment-info {
  overflow: auto;
  box-sizing: border-box;
  margin-bottom: 0;
  padding: 12px 16px 0;
  width: 35%;
  height: 100%;
  box-shadow: inset 0 4px 4px -4px rgba(0,0,0,.1);
  border-bottom: 0;
  border-left: 1px solid #dcdcde;
  background: #191919;
}

#e-admin-top-bar-root .e-admin-top-bar__heading-title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  padding: 0 8px;
}

#e-admin-top-bar-root .e-admin-top-bar {
  display: flex;
  height: 50px;
  justify-content: space-between;
  padding: 0 16px;
  background-color: #191919;
  border-radius: 0.9px 0.9px 0 0;
    border-top-left-radius: 0.9px;
    border-top-right-radius: 0.9px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  border-width: 1px;
  margin-top: 0px;
  border-color: #000;
}

.subsubsub a.current {
  color: #fff;
}

#wpcontent {
  margin-left: 180px;
  background-color: #191919;
}

#wpcontent {
  margin-left: 190px;
  background-color: #191919;
  border-radius: 10px;
  margin-top: 20px;
}

@media (min-width: 960px) {
  .woocommerce-layout__header, #e-admin-top-bar-root {
    width: calc(99.2% - 180px);
  }
}