Customising the logo

This page describes how to change the logo of your installation.

Do make sure you have followed the initial CSS guide first to set up the initial CSS for your own cobrand.

To use a different logo, by default you should have an image 175x35 in size, preferably placed in web/cobrands/YOURCOBRAND/ somewhere. You should then set the background-image property of #site-logo in your base.scss. If you wish a differently sized logo, you will also need to set the width, height, and background-size properties of #site-logo. Note if you make it larger in height, you might also need to investigate e.g. $mappage-header-height.

On we use a larger logo on the desktop front page; if you wish to do the same, in your layout.scss set the background-image of body.frontpage #site-logo, along with (as before) corresponding width, height, and background-size. See’s layout.scss for how it does it, though note it is a bit more complex as it uses SVG with a PNG fallback.