ScoreLM Guides
scorelm.com

Add your logo and brand colours

By the end you’ll have your logo in your website’s header and your colours on every page.

  • Who: League admin
  • Time: 5 min
  • Steps: 9
Video · 1:05 · Voiceover · every step is also written on screen Prefer to read? Steps below

Before you start

  • Have your logo ready as a square PNG, 256 px or larger. JPG and WebP work too.
  • Have your colours as hex codes, like #14B8A6, if you know them. You can also pick them by eye.
  • Use a computer or a tablet. On a phone, Brand can’t be changed.

Steps

  1. Step 1: In the left menu, click Website.

    Website opens on Design, where you set how your public site looks. Everything here is a draft until you publish, so fans see nothing until then.

    Fig. 1

    Scroll sideways to see the whole screen.

    The Website page on its Design tab: a list of sections (Website template, Brand, Homepage and more), the Website template editor, and a preview of the public site.
    Fig. 1Website › Design, with its sections on the left and a live preview on the right.

  2. Step 2: Click Brand (Logo, colours, favicon).

    The Brand editor opens in the middle. The preview on the right shows your site with your draft changes.

    Fig. 2

    Scroll sideways to see the whole screen.

    The Design sections list with the Brand row, subtitled Logo, colours, favicon.
    Fig. 2Brand, in the list of Design sections.

  3. Step 3: Under Logo, click Choose image and pick your logo file.

    Your logo appears in the editor and in the preview. Once published, it shows in your site header, on share cards and in the admin.

    Fig. 3

    Scroll sideways to see the whole screen.

    The Brand editor with an empty Logo slot and its Choose image button.
    Fig. 3Choose image, under Logo.

  4. Step 4: Under Site colours, type your main colour in Primary, like #14B8A6.

    Primary colours buttons, links and highlights. To pick a colour by eye instead, click the colour square next to the code.

    Fig. 4

    Scroll sideways to see the whole screen.

    The Site colours section with the Primary field showing #14B8A6.
    Fig. 4Primary: buttons, links, highlights.

  5. Step 5: Type your page colour in Background, like #06243A.

    Background is the page behind everything. The preview changes as you type.

    Fig. 5

    Scroll sideways to see the whole screen.

    The Site colours section with the Background field showing #06243A, and the preview on a dark blue background.
    Fig. 5Background: the page behind everything.

  6. Step 6: Set the other colours the same way.

    Each colour says what it’s for: Secondary for header bars and tags, Background secondary for cards and tables, and so on. You don’t have to change them all. To start again, click Reset to defaults.

    Fig. 6

    Scroll sideways to see the whole screen.

    The eight Site colours fields: Primary, Primary hover, Secondary, Secondary dark, Background, Background secondary, Text primary and Text secondary.
    Fig. 6All eight site colours, each with a note on what it colours.

  7. Step 7: Check the line under the colours.

    Every text colour is readable on your backgrounds means you’re set. If a text colour is hard to read on one of your backgrounds, a warning lists that pair instead, so you can change one of them. It doesn’t stop you publishing.

    Fig. 7

    Scroll sideways to see the whole screen.

    Under the colour fields, a green tick and the line Every text colour is readable on your backgrounds.
    Fig. 7The readability check under the colours.

  8. Step 8: Click Publish at the top right.

    The bar beside it counts your unpublished changes. After a moment it says Published. Fans see it now. The admin takes on your primary colour too, for its buttons and links.

    Fig. 8

    Scroll sideways to see the whole screen.

    The top right of the Website page: 7 unpublished changes, Discard and Publish.
    Fig. 8Publish, next to the count of unpublished changes.

  9. Step 9: Open your website.

    From the admin, click ↗ (View public site) at the bottom of the sidebar; your website opens in a new tab. Your logo is in the header, and your colours are on every page.

    Fig. 9

    Scroll sideways to see the whole screen.

    The public website’s homepage with the Riverside logo in the header, a teal Home link and dark blue standings and upcoming games.
    Fig. 9Your website with your logo and colours.

What you’ll see

Your website carries your brand: your logo in the header and your colours on every page. The admin uses your primary colour too. To change anything, go back to Website › Design › Brand and publish again.

Fig. 10

Scroll sideways to see the whole screen.

The Brand editor after publishing, with the logo, the new colours and the header saying Published. Fans see it now.
Fig. 10Brand after publishing.

Common questions

Can I finish later?
Yes. Your draft is kept in this browser until you publish or discard it, even if you reload. Other admins don’t see it. While it’s there, Website in the left menu shows how many changes are waiting.
I changed my mind. How do I undo?
Before you publish, click Discard at the top right; an Undo button appears for a few seconds in case you didn’t mean it. After you publish, change the colours or logo again and publish, or click Reset to defaults for the standard colours.
My website still shows the old colours. Why?
It can take a minute or two. Your website may keep showing the version from before you published for that long. Wait, then reload.
How do I add a favicon?
The favicon is the small icon in browser tabs. In Brand, under Favicon, click Choose image: an ICO, PNG or SVG file, up to 1 MB. It publishes with everything else.
Why does the admin look different now?
The admin uses your primary colour for its buttons and links. It adjusts the shade automatically so it stays readable. Status colours never change.
My league runs more than one sport. Do the colours apply to all of them?
No. Colours are saved for the sport you have open, so switch sport and set them there too. Your logo, favicon and website template are the same for every sport.
Who can change the brand?
League admins. Editors can work on the homepage, pages and photos, but they don’t see Brand.