Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Elisabeth

Is there a way to use two versions of my logo (white vs. color) depending on the page background?

Question

Hey Squarespace Circle peeps! Has anyone ever found a way to utilize different versions of their logo at the same time? In other words, I'd like to use the all white version of my logo on pages with dark background/banner images and the color version on pages with light/no banner image. Does that makes sense at all?

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

I found the answer (from @jackforbes in another thread:

<script>
 window.onload = function() {
   document.getElementsByClassName('Header-branding-logo')[0].src = 'URL_TO_IMAGE';  
 };
</script>

Just upload your logo to Squarespace Custom Files and replace URL_TO_IMAGE with the Squarespace-generated url.

Share this post


Link to post
  • 0
2 minutes ago, Elisabeth said:

I found the answer (from @jackforbes in another thread:


<script>
 window.onload = function() {
   document.getElementsByClassName('Header-branding-logo')[0].src = 'URL_TO_IMAGE';  
 };
</script>

Just upload your logo to Squarespace Custom Files and replace URL_TO_IMAGE with the Squarespace-generated url.

With some Ajax-enabled templates, sometimes the code will not work. In case you cannot turn off Ajax, you can use CSS

<style>
  /* REPLACE HEADER-BRANDING with the corresponding class of the template */
/* Hide current Logo */
.Header-branding img {
    display: none;
}
/* Set new logo */
.Header-branding:after {
    content: "";
    background-image: url(https://i.imgur.com/u96Jv9z.png);
    background-size: contain;
    display: block;
    width: 200px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...