SoloAnt Posted August 20, 2016 Posted August 20, 2016 Why can't you add a svg logo to squarespace? I'm not finding anything that gives any details to why this can't happen or how to make it happen. Seems pretty standard these days to be able to use svg. This post seems to be missing code or something that may possibly work but I'm unable to see what is really being said.https://answers.squarespace.com/questions/25757/how-do-i-replace-a-png-logo-with-an-svg.html ThanksSol
SoloAnt Posted August 20, 2016 Author Posted August 20, 2016 Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing? This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.
SoloAnt Posted August 20, 2016 Author Posted August 20, 2016 Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing? This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.
SoloAnt Posted August 20, 2016 Author Posted August 20, 2016 Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing? This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.
SoloAnt Posted August 20, 2016 Author Posted August 20, 2016 Hi octopus I did see your post and tried adding the css you posted but that didn't work. I'm currently testing out majave I'm not seeing html.svg #header h1.site-title a{} from the inspector so I tried changing it based on the logo wrap for majave. Or is html.svg #header h1.site-title a {} standard throughout squarespace? Or is there something else I'm missing? This seems like it should be the easiest thing to do and it's not, not even for and experienced web designer. First time trying out squarespace I've been using Wordpress for the last 8+ years.
SoloAnt Posted August 21, 2016 Author Posted August 21, 2016 I was thinking the themes were built with the same selectors (basically skins) and thinking that squarespace was a more out of the box solution especially for people who don't know anything about web. I'm looking for the quickest way to put a portfolio together and don't want to tinker with theme files or too much css and someone suggested squarespace so I thought I'd tryout the free trial and then something as simple as a svg logo issue slowed me down. A png 24 logo was still to pixelated looking for me so thought hey simple svg logo fix, but not so easy with this platform at least for the time being. The thing I find the most strange is they seem use svg logos for social icons and other icons why not logos? Anyways,I got it working once I started digging through the Css to find the correct selectors but again thought the themes were more or less built the same way and from the other comments in the forums, it seems that quite a lot of people are confused about this very thing regardless of their web experience or not. Thanks again for at least putting up at a starting point to make it work for the time being.
SoloAnt Posted August 24, 2016 Author Posted August 24, 2016 I'm finding that out more and more. Overall the platform is really cool, I'm just really familiar with wordpress at this point so I'm still debating if I'll end up using it over this. I'll play with this over the next couple days then make my decision. Thanks again for the help.
Guest Posted April 20, 2017 Posted April 20, 2017 Other solutions: (Others did not work for myself) Add a transparent logo with the same dimensions as the .svg Add a new unlisted page as a link, under files, upload the .svg Once completed, it will display the slug for the file e.g. /s/logo.svg. Add this to the end of the website's URL and copy the new URL that displays (Without the 'https:'), e.g. "//static1.squarespace.com/static/58f00e2b579fb33532808b88/t/58f8306cd2b8571e9b705453/1492660332667/logo.svg" Design > Custom CSS and insert/edit: .Header-branding-logo { width: 100%; background-image: url( PASTE THE SVG URL HERE );} .Mobile-bar-branding-logo { width: 195px; background-image: url( PASTE THE SVG URL HERE );} To edit the width of the logo, adust the numerical value by width. Hope this helps :)
Guest Posted February 28, 2018 Posted February 28, 2018 @fmcpherson was right (or at least got me on the right track) Here's how I was able to use an SVG logo: Open PAGES and click the + symbol across from NOT LINKED, select Link. Input a Link Title and then select Click to add URL... Select Files tab and then Add a File Browse for and select your SVG logo, click Open (might be different for your OS or browser) Click SAVE Hover your cursor over your newly created Link page and click on the GEAR icon Select the Link URL, should look something like "/s/logo.svg" Click outside the modal or select CANCEL Now select the Home link at the top and then click on DESIGN Select Custom CSS Copy and paste the following in the input field: .Header-branding-logo { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }.Mobile-bar-branding-logo { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); } === (OLDER TEMPLATE) .site-title img { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); } I included the sites full URL but you might be able to get away without it (SEE @fmcpherson ANSWER). Don't forget to set the width and/or height specific to your needs. Cheers.
Guest Posted April 5, 2018 Posted April 5, 2018 This worked when I added "a.site-title-link" to the css (don't forget the comma preceding it), like so: .Header-branding-logo, a.site-title-link { width: 100%; background-image: url( PASTE THE SVG URL HERE ); } .Mobile-bar-branding-logo, a.site-title-link { width: 195px; background-image: url( PASTE THE SVG URL HERE ); } (I am using the Galapogos theme) :)
yolandesukal Posted September 21, 2018 Posted September 21, 2018 risforraccoon thanks for posting the code for the older template. This worked for me in Alex. One thing I had to do in addition: after adding in the code below, and pasting the SVG logo URL where indicated, I had to go into Design > Logo & Title and add a transparent png. I did this because both my old png logo and the svg logo was showing up, I guess since the code was still calling for both; an empty transparent png saved at the size I wanted my logo was my work around. (OLDER TEMPLATE) .site-title img { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); }
yolandesukal Posted September 21, 2018 Posted September 21, 2018 To use an SVG logo in header for Squarespace template Alex: You'll want to add some text (any word will do) to a page. Select the text and click the link icon. Click the Files tab. Click Add a File. Upload the SVG logo file. Save. Click the text link you've just created and copy the URL code of the page where you SVG file is shown. Paste the URL within the following code: .site-title img { width: auto; height: auto; background-image: url( PASTE THE SVG LOGO URL ); } Place complete code in Design>Custom CSS. Save and reload page. If multiple versions of your logo is showing up in the header, go to Design> Logo & Title and upload an empty transparent PNG. Save and reload the page Delete the word link you initially made, you won't need it anymore. Hope this helps consolidate threads for Alex template users.
Boom Posted March 13, 2019 Posted March 13, 2019 Brilliant!After uploading the blank png it this finally works.But this is only for the site-title img. What code do I have to add/change to use svg's this way, for several other icons or svg-images anywhere on a site?(I got this kind of working via Markup, but then on mobile the svg takes the whole screen. So how do I adjust the required sizes for svg's somewhere else on the site?) Is it possible to add several svg's into Design/ Custom CSS/ Manage Custom Files/ Add images? And if so, how to refer to these url's?Thanks sofar!
Recommended Posts
Archived
This topic is now archived and is closed to further replies.