Change default logo and colors in admin dashboard?

[shogun]

What's the easiest way to change the logo to our company logo and change the background blue color in the header in the admin dashboard? 

[louisstephens]

The easiest way to change the logo is by going to (once logged in) Modules -> Core -> AdminThemeUiKit . You will see a section labeled Masthead + navigation. You should then be able to upload a new logo for the backend through the field provided. 

As far as changing colors of the header, the easiest approach might be to follow what Jonathan Lahijani said here:

On 12/28/2017 at 5:03 PM, Jonathan Lahijani said:

Depending on how much you want to change, you can always do CSS overrides.  Put this line in /site/templates/admin.php, above the line that brings in controller.php:

$config->styles->append($config->urls->templates."admin.css");

Make a file in templates called "admin.css".

Now let's say you want to change the navbar color:

#pw-masthead {
  background: #666 !important;
}

 

 

[BitPoet]

I have found that depending on the theme and device, #pw-masthead might to cover everything.

#masthead, #branding, #pw-masthead, #pw-masthead-mobile, body.AdminThemeReno a.main-nav-toggle {
  background-color: #666 !important;
}

 

[shogun]

How about changing this tree...?

[louisstephens]

Correct me if I am wrong, but  I don't think there is an "easy" way to change the icon itself, unless you went with custom js to find the icon and switch out the class names (font awesome) to something you desired. The only other option I see is to delve into custom theme building.

So in your admin.php file (site/templates), add the following lines above the required controller:

$modules->get('JqueryCore');
$config->scripts->add($config->urls->templates . "scripts/your-js-file.js");

Next, in your custom javascript file (which I would just put in your scripts folder), you could do something like:

$(document).ready(function () {
    $('.uk-breadcrumb > li > a.pw-panel > i').removeClass('fa-tree').addClass('fa-telegram')
});

In the above code, it will change it to the telegram icon. Simply change out the icon to any fontawesome 4 (I believe) icon you wish. The only issue with this is you will briefly see the original tree icon until the document is ready. I could not get it working without the document.ready function. Perhaps someone knows a way around this.

Edited January 29, 2020 by louisstephens
updated with actual jquery example