Dark admin theme

[pmarki]

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

 

Edited September 7, 2016 by pmarki
new features

[tpr]

I just tried with AdminOnSteroids and most features of AOS works fine with the module. There are issues with sticky header and there are probably other CSS conflicts. 

[Mike Rockett]

I like this, will test it out shortly.

[Mike Rockett]

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.

[tpr]

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.

[pmarki]

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

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 August 23, 2016 by pmarki
Adding additional info

[pmarki]

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.

 

[tpr]

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) {...}').

[tpr]

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

[pmarki]

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 September 13, 2016 by pmarki
fixed