Site Logos

As part of your site identity, you can replace the text site title in your header with your organization’s logo. Using your logo instead of your text title, truly makes your Cadenza website your own and makes your site easily identifiable to your members, supporters and other site visitors.

Logo designs vary greatly and can be sometimes tricky to fit into spaces shaped differently from their design. For example, the logo area in your header is typically a horizontal rectangle. If your logo is mostly square, or tall, then you may need to make modifications to your image file to get it to fit properly and look good in your header.

Logos for Site Identity

Using an image file for your logo instead of a text logo means that you’ll want your logo to include your site name or organization name, as part of the graphic file. If you only use your icon, or logo mark by itself, then visitors may have a more difficult time identifying your organization.

Image File Types

Header styles differ from theme to theme, and you can also change your theme settings as you like. If you have a background color for your header, then you’ll want to make sure that your logo has a transparent background, so that it blends in seamlessly with the background area, and isn’t surrounded by a “white box”.

The BEST format for a quality image file with a transparent background is a PNG formatted image.

Another image format that supports transparency would be a GIF file, although typically, the edges aren’t as clean and don’t often blend as well, sometimes producing a jagged edge (known as “aliased”), especially around curves.

JPG images do not support transparency and are usually not the best choice. However if your logo file is only available in JPG format, then change your header background color to match the background of your image. This way, even though your image doesn’t support transparency, it will have the appearance of blending in nicely with your background color.

Header Logo Area

All Cadenza headers, regardless of theme, have a similar available logo area. Some themes display the logo in the top-left corner, some in the center, and some in the center between menu links. And of course, you can override and change these settings on your theme to change your header layout within the Customizer.

For optimal positioning, you will want to resize, and/or reconfigure your logo file to be about 250-300 pixels maximum width and about 100-150 pixels maximum height.

Logos that are taller than this will inflate your header too much. Logos that are wider then this may have negative effects on side aligned menus or may look too big on mobile devices.

You can resize your logo file outside of Cadenza in an image editing program, or import the image into your Media Library, then resize the image using the built-in image editing tools.

Site Logo Files

There are several variations of your logo that you can add to your site header:

  • Logo Image (Regular)
  • Logo Image (Retina)
  • Fade In Header Logo

Logo Image (Regular)

This is your typical, low resolution (72dpi) web file. Most computers and screens will display this image clearly, depending on the quality of your file.

Logo Image (Retina)

This is a 2X version of the same logo file, generally double the physical dimensions. If your Regular logo is 300 pixels wide, then this image should be 600 pixels wide, with height adjusted proportionally. Retina images are used for HD, or retina displays and are scaled down to the same dimensions as the Regular logo, but with twice the pixel density.

You don’t HAVE to upload a Retina version, but it improves the quality of your logo image for users browsing on retina screens.

Fade In Header Logo

A Fade In Header is an optional, smaller header that fades in and replaces your regular header as a visitor scrolls down your web pages. This is different than a “shrinking” header, that scales down. A Fade In Header is a actually separate header file. Since the Fade In Header is smaller, your logo will be much smaller as well. You can upload a completely different version of your logo so that it reads more clearly if necessary. If your theme uses a Fade In Header, then upload an optional version of your logo here. If you don’t upload a different file, then your Regular logo will be used by default.

Adding Logo Files

To upload logo files to your header, do the following: 

  1. From your Dashboard, navigate to Appearance > Customize
  2. Select Header from the Customizer menu
  3. Select Header Logo from the Header menu
  4. From the Logo Type drop down menu, select Image
  5. Under Logo Image (Regular), click the Select Image button, then select an image from your Media Library, or navigate and select an image from your computer or device to upload
  6. (Optional) Under Logo Image (Retina), click the Select Image button, then select an image from your Media Library, or navigate and select an image from your computer or device to upload
  7. (Optional) Under Fade In Header Logo, click the Select Image button, then select an image from your Media Library, or navigate and select an image from your computer or device to upload
  8. Click the Publish button at the top of the Customizer to save your logo images to your website.
  9. Exit the Customizer when you are finished

Site Icon

Site Icons are what you see in browser tabs and bookmark bars and when you save your site as an icon shortcut (app) on your mobile device.

Site Icons aren’t usually your full logo, but may be the logo mark, or the icon design that may be part of your full logo. Site icons display and a very small size in browser tabs, so they must be simple and easy to read. However, since Site Icons also serve as app icons, you’ll want to upload a quality image that is actually much larger, so that you get a clean, HD image.

Site icons are always square shaped, though they can have rounded corners. Upload a Site Icon file that is 512 pixels by 512 pixels for best results.

To upload a Site Icon to your Cadenza website, do the following:

  1. From your Dashboard, navigate to Appearance > Customize
  2. Select Settings from the Customizer menu
  3. Select Site Identity from the Settings menu
  4. Under Site Icon, click the Select Image button, then select an image from your Media Library, or navigate and select an image from your computer or device to upload
  5. You will have the option to Crop your image if necessary. If the image you selected is not already square, then use the crop tool to reposition the selection around the best focal point of your image.
  6. Click the Publish button at the top of the Customizer to save your logo images to your website.
  7. Exit the Customizer when you are finished
Posted in Customizer