Ship new logo in CMS 5.1

[maxime-rainville]

We have a new logo to differentiate Silverstripe the company from Silverstripe the CMS.

Acceptance criteria

• All instance of the old logo are replaced with the new logo.
• Placement of the new logo is validated with the strategy and UX team

Notes

• If the loading animation is going to be difficult to replicate with the new logo, just swap it out for a regular spinner.

Pull request

• EHN Implement the new logo on the loading animation #1546
• ENH Change favicon to reflect new logo silverstripe-installer#358
• ENH Include new logo silverstripe-login-forms#151
• ENH Use new logo silverstripe-sharedraftcontent#208
• ENH Update logo silverstripe-framework#10922

Follow up

• Update logo everywhere .github#102

[maxime-rainville]

Got the logos from the design team. They're looking at the loading animation.

SCMS-logo-white
SCMS-glyph-white
SCMS-glyph-blue
SCMS-logo

Off the top of my head the places where the logo needs to be updated are:

• The login screen (dark mod and light mod)
• The loading animation
• The help menu
• The pre-JS loading animation (look for ss-loading-screen css class)

[GuySartorelli]

Here's copies of the logo that I was able to find:

An animated loading spinner:

• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/spinner.gif
• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/spinner%402x.gif
  Used in https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/styles/legacy/_style.scss

The ss-loading-screen one mentioned by Max:

• https://github.com/silverstripe/silverstripe-admin/blob/2/templates/SilverStripe/Admin/Includes/CMSLoadingScreen.ss

We have a logo in png AND svg format:

• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/ss-logo.png
• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/ss-logo.svg
  Both are only used in the browser warning template

There's a smaller version of the above, in png format:

• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/logo_small.png
• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/logo_small%402x.png
  The first of these is used in a debug stylesheet (so probably for error output)
  The 2x one doesn't seem to be used.

There's a wee silverstripe logo which is used at the bottom of the CMS in our custom font:

• https://github.com/silverstripe/silverstripe-admin/tree/2/client/src/font/fonts
  Apparently this is generated via http://app.fontastic.me/

There's a seemingly unused very old logo, probably just delete this instead of replacing it:

• https://github.com/silverstripe/silverstripe-admin/blob/2/client/src/images/silverstripe_logo.png

There's an image of the logo on an ipad and iphone for sharing draft pages - it's in multiple formats and sizes:

• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/ipad.png
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/ipad.svg
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/ipad%402x.png
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/iphone-small.png
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/iphone-small.svg
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/iphone.png
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/iphone.svg
• https://github.com/creative-commoners/silverstripe-sharedraftcontent/blob/master/client/src/images/iphone%402x.png

There's another version of the logo as an inline SVG in this template - includes text:

• https://github.com/silverstripe/silverstripe-login-forms/blob/5/themes/login-forms/templates/SilverStripeLogo.ss

[maxime-rainville]

Got the loading animation. It's not SVG unfortunately, but it will do for now.

If we decide we really want an SVG we can look at it afterwards.

[GuySartorelli]

The small one we're currently using is a gif so that's fine for that purpose (see animated loading spinner in my list above)

That gif is way too low Res to replace the big SVG one though so we still can't proceed without a valid replacement for that (see mentions of ss-loading-screen above).

Also can we get it with a transparent background by any chance?

[maxime-rainville]

It's a Friday afternoon and I got bored. I implemented the SVG animation instead of doing my actual job.

#1546

[patricknelson]

Just wanted to say: The new logo looks slick! Just noticed this since it leaked into my PhpStorm IDE via the template plugin. 😀

[maxime-rainville]

For who ever peer reviews this:

• I've deployed all the PRs here: https://cmstestm-uat.sites.silverstripe.com/
• Deployment branch: https://github.com/silverstripeltd/cms-testing-recipes/tree/sc-aws-5.x-sink-pretty-logo

[maxime-rainville]

The old logo is dead. Long lives the new logo.

[patricknelson]

How long before this is reflected on silverstripe.com and silverstripe.org? Once it has dropped off there, it'll feel more "dead" for sure.

[GuySartorelli]

@patricknelson see the link for the follow up card in the issue description. There's a lot of web presence we need to scour through to find all the places it's used and get it updated. We don't have a timeline for when that'll be completed.

[GuySartorelli]

There's an unmerged PR on this so I'm reopening it

[emteknetnz]

Linked PRs have been merged