Jump to content

Recommended Posts

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.

208692787_ScreenShot2020-05-27at10_10_40AM.thumb.png.6665e84a6b5204626c6636414814decb.png

-------

1439941684_ScreenShot2020-05-27at7_00_39AM.thumb.png.1e8b509c4d0f555762ef5e63345e2903.png

 

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.

 

15788643_ScreenShot2020-05-27at9_45_29AM.thumb.png.be067a069482d972099c1ea7b1a4dae2.png

 

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.

 

263006323_ScreenShot2020-05-27at10_32_33AM.thumb.png.82b344cf057913303ac87f6ca7b298b0.png

 

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.

 

383815628_ScreenShot2020-05-27at10_35_21AM.png.b76f7bab2b88dc419d3562cee5085145.png

 

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).

 

241306387_ScreenShot2020-05-27at8_19_06AM.thumb.png.d936ab780340ec21e8ec32a6b76a3759.png

 

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

 

2090704143_ScreenShot2020-05-27at10_51_03AM.thumb.png.aa173406265370d37d3154d4a1dd540d.png

 

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

 

Share this post


Link to post
Share on other sites
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");

gLitFkw.png

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. 🙂

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
2 hours ago, zitu4life said:

Congratulations, you did a great job and nice tutorial.

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

like this blend-dark themes

want use more switch css between dark and default

is there some hook code ?

need @brian!

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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...

yyWRMqm.png6KzWcIX.png

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

LIdjvT1.png

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

phpinfo not light

phpinfo.JPG.0ad878813442b79998516e9193db665d.JPG

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

credit.JPG.fe18ae13bc7ae00b2d408d2e4a019749.JPG

Share this post


Link to post
Share on other sites

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

menu_1.png.242284e7f683f9c2d397c1e305b542f4.png

after

menu_2.png.808e26d4f1a50d76e1c22a2b874e05a5.png

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

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By zitu4life
      Hello there
      If we goo to to reports menu and trying to (simulate printing reports)...
      Reports»annual income report»on tools bellow help link
      we can view Printable version, so if we click on that it will open a version to click but...

      at the end of page will be there an option to Close Windows, and that close windows never works. Some one can try and confirm that problem is not in my side, but on WHMCS code.

      In all reports that button do not work!

       
    • By onehat
      I have been working with the API for a couple months now and am finding that much of the functionality available through the WHMCS dashboard is simply missing in the API. It's as if the functionality available through the API is a limited subset of the functionality available in the dashboard. Can someone please confirm that this is the case? 
      Thank you,
      Scott
       
       
    • By zitu4life
      Hello there
      I have saw out there that   is possible to add Favicon on client area and also there is  whmcs doc for that but admin Favicon   there is   no documentation, also there is no thread   on this community   explain how to do that.
      I have search on google and find on Brazilian website this hook, I did not give it a try yet. So   I can assume   a hook could   be used to add favicon on  WHMCS admin.
      // Favicon in admin panel add_hook('AdminAreaHeadOutput', 1, function($vars) { $gofas_admin_favicon = array(); $gofas_admin_favicon['gofas_admin_favicon'] = '<link rel="icon" href="https://www.example.com/favicon-mini-32x32.png" sizes="32x32" /> <link rel="icon" href="https://www.example.com/favicon-medium-192x192.png" sizes="192x192" /> <link rel="apple-touch-icon-precomposed" href="https://www.example.com/favicon-large-300x300.png" /> <meta name="msapplication-TileImage" content="https://www.example.com/favicon-large-300x300.png" />'; return $gofas_admin_favicon['gofas_admin_favicon']; }); There is any   improved way to add favicon now a days?
      Sometimes I have a lot of pages opened, so favicon really helps  identifying my own website easily and  also   having favicon   makes websites more friendly 😉
       
    • By jiamila
      Upgrade version to 7.8, the End User License Agreement is displayed after logging in to the background.
      Interface, click Accept and then jump back to the page. The routing mode has been adjusted to basic. Is there any solution?
    • By akarweb
      Hi,
      Before 7.8 update i have no smtp problem all the mail sent and good. there is no problem. But i upgrade 7.8 and smtp not work. All the time say ehlo, helo connection smtp not connected.
      Please help us.
      Thanks.
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated