Theme Options: Images

Theme Options > Theme Images is where you upload site branding images for display in the top header of your Largo site. To accommodate a number of screen sizes, the Largo theme requires three image sizes for the top banner and automatically chooses the correct image size based on the size of a user’s browser window.

Note that by default, Largo will display only text instead of these theme images. To replace the text with images, make sure to uncheck the box labeled “Use only text in the place of a banner image (uses site title and description)”:

If you prefer using text, leave the box checked. You can edit your site title and description in the  Settings > General screen.

Preparing your Theme Images (Logos)

Before getting started, you'll need the following sizes for your main banner logo:

• 1170 by 120px – for most desktop/laptop computers
• 980 by 150px – for small desktops, most tablets, large phones
• 768 by 200px – for most mobile phones

These image sizes are the maximum recommended sizes for those breakpoints. Images that are taller will keep their proportions; images that are less wide will align to the left. Using a smaller image is common.

You’ll also need:

• a square image of at least 200x200px – to use as a default for Facebook posts when you do not set a featured image for your posts
• a 16x16px favicon – the small icon that appears in browser tabs and some other web applications
• a 100px-tall site logo – for use in the sticky header
  • As you design this, keep in mind it has to look good on phones. This should be a .png file with a transparent background and no clear space around the logo. You can use a landscape-shaped image if needed at 600 x 96px, or 300 x 48px.

To add your Theme Images:

1. Click the Upload button next to the image you want to add for each image.
2. Drag and drop the image onto the uploader (or click “Select Files” and find the correct image on your computer).
3. When the image has finished uploading, select the full-size image option.
4. Finally, click the button at the bottom of the uploader that says “Use This Image”.

If the image has uploaded correctly, you should see a thumbnail version of it and the link to the photo in the field next to the “upload” button.

Once you have uploaded all six images, uncheck the box labeled “Use only text” and click “Save Options” to save your changes.

Using Text Instead of Sticky Header Logo

It can be challenging to resize a logo design for a mobile-sized screen. In most cases it’s possible, but you do have the option of displaying the site name instead of an image for the Sticky Header Logo. If you choose not to upload an image for the Sticky Header Logo, your site name will be displayed in plain-text whenever the sticky nav is visible.