In creating a header for the responsive theme, we've aimed to strike a balance between flexibility and simplicity. We want it flexible enough for stations to achieve their branding requirements — and simple, so we can ensure it works at all device sizes and is easy to maintain.
The header is comprised of a background color, a background image, a logo, a tagline, and a few buttons, all of which are optional and which stations can configure on the Header Config page. In addition, there are some masthead and logo behaviors that stations can also set. I'll go through these one at a time.
Where to Start
Everything that we describe in this tutorial is found on the "Header Config" page, which Station Admin users can get to by clicking the Configure Corepublisher button in the shortcuts bar and selecting "header" from the Homepage Management options (see image below).
Overview of the Header Config Page
This page is divided into sections for creating and modifying key aspects of your station's header, from uploading a new logo to editing your station's tagline. Whenever you make any changes, make sure you scroll to the bottom of the page, where you can save or preview the header using the Save and a Preview buttons. Let's go through the sections on this page one at a time, starting with the first section — Logo Image.
The Logo Image Section
The Logo Image section is where you go to upload a new logo and, optionally, make it link to somewhere other than your site's home page. If you have a logo image file ready to go, simply click the Select Media button and upload the file. Then scroll to the bottom of the page and click Save — or preview first and then save.
By default, the site logo will be clickable and will link to your station's Core Publisher homepage. We recommend this behavior because it's what users typically expect. However, you can over-ride it — that is, link to somewhere else — using the over-ride logo link field (see image above). Simply type the desired destination web address into the field and the logo will link there instead of to your homepage. Vermont Public Radio links it's Core Publisher site to a parent web site using this method.
Logo Image Details
Ideally, your logo should be a transparent .png or .gif, which will enable you to place it on top of a variety of background images or colors. This may not be an issue right now (say, if your logo sits on top of a white background), but it's a good idea to be flexible enough to handle a variety of possible future conditions.
Next, we recommend cropping the logo right up to the edge of the image without any extra margin or padding, which will help it display at a larger, more readable size on small screens.
Logo Size and Placement
There isn't one perfect size for your logo. The header is flexible enough to handle a variety of shapes and sizes, but a good rule of thumb is to upload an image that's around 600 pixels wide by 400 pixels high — or close to 4o0x400 if you have a square-shaped logo.
The logo goes into an area that has a maximum width of 204 pixels and a maximum height of 110 pixels. It will display as large as it can be within those constraints.
Why not simply make your logo 204 pixels wide? You can, but a larger size will look sharper on high resolution screens like retina displays.
Favicon — Shortcut Icon
If you want to change your station's favicon or upload a new one, do it here (a favicon is the tiny, logo-like image used by browsers as in the example screen-shot below). Click the select media button and upload an image file with the .ico extension. If you don't already have the file on hand, you may need to work with a designer to create one.
Header Background Section
Use this section for updating your header's background color and image. You can change the color, upload an image, and choose from among a few image-display options that we'll review one at a time.
Set the header background color by entering it here. Colors are typically given in hex values, which look like this: #ffffff for white and #000000 for black. You may need a designer to help you choose a color that works well for your site, but if all you need is some help finding a hex value, there are free online resources such as colorpicker.com.
Upload a new background image here by clicking the Select Media button. Ideally, your background image should be 1600 pixels wide by 155 pixels high, but you may not always have the perfect asset. As an example, let’s imagine you have this picture of a wave, below. It isn't a great size for the header because it's much too tall and it’s only 1024 pixels wide. By default, it will be vertically centered and displayed at it's natural size — not stretched to fill the background area. If you were to set the background color red, it might look like the example below on wide screens.
To handle this, you have several choices.
1. If the background color of the image is flat and consistent, as in the illustration below, set the background color to match the illustration's background color. The browser can go as wide as possible and the header will look good.
2. If the background color isn't consistent, try fading out the right and left sides of the image, and set the background color to something compatible. You may need a designer to help you do this well.
3. In many cases, an even better solution would be to make the image "scale-to-fit," which will cause the image to stretch and fill the entire header area, no matter how wide. The Background Image Size section of this tutorial (a little further below) explains how to do this.
Background Image Position
This setting gives you some control over which part of the background image is displayed in the header. For example, an image that's too tall, like our wave example, will display the middle part by default (see image below). Select top or bottom if you prefer those parts of the image.
Background Image Size
You have two choices for this setting. "Normal" means that the image will simply display at its actual size. "Scale to fit" will stretch the image so that it covers the entire background no matter how wide it goes. This works better for some images than others, and is something you might want a designer to help you with.
Background Image Repeat
If you want the image to repeat horizontally, click the "Repeat" radio button. We recommend leaving it set to "Don't repeat."
Tagline & Tagline Text Color
The tagline is an optional part of your station's header. The maximum character count is 128, including spaces, but we recommend making it quite a bit shorter for optimal readability — 35 characters is a good target length, but feel free to see what works best for you. Use the preview button at the bottom of the Header Config page to see how different taglines look.
Tagline Text Color
If you have a tagline, use this field to set its color — or leave it to the default, which is dark gray.
Header Button Colors — Menu, Listen Live, and Donate
Use this section to set colors on the buttons and icons in your header (see the image below). At desktop size, your header will display Listen Live and Donate buttons. At tablet size, it will also display a Site Menu button, which enables users to access the primary navigation. At smartphone size, the Site Menu button is replaced by a simple menu icon.
You can also set the button text color. This applies to the text on all of the header buttons (listen live, donate, and site menu). Generally, it works well to set this to white (#ffffff).
Reduce Header Height on Inner Pages
If you want your header to remain the same height on all pages, uncheck this box.
By default, the header on desktops is 155 pixels high on the homepage and 86 pixels high on posts and other pages. This means — on desktops only — logos display at a smaller size on post pages than on the home page.
We did this to help users focus on the content — for example, a news story — rather than on graphics related to brand. However, certain logos — particularly those that are square-shaped or have relatively small type — don’t render as well in the smaller header. You can over-ride this default setting by unchecking the Header Height box at the bottom of the form.
Contact Station Relations at http://info.ds.npr.org/support.html