By default, pxh-chrome displays the title of your application in the drawer header area. If you wish to display a company logo or other image in this space, you are free to do so with a few small changes.
The drawer header area provides a 60px x 200px space for including a logo. We strongly recommend you use a PNG image with a 24-bit transparent background, at a resolution at least twice as large as 60px x 200px to accomodate retina displays. pxh-chrome will proportionally scale the image you include, and using a 120px x 400px image, for example, will ensure your logo still looks crisp on a display with 2x pixel density.
The iPhone 6 Plus and iPhone 7 Plus have 3x pixel density displays, so to ensure the highest compatibility of your designs with future devices we highly recommend you use an image that is at least 180px x 600px.
pxh-chrome will preserve the aspect ratio of any image that it scales to fit into the drawer header area. If an image doesn't match the 60x200 aspect ratio, it will be scaled proportionally so that the entire image fits the available space, and will be centered vertically and fully aligned to the left. In right-to-left layouts, the image will be fully aligned to the right.
Note: Adding and updating the image in the drawer header of pxh-chrome is currently in beta. These instructions will undoubtedly change as we improve the customization hooks in pxh-chrome.
logo.png
logo.png
file in the /public/img
folder of pxh-chrome with your own logoviews/main.handlebars
if you're using pxh-chrome with the App Hub) to tell it to use your image:
<h1 class="pxh-drawer-header">
and change it to <h1 class="pxh-drawer-header pxh-drawer-header--image">
<a href="#" class="pxh-drawer-header__link pxh-drawer-header__link--narrow@md pxh-drawer-header__link--wide@lg" title="{{appname}}">
and change it to <a href="#" class="pxh-drawer-header__link pxh-drawer-header__link--image pxh-drawer-header__link--narrow@md pxh-drawer-header__link--wide@lg" title="{{appname}}">
pxh-drawer-header--image
and pxh-drawer-header__link--image
classes to their corresponding elements, telling them to show an image instead of showing the application nameIf you're using the App Hub, the easiest way to repoint the CSS to your image is to put it somewhere accessible (e.g. in your App Hub filesystem or on a CDN) and add these lines to the <head>
of your main.handlebars
file:
<style type="text/css">
.pxh-drawer-header__link--image {
background-image: url('RELATIVE_OR_ABSOLUTE_PATH_TO_YOUR/logo.png') !important;
}
<style>