Learn Goal 3 - Part 1: Add your company logo

Document created by Kedar on Dec 10, 2014Last modified by communitymanager on May 12, 2015
Version 27Show Document
  • View in full screen mode

A logo can give your layout a consistent, branded appearance:

  • On the desktop, it’s typical to put the logo on every layout.


  • On mobile devices, you might consider displaying the logo only on the opening screen, using company colors to brand the rest of your interface.

To keep this solution simple, the same layouts are being used for both desktop and iPad — so let’s go ahead and put the logo on each layout.




Add your company’s logo image to the top navigation of the Customer Detail and Customer List layouts.




  1. Switch to the “Customer Detail” layout using the Layout pop-up menu in the upper-left corner of the screen.

    customer detail layout dropdown.png

  2. Choose the View menu > Layout Mode ⌘L or Ctrl-L

  3. Locate the example company logo “logo.png” in the “Logos” folder of your sample data.

  4. Drag this file onto your layout.

    The image should snap into place in the upper-left of the layout, in the top navigation part. That’s where you w
    ant it!

    logo in corner of detail.png

  5. Notice that the logo overlaps into the body part.

    Let’s make the header bigger to accommodate it.

  6. Hover over the border between the top navigation part and the body part until the cursor changes.

drag down top nav.png

Drag the cursor to make the top navigation part big enough to contain the logo, then release the mouse.

  1. Adjust the position of the "View List" button so that it is vertically centered in the top navigation part.

    Here's how things should look:
    top navigation proper height detail.png

    Now let's add the logo to the Customer List layout as well.

  2. Switch to the Customer List layout.

  3. Add the same logo image to the upper left of the Header.

    logo overlap customer list.png

    Notice that the logo overlaps body part again.

    Let’s make the top navigation part bigger to accommodate it.

  4. As before, drag down the top navigation part, creating a blank space below the logo.

    The labels (Customer, Email, etc) will not move.
    drag down top navigation list.png


  1. Drag a rectangle (try coming from the right) to select the “Customer”, “Email”, and “Salesperson” labels -- but not the logo.

    If you find it hard to select all three objects this way, you can also use shift-click to select multiple objects, choosing one at a time.

  2. Once they are selected, drag them downwards to just above the border between the header and the body.

    Selecting them all at once keeps them aligned with each other when you reposition them.

    If you move the logo by mistake, you can always drag it back to its position in the upper-left corner when you’re done.

    Your layout should now look like this:

    customer list layout complete.png