UPDATED 2nd April 2020
I released a video a while back (October 2018 to be precise) explaining how to use a different logo on one or more of your pages in Squarespace 7's Brine family of templates.
At the time it represented the best solution that I could find, but since then it has become quite buggy for some people. This could be because it conflicts with other code that's being used in a site, or a number of other variables.
I've had many, many questions about it recently which made me realise that it's still clearly a popular feature and maybe I should find an alternative, easier way of doing it. So that's what I did.
So this will, again, cover Brine and Farro family templates (see below for full list of templates) for desktop and mobile, but if you're using any other Squarespace 7 templates follow the instructions to the end and then I'll explain how to adjust it for your template.
If you're using Squarespace 7.1 I have a video for that here.
How do I find out which version I am using?
Step 1 - Upload Your Default Logo
Firstly you need to be using a logo image for this to work. Using just the Site Title as a logo won't allow us to switch between logos.
You can upload a .jpg, .png or .gif as a logo (but not an .svg 😕). This one will serve as the most used logo throughout the website.
To upload a logo go to Design > Logo & Title
If you need to make a logo you can for free here
Once your logo is uploaded hit 'Save' and it should be displayed on your website.
Step 2 - Upload the Alternative Logo & Grab the URL
In the side panel of Squarespace head over to Design > Custom CSS and then click on 'Manage Custom Files'. Once it's open you can drag your alternative logo into 'Add images or fonts'.
When it's uploaded click on the logo file to bring up the URL of the image in the Custom CSS.
Highlight the URL in the CSS editor and take a copy (Command + C on Mac/CTRL + C on a PC) then remove the URL and cancel out of the CSS Editor.
Step 3 - Adding the Code to Swap the Logo
Next, head over to the Pages tab and click on the cog icon next to the page where you'd like to show your alternative logo.
Note: If it is an Index Page (signalled by two horizontal lines to the left of the page name) make sure to select the cog icon of the top level page.
When the page settings open select the Advanced tab.
Then in the Page Header Code Injection add the following code:
<style>
.Header-branding-logo, .Mobile-bar-branding-logo {
content: url("YOURLOGOURL");
}
</style>
Next we need to grab the alternative logo URL that we copied in step 2 and replace YOURLOGOURL with the that of the alternative logo.
Your code should look something like this:
Hit save, and that's it! Your alternative logo should be displaying on your chosen page.
If you want to apply the logo to other pages simply take a copy of the code from the Page Header Code Injection and paste it in to the other pages where you'd like the logo displayed.
Applying to Other Templates
So as I mentioned earlier in the post, this is for Brine and Farro family templates only. So this will work on any of the following templates:
Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Farro, Feed, Foster, Greenwich, Hatch, Haute, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Lincoln, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West
To do that we need to change two parts of the code, .Header-branding-logo and.Mobile-bar-branding-logo like so:
<style>
CHANGETHISPART {
content: url("YOURLOGOURL");
}
</style>
Below is a list templates with the adjusted class ID's for each
Adirondack, Avenue
.logo
Aubrey, Aviator, Encore
.site-title-image
Bedford Family - Anya, Bedford, Bryant, Hayden
#logoImage
Five
#banner
Flatiron, Forte, Supply
#logo
Note: Forte may need max-width applied to control the size of the alternate logo. On a new line underneath the content line, before the final curly bracket add this line:
max-width: 200px;
You can then adjust the 200px up or down to control the size of the logo.
Galapagos
.site-logo-image
Ishimoto
.logo-image .logo img
Momentum
#logo .logo-image img
Montauk Family - Julia, Kent, Montauk, Om
.logo-image .logo img
Native
#header h1.logo.image .placed-logo-image img
Pacific Family - Bryler, Charlotte, Fulton, Horizon, Naomi, Pacific
#logoImage img
Skye Family - Foundry, Indigo, Ready, Skye, Tudor
.logo-image img
Tremont Family - Camino, Carson, Henson, Tremont
.site-branding h1 img
Wells
#logo .logo.image img
Wexley
.logo-image .logo img
York Family- Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, Taylor, York
.logo-image img, .mobile-logo-image img
Adversary, Alex, Eamon, Ginger, Marquee, Mint, Shift
These templates have been discontinued, so I' haven't been able to test them out.
