Adding a logo or manage your site title and tagline

By default, Aberration Lite will display a text based site title and tagline. Because this theme has an unsual design concept for the site title or logo, there are some limitations to what you do with this area. 

The design of the top header area with the site title (or logo), tagline, and menu required some complicated coding, so for the purpose of keeping the header minimalist and non-obtrusive, you have limited space available. The title/logo container has a fixed height of 100px – 28px for a top and bottom padding, which means you have a fixed height of 70px for any logo you decide to use.

If you want the full 100px height for a logo to fill the container, follow the steps outlined further below. I should also mention that your logo or site title can be almost any width you want, but the height should be 100px to maintain consistency in layout.

Changing the Site Title

  1. Go to Appearance >> Customize >> Site Identity 
  2. Look for the “Site Title” setting and make your change
    site title setting
  3. Click “Save & Publish

Changing the Site Tagline

  1. Go to Appearance >> Customize >> Site Identity
  2. Look for the “Site Description” setting and make your change (don’t have too big of a tagline)
    tagline setting
  3. Click “Save & Publish

Using a Logo

I would guess that most will not want spacing around the logo, so this setup tutorial will guide you through the setup.

  1. Go to Appearance >> Site Identity
  2. Uncheck the boxes next to the Show Site Title and Show Tagline
  3. Click on the “Select Image” button and get your logo
    upload logologo uploaded setting
  4. If you want your logo to fill the entire box without spacing around it, check the box next to “Logo Box Spacing“. Here are a before and after screenshot:
    logo with paddinglogo sample
  5. Click “Save & Publish

Note I do not recommend using a logo with the text title and tagline as there is not a lot of available space. If you decide to opt in for this group, your logo should float to the left of the title and tagline, using custom CSS to manage the positioning.