Your site's header shows your site's name ("Juniper Support", say) until you give it a logo. You can add a logo, a second logo for dark mode and, on the modern design, a banner picture behind the header. None of this needs any CSS.
Adding your logo
- Go to Account & Settings › Settings and click Appearance & Text in the sidebar.
- In the Design box, under Your logo, click Choose File and pick an image. Or paste the address of an image that's already online (starting with
https://) into the box below it. - Click Save your changes.
The logo replaces your site's name at the top of every page and links to your home page. Tender doesn't resize the file. On the modern design the logo is shown at most 64 pixels high (narrower logos keep their proportions), so a logo about 128 pixels high stays sharp on high-resolution screens. The classic design shows it at the size you upload.
An uploaded logo wins over an image address. To go back to your site's name, tick Remove it next to the uploaded file (and clear the address box, if you used one), then save.
Uploaded logos are kept with your site, so they keep working, and they also appear on the login page of a site that's closed to the public.
A logo for dark mode
If your logo is dark, or drawn on a white background, it can be hard to see when someone views your site in dark mode. Upload a light version under Your logo for dark mode, and Tender shows it whenever the page is dark. It's optional: without it, your usual logo is used in both.
A header banner
On the modern design, Header banner puts a picture behind your logo and the search box at the top of every page. The picture fills the header and is cropped to fit the screen, so use a wide image (about 2400 × 400 pixels works well) and keep the side where your logo sits fairly plain so the logo stays readable. The classic design doesn't show banners.
The classic mobile site
Sites on the classic design can set Your logo for the classic mobile site, shown instead of your logo on the classic design's mobile view. The modern design uses your usual logo on every screen size.
Browser and home screen icons
Further down the same box (on plans that include custom CSS):
- Favicon URL: the address of a small icon (16 × 16, ICO, GIF, JPG or PNG) that browsers show in tabs and bookmarks.
- Apple Touch Icon URL: the address of a 114 × 114 PNG or JPG used when someone adds your site to their phone's home screen.
Styling the logo with CSS
If you want more control, the logo is #logo-theme img (or #logo a, the site's name, when you haven't set a logo) and the header is #header. For example, to give the header more room:
.tn-frontend #header { padding-top: 24px; padding-bottom: 24px; }