diff options
Diffstat (limited to 'docs/customising/logo.md')
| -rw-r--r-- | docs/customising/logo.md | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/docs/customising/logo.md b/docs/customising/logo.md new file mode 100644 index 000000000..f7d39b5a1 --- /dev/null +++ b/docs/customising/logo.md @@ -0,0 +1,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. |