Alternate Logos on your Squarespace Site
Squarespace released new Dynamic headers for 7.1. These look great and are now my favorite style setting for headers. The only problem is when you want to use a white background and your logo is also white.
You either have to choose only colored backgrounds with a white logo, or only white backgrounds with a colored logo. But there is a way to display a different logo for pages that won't work with your existing color scheme, using CSS. And it's not that challenging!
The Quick Version
The process if fairly simple:
1) First you have to design a logo in the color you want.
2) Then Download the file to your computer:
-Size the logo appropriately for Squarespace (width: 500px, resolution 72px/i, under 50KB)
-Make sure to include keywords in the title of your file
3) Upload the file to your Squarespace site
4) Tell your page to use the alternate logo using custom CSS.
How To
Here's how you do it step by step.
1
Design Your Alternate Logo
Design your new logo using your preferred design tool. I use Canva because photoshop is a scary, scary monster and, luckily, Canva does almost everything I need it to do and it doesn't make my head hurt.
2
Download the file to your computer. Make sure to change the name to something using your SEO keywords, for example: web-designer-logo.png
Resize the image to work well with Squarespace. I use width: 500px and resolution 72. You can do this right in your computer’s native image viewer.
3
Upload the file to your Squarespace website. Go to Design—> Custom CSS, then scroll all the way down and click “Manage Custom Files.” Drag and drop your file right in there.
Click on that file and a source code will appear in your custom CSS. Cut and Paste that to a text editor for later use.
4
Finally, go to the page where you want your alternate logo to appear. Go to Pages and click on the cog next to your page, then go to Advanced and add this code snippet to the Code Injection box:
<style>
.header-title-logo a {
content:
url("https://static1.squarespace.com/static/614a138f762e742945e69ff6/t/61cc8c35115e1174a25692ed/1640795189213/Wonder+Logo_Black_transparent.png");
}
</style>
Where the text in blue is the source code you copied from step 3. Hit “save” and you are ready to rock!
