Jump to content

SVG logo appears only when Custom CSS is open

Recommended Posts

Hey all, 

The logo was looking jagged in both PNG and JPEG files, regardless of style. So I found a way to replace the PNG with an SVG in these forums. The logo shows as long as I have Custom CSS open, but as soon as I exit and refresh the page, it disappears.

This is the code I'm using: 

.header-title-logo img {
visibility: hidden;
}
.header-title-logo a {
background-image: url(**/s/Logo.svg**);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}

The URL is generated via Squarespace when I upload the file as a link. If anyone knows what I may be doing wrong, please let me know, thank you! 

Link to comment
  • Replies 5
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 1 year later...
On 12/5/2020 at 7:30 AM, tuanphan said:

Hi. Try using full url

eg. https://beaverhero.com/s/logo.svg

Hey Tuan, I'm having the same issue on my site.

https://roadrunner-echidna-9e76.squarespace.com/semicustom

PW: ephemora2k22

I'm using a definition in place of the URL: earlier in my code I had defined @red-arrow-svg as '/s/Ephemora-Arrow.svg' and it worked only when the Custom CSS panel was open. I tried a few options:

  • Redefining @red-arrow-svg as the whole URL: SVG doesn't appear on the live site nor with the CSS window open
  • Not using a definition at all and just using the shorthand URL (starting with "/s/"): SVG doesn't appear on the live site nor with the CSS window open
  • Not using a definition at all and just using the whole URL: SVG doesn't appear on the live site nor with the CSS window open

So, the only way I can get the SVG to appear, but then only when the Custom CSS window is open, is as I originally had the code, as seen below (using the @red-arrow-svg defined as the shorthand URL):

//List auto-layout//
.user-items-list-simple .list-item-content__title {
  font-family: trade-gothic-next;
  font-style: italic;
  text-transform: none;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__description {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__title {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] {
  background-color: @lavender;
}
//List link styling
section[data-section-id="6336cf19602266514b1dba78"] {
  .user-items-list-simple .list-item-content__description a {
    font-family:vintage-deco;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-style: normal;
    color: @red !important;
    text-decoration: none;
    &:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 0;
      margin-left: -1.8em;
      margin-bottom: -8px;
      transition: all 300ms ease-out;
    }
    &:hover:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 1;
      margin-left: 10px;
      margin-bottom: -8px;
    }
  }
}
//end List auto layout//

 

Link to comment
On 10/25/2022 at 8:31 PM, knockout said:

Hey Tuan, I'm having the same issue on my site.

https://roadrunner-echidna-9e76.squarespace.com/semicustom

PW: ephemora2k22

I'm using a definition in place of the URL: earlier in my code I had defined @red-arrow-svg as '/s/Ephemora-Arrow.svg' and it worked only when the Custom CSS panel was open. I tried a few options:

  • Redefining @red-arrow-svg as the whole URL: SVG doesn't appear on the live site nor with the CSS window open
  • Not using a definition at all and just using the shorthand URL (starting with "/s/"): SVG doesn't appear on the live site nor with the CSS window open
  • Not using a definition at all and just using the whole URL: SVG doesn't appear on the live site nor with the CSS window open

So, the only way I can get the SVG to appear, but then only when the Custom CSS window is open, is as I originally had the code, as seen below (using the @red-arrow-svg defined as the shorthand URL):

//List auto-layout//
.user-items-list-simple .list-item-content__title {
  font-family: trade-gothic-next;
  font-style: italic;
  text-transform: none;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__description {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] .list-item-content__title {
  color: #000000;
}
.user-items-list-simple .list-item[data-is-card-enabled="true"] {
  background-color: @lavender;
}
//List link styling
section[data-section-id="6336cf19602266514b1dba78"] {
  .user-items-list-simple .list-item-content__description a {
    font-family:vintage-deco;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.6;
    font-style: normal;
    color: @red !important;
    text-decoration: none;
    &:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 0;
      margin-left: -1.8em;
      margin-bottom: -8px;
      transition: all 300ms ease-out;
    }
    &:hover:after {
      content: "";
      display: inline-block;
      height:26px;
      width:26px;
      background-size: 26px 26px;
      background-image: @red-arrow-svg;
      background-repeat: no-repeat;
      opacity: 1;
      margin-left: 10px;
      margin-bottom: -8px;
    }
  }
}
//end List auto layout//

 

Hi,

/s/ won't work on CSS box. It will work on Code Block, Page Header, Code Injection only

You need to use full url, something like this: https://abcxyz.squarespace.com/s/yourfilename.svg

Next, if your site is trial, sometime uploaded files won't work

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
16 hours ago, MariaFY said:

@tuanphan this worked for me, however svg are still not showing up on mobile. Is there a specific fix to that?  My site is upgraded to a plan and I'm using the full URL in the CSS box. 

www.studio-beni.com

Which page are you referring to? I see on homepage, you used CSS code to hide logo

image.png.b6f8ae730793f28a196c20b6bc7161da.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.