Jump to content
shogun

Change default logo and colors in admin dashboard?

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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;
}

 

 

  • Like 3

Share this post


Link to post
Share on other sites

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;
}

 

  • Like 1

Share this post


Link to post
Share on other sites

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 by louisstephens
updated with actual jquery example
  • Like 1

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...