Change MainWP dashboard logo

rhoekman · August 21, 2023, 11:57am

Seems that with the new layout the old CSS example on GitHub doesn’t work for anymore to change the logo in the dashboard. At least for me. Anyone got this to work with the new layout?

github.com

mainwp/mainwp-custom-dashboard-extension-examples/blob/master/css/change-dashboard-logo.css

/**
 * @snippet       Change MainWP Dashboard logo
 * @sourcecode    https://bitbucket.org/snippets/keith_crain/8nkApK
 * @author        Keith Crain
 * @author_url    https://kronoslabs.io
 * @testedwith    WordPress v5.2.3
 *
 * @param         background-image: url('PATH/TO/YOUR/LOGO')!important;
 * @How-to-use    Change the absolute url to the logo you want to use.
 * @Dimentions	  Original MainWP logo dimentions are 177 X 35
 */

/* Hide Original logo */
.mainwp-nav-wrap #mainwp-logo img { 
	display: none!important;
}

/* Display yours */
.mainwp-nav-wrap #mainwp-logo { 
	background-image: url('PATH/TO/YOUR/LOGO')!important;

This file has been truncated. show original

bojan · August 21, 2023, 6:17pm

Hi @rhoekman

That is indeed correct. The new layout has made this snippet non-functional.

We will look into it soon, and share the updated version.

kwcjr · August 22, 2023, 12:45pm

@rhoekman I have updated the snippet to support the new menu and it’s selectors.
Important Make sure your image is no larger than the required 72 x 72 or it will not show up…

github.com

mainwp/mainwp-custom-dashboard-extension-examples/blob/master/css/change-dashboard-logo.css

/**
 * @snippet       Change MainWP Dashboard logo
 * @author        Keith Crain
 * @author_url    https://kronoslabs.io
 * @testedwith    WordPress v6.3
 * @testedwith    MainWP Dashboard v4.5
 *
 * @param         background-image: url('PATH/TO/YOUR/LOGO')!important;
 * @How-to-use    Change the absolute url to the logo you want to use.
 * @Dimentions	  Original MainWP logo dimensions are 72 X 72 (Image must be 72x72 to be seen!)
 */

/* Hide Original logo */
#mainwp-first-level-navigation #mainwp-navigation-icon { 
	display: none!important;
}

/* Display yours */
#mainwp-first-level-navigation > a {
	height: 72px !important;

This file has been truncated. show original

rhoekman · August 23, 2023, 10:32am

Thanks Keith! Much appreciated🙂

system · September 22, 2023, 10:33am

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.