Jump to content

Dark admin theme


pmarki
 Share

Recommended Posts

It's a module that adds extra color variation to Reno admin theme. Maybe someone will find it useful.

Features (can be disabled or enabled):

  • Sticky header with action button always visible
  • notices at the bottom
  • fixed sidebar
  • Disabled accordion on Pages and Setup
  • domain name with "open home page in new tab"

Not tested with Admin on Steroids. Usable with disabled all option in this module and enabled sticky compact header in AdminOnSteroids. Not everything in every combination play well, but should be ease to set up these modules together.

Before install change admin theme to Reno (works best with blue colors but is usable with Reno and classic) and this module will do the rest. The good idea is to change admin theme for guest as well to enjoy matching login screen.

https://github.com/pmarki/Processwire-Admin-Dark-theme

 

Screenshot_20160822_163543.png

Screenshot_20160822_164008.png

Screenshot_20160822_164048.png

Screenshot_20160822_164152.png

Edited by pmarki
new features
  • Like 5
Link to comment
Share on other sites

Ok, tested - a few things I noticed using 2.8.28:

  1. When using system notifications, the notification bell icon along with its number badge overlap the site URL in the header.
  2. The Modules section in the sidebar appears to be broken - doesn't want to expand?
  3. The main sections in the sidebar should go back to being click to open, I would think...
  4. Can't seem to close Pages and Settings...
  5. I think the selected item in the sidebar shouldn't have that arrow as if Tree is selected, the arrow doesn't server it purpose as it collides with the page header.
  6. #sidebar #main-nav li ul li ul should have a black-based drop shadow as grey never looks good. Change that to: box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.19);

However, I'm very happy with the fixed sidebar and header - that's always something I prefer. However, you should probably implement scrolling in the sidebar as well because some installations have many things that can easily clutter it up.

Well done :) Love the overall effect.

Link to comment
Share on other sites

I guess if you could make the extra features optional and keep only the color tweaks it could be safely used together with AdminOnSteroids, and probably with other similar modules too.

Link to comment
Share on other sites

Thank you for your feedback, I'm really glad seeing someone else interested. My idea was to make most used features easily accessible that's why Pages and Settings are always open, modules configurations always closed and Access is opened on hover (Mike Rockett 2, 3, 4.). With such a configuration you can with one click only check a name of a field or go to template settings still having less frequently used sections collapsed. So it's not a bug, it's a feature :P

I have never used system notification, so will check it.

I'll try to make some features optional in next release as tpr suggested.

UPDATE: Just uploaded small fixes (notification bell, shadow, sidebar scrollbar, header height aligned to sidebar items)

Edited by pmarki
Adding additional info
  • Like 2
Link to comment
Share on other sites

There is a new version of the module, as tpr suggested all features are optional. Now works in AdminOnSteroids, but:

- you can have turned on sticky header in only one module (though in AdminOnSteroids must have sticky compact),
- if you have AOS header "Show host name" doesn't work
- if you have DarkAdmin header "Always show search field" should be disabled and "Place header button next to title" should be enabled
- probably other small glitches, but overall should be usable.

 

  • Like 1
Link to comment
Share on other sites

Looks like it works fine with AOS, thanks!

There was 2 light lines in the header that I just removed from AOS.

FYI, If you need to style something differently for AOS, you can use 'html.aos {...}' in your CSS (or 'html:not(.aos) {...}').

  • Like 1
Link to comment
Share on other sites

On 12.09.2016 at 8:53 AM, tpr said:

Looks like it works fine with AOS, thanks!

There was 2 light lines in the header that I just removed from AOS.

FYI, If you need to style something differently for AOS, you can use 'html.aos {...}' in your CSS (or 'html:not(.aos) {...}').

I just didn't want to override to much AOS css, that's why those 2 light lines were left untouched.

 

On 12.09.2016 at 8:58 AM, tpr said:

Just spotted that this line shouldn't have a comma.

Thanks, fixed.

Edited by pmarki
fixed
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...