Predix

Notifications
There are no new notifications.

Drawer Header Image

pxh-drawer-header--image — view demo

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.

Adding your own logo to pxh-chrome

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.

  • Create and save your logo image in PNG format on a 24-bit alpha transparent background, with the filename logo.png
  • Replace the logo.png file in the /public/img folder of pxh-chrome with your own logo
  • Update your drawer template (in your HTML if you're using pxh-chrome by itself; in views/main.handlebars if you're using pxh-chrome with the App Hub) to tell it to use your image:
    • Find <h1 class="pxh-drawer-header"> and change it to <h1 class="pxh-drawer-header pxh-drawer-header--image">
    • Find <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}}">
  • To put it plainly, you're adding the 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 name

If 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>