admin area WHMCS Admin Dark Mode (for Blend Theme)

[WevrLabs]

Hi everyone!

Since I spend most of my time during the day on the WHMCS admin dashboard, answering tickets, activating services, following up with stuff, etc. I wanted to keep eye strain to a minimum, so I recently created this CSS file to turn our admin area into a dark look and feel.

-------

 

Today, I'd like to share with you steps to achieve that.

The file is compatible with Blend theme of v7.9.2 of WHMCS, I haven't tested it on the other versions yet.

The process is pretty simple and straightforward  IF YOU HAVEN'T MADE ANY CUSTOMIZATIONS to your Blend theme already.

So just download the attached file (blend-dark.zip) and extract it anywhere in your computer.

 

 

Next, open the folder and then the "images" folder to locate the (logo-dark.psd) file to edit it by placing your own logo there. Then save it as "logo-dark.gif" replacing the already existing file.

 

 

Now you should end up with a file tree like this ...

blend
|__ css
|	|__ admin-dark.css
|	|
|__ images
|	|__ logo-dark.gif
|	|__ logo-dark.psd
|
|__ header.tpl

 

Now back top and compress your "blend" folder ... Name it something memorable, like "blend-2222.zip" in this example.

 

 

Next navigate to the "admin" folder inside your WHMCS installation, and open the "templates" folder (based on your customizations, the "admin" folder name may differ, so this here presumes the default setting).

/path/to/whmcs/admin/templates/

 

Next make sure to ZIP and backup your current Blend theme folder (name it something like "blend-original.zip).

 

 

Next, upload the "blend-2222.zip" you compressed earlier to the "templates" folder and unzip it, and you should be all set and ready!

 

 

If you have any notes or additions, please feel free to add!

Also, any mistakes or errors are unintentional, please feel free to share and highlight them.

Wishing everyone a good day!

- Mohamed

 

[WevrLabs]

Apologies, it seems I forgot to attach the file.

blend-dark.zip

[brian!]

On 27/05/2020 at 09:56, WevrLabs said:

If you have any notes or additions, please feel free to add!

instead of modifying header.tpl, I would have been tempted to use a hook because as far as I can tell, there are only two changes in the template...

1. adding a link to the custom dark css file.
2. the changing of the WHMCS logo.

so the first you can inject with an adminareaheadoutput hook without any issue; the second is a pain because the logo url is hardcoded in the template...

one option would be to just replace the default whmcs logo.gif file... yes, you'll have to replace it after each update - but theoretically you're going to have to check the css still works after every update too - especially a major update.

the other two quick alternatives would be to just remove the logo using CSS (you already know which company you're working for - so unless you are logging into multiple different installs, then you don't need the WHMCS logo)... or you use JS to change the image on the fly (that would work, but you might see the default logo first and then the replacement logo loading afterwards).

<?php

function admin_dark_blend_css_hook($vars) 
{
	$currenttemplate = $vars['template'];
	if ($currenttemplate == "blend" ) {
		$head_return = '';
		$head_return = '<link href="templates/blend/css/admin-dark.css" rel="stylesheet" type="text/css" />
		<style>.logo {display: none;}</style>';
		return $head_return;
	}
}
add_hook("AdminAreaHeadOutput",1,"admin_dark_blend_css_hook");

that way, if you need to disable the dark blend theme, you can just disable/remove the hook and it will default back to using "normal" blend. 🙂

[WevrLabs]

Hi Brian! ...

Thanks for the tips! really helpful!

It is indeed painful having to update the header.tpl after each update, so it is the best way to do it with hooks instead of modifying it each time  ... I didn't think of this approach since I am not so much familiar with hooks.

As for the logo, the JS method seems like the best option in this case. Would you mind sharing a code for achieving that?

TIA ☺️!

- Mohamed

[brian!]

Hi Mohamed,

3 minutes ago, WevrLabs said:

As for the logo, the JS method seems like the best option in this case. Would you mind sharing a code for achieving that?

<?php

function admin_custom_css_hook($vars) 
{
	$currenttemplate = $vars['template'];
	if ($currenttemplate == "blend" ) {
		$head_return = '';
		$head_return = '<link href="templates/blend/css/admin-dark.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript">		
		$(document).ready(function() {
			$(\'.header .logo img\').attr(\'src\', \'templates/blend/images/logo-dark.gif\');
		})
		</script>';
		return $head_return;
	}
}
add_hook("AdminAreaHeadOutput",1,"admin_custom_css_hook");

there was two bugs in the original hook - first, it was changing the logos on the marketconnect pages with your logo(!)... i've fixed that by being more accurate with the logo .css reference in the hook.

the second bug is when you look at admin pages that appear to be in a subdirectory (due to Friendly URL settings), e.g the setup pages for notifications, security settings etc, the logo is broken - that's purely down to the path to the image being wrong... I suspect that would be fixed by either expanding the hook for those conditions or referencing the replacement image with a full URL rather than a relative path.

[zitu4life]

On 5/27/2020 at 7:56 AM, WevrLabs said:

Since I spend most of my time during the day on the WHMCS admin dashboard, answering tickets, activating services, following up with stuff, etc. I wanted to keep eye strain to a minimum, so I recently created this CSS file to turn our admin area into a dark look and feel.

Congratulations, you did a great job and nice tutorial.

[WevrLabs]

2 hours ago, zitu4life said:

Congratulations, you did a great job and nice tutorial.

Thanks @zitu4life ... Hope it be of great help for you 😃!

[WevrLabs]

Here's an updated and more enhanced version of the CSS file.

admin-dark.css

Upload this file to the following path (based on your customizations, the "admin" folder name may differ, so this here presumes the default setting.)

/path/to/whmcs/admin/templates/blend/css/

As brian suggested above, it is better and more convenient to use a hook to call the file, instead of directly linking it in the header.tpl ... So create a hook and name it something like "darkblend.php".

As for the logo, we'll use the JS method described above as well, but with exception of providing the whole URL for the logo image (to avoid 404 on some pages in the admin area).

Hook file content:

<?php

// Contributed by brian! (https://whmcs.community/profile/210329-brian/)

function admin_custom_css_hook($vars) 
{
	$currenttemplate = $vars['template'];
	if ($currenttemplate == "blend" ) {
		$head_return = '';
		$head_return = '<link href="templates/blend/css/admin-dark.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript">		
		$(document).ready(function() {
			$(\'.header .logo img\').attr(\'src\', \'https://dash.wevrlabs.net/assets/img/logo-dark.gif\');
		})
		</script>';
		return $head_return;
	}
}
add_hook("AdminAreaHeadOutput",1,"admin_custom_css_hook");

don't forget to change

https://dash.wevrlabs.net/assets/img/logo-dark.gif

with the correct full URL path of your own image.

[brian!]

it might be worth putting this in a GitHub and adding a link to it in Marketplace - who knows what's going to happen to Blend after v8, but that's going to be many months away at best.

[WevrLabs]

Done!

http://github.com/WevrLabs-Group/WHMCS-Blend-Admin-Theme-Dark-Mode

[lims]

like this blend-dark themes

want use more switch css between dark and default

is there some hook code ?

need @brian!

[brian!]

21 hours ago, lims said:

is there some hook code ?

I would just use the hook code I posted above, or Mohamed's tweaked version of it - that will enable the dark theme...

then if you decide you don't want to use the dark theme and switch to light Blend, then I would just rename the hook extension to .php9 and it won't be loaded by WHMCS... and then change the extension back to .php when you want the dark theme again.

I suppose you could duplicate the entire blend theme, add the css to the duplicate, modify it's header.tpl and then you could switch between dark and light from the admin settings...

[WevrLabs]

Hi @lims!

So, as brian suggested, to disable and enable just simply rename the hook file.

Also, I have updated the repository to make the installation process even more simple in addition to further enhancements to appearance. Please check the Github repository.

http://github.com/WevrLabs-Group/WHMCS-Blend-Admin-Theme-Dark-Mode

[brian!]

1 hour ago, WevrLabs said:

Also, I have updated the repository to make the installation process even more simple in addition to further enhancements to appearance.

isn't there two L in installation ?? not on GitHub apparently! 😛

also spotted a couple of issues - there is a problem with the To-Do List widget...

... and the mergefields in Email Templates aren't very readable...

[WevrLabs]

2 hours ago, brian! said:

isn't there two L in installation ?? not on GitHub apparently! 😛

 

LoL! mostly I rely on Grammarly to auto-correct stuff as I type, but for some reason it seems like it does not load on the Invision editor, that's why I missed it 😃.

2 hours ago, brian! said:

also spotted a couple of issues - there is a problem with the To-Do List widget...

For the To-Do widget, I intended to make it look this way as I noticed with the original look, sometimes elements could get scattered for lists with long titles, so I just wanted to make the look even in all list items blocks. But I get on it right away and modify it to be more convenient in look.

2 hours ago, brian! said:

... and the mergefields in Email Templates aren't very readable...

I'll fix text colors in these as well.

[HostMaria]

:) cool 

[lims]

phpinfo not light

and some other popup in views send clients emails, Credit Management, edit domain pricing, that show original not dark

[lims]

i have modify navigation menu color by remove this

.navigation ul li ul li {
    background-color: #091527 !important;
    border-color: #3a3a3a !important;
}
.navigation ul li ul li:first-child {
    border-color: #3c3c3c !important;
}
.navigation ul li ul li a, .navigation ul li ul li:hover ul li a, .navigation ul li:hover ul li a {
    color: #949494 !important;
}

before

after

i have very interest your css themes this good for eye..

and need more update from you, we will waiting the next update

Regards

thank you

[WevrLabs]

On 6/11/2020 at 12:23 PM, lims said:

i have very interest your css themes this good for eye..

and need more update from you, we will waiting the next update

Regards

thank you

Thanks @lims !

I do my best in updating and modifying and adjusting it to the various sections of the admin area. I'll keep sharing here any updates or modifications with the community  ☺️!

Best wishes!

[pRieStaKos]

Great Work @WevrLabs