Change the logo in WebDrawer

Background

The logo in the banner of WebDrawer is the HP logo and the text says 'HP Records Manager'.  Maybe you want different branding?  Changing this is quite simple.

The Razor

The logo is actually two images which are embedded using IMG elements and shown/hidden using CSS.  This is done to allow us to show a different image when WebDrawer is re-sized down to mobile phone size.  You can see this HTML in Views\Shared\_Layout.cshtml, it looks like this:

<div class="innertube">
    <img id="banner-img-large" src="~/images/top-banner-logo.png" />
    <img id="banner-img-small" src="~/images/top-banner-logo-title-SM.png" />
</div>

The process

I recommend you:

  1. create two new images the same size as the existing images,
  2. place them in your own folder (e.g. images\myimages)
  3. change the SRC elements in _Layout.cshtml.

Upgrading

On WebDrawer upgrade don't forget to take a backup of _layout.cshtml (preferrably all files under the WebDrawer folder) so that you can re-apply any changes you made.

Written on June 16, 2015