blob: f7d39b5a1fff6035ea5f44d08e3eb001834a1e4f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
---
layout: page
title: Customising the logo
author: matthew
---
# Customising the logo
<p class="lead">
This page describes how to change the logo of your installation.
</p>
Do make sure you have followed the
[initial CSS guide]({{ "/customising/css/" | relative_url }}) 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 fixmystreet.com 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 fixmystreet.com’s `layout.scss` for how it
does it, though note it is a bit more complex as it uses SVG with a PNG
fallback.
|
