Shuffles07 Posted February 11, 2021 Share Posted February 11, 2021 Hey Everyone, I'm in the process of creating a website (I'm still in the trial phase so can't share the link).Theme: Clarkson 7.1My Problem: The logo we are using for our website is white. This works really well as it sits on an edge to edge banner on each page throughout the site (see attached for an example). However, when creating individual blog pages there is no option to choose a header image (Squarespace Support also confirmed that this can't be done on blog pages). As our logo is white, you can't see it (see attached for an example).Potential Solution 1: I found CSS online that allows you to upload a new logo and then apply it to a specific page. This works on all pages throughout the website except for blog pages unfortunately.CSS Code: <style> div.header-title-logo a { content:url("https://static1.squarespace.com/static/5611841fe4b0f085582f2aa7/t/5ddc2f3f2e5a7339b69c08b2/1578936481584/?format=1500w") !important; max-width: 290px; /* if logo needs to be centered */ margin-left: auto; margin-right: auto; } </style> Website I found the code from: https://www.maryphilip.com/the-blog/how-do-you-change-the-logo-on-a-single-page-squarespace#:~:text=Head%20over%20to%20Design%20%3E%20Custom,downloaded%20and%20copy%20the%20url. To do this, you choose Settings > Advanced (on a specific page) and then copy the above code in with the image url. Blog pages don't have that option - only formatting options.Potential Solution 2: To change the background section color on blog pages. I changed the background color to a light grey so that the white logo could be seen. However, I really don't like it (see attached). Does anyone know, is there a way to upload a different logo for individual blog pages? Or is there a way to upload a header image for individual blog pages? We want to keep the edge to edge design so want to keep the navigation bar transparent (we tried making the nav bar white and using a colored version of the logo but edge to edge just looks so much better. I would really appreciate if someone had a solution. Many thanks in advance - and apologies for the long description. Cheers, Shuffles. Link to comment
Shuffles07 Posted February 11, 2021 Author Share Posted February 11, 2021 Ok, I just found CSS code to invert the logo - so now it's black (see attached). It looks great but does anyone know if you can choose the color? CSS Code: <style> .view-item .header-title-logo img { -webkit-filter: invert(100%); filter: invert(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1'); } </style> Inscape 1 Link to comment
tuanphan Posted February 16, 2021 Share Posted February 16, 2021 Try this code <style> .header-title-logo img { visibility: hidden; } .header-title-logo a { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
ilonapoutanen Posted February 23, 2021 Share Posted February 23, 2021 (edited) I have a similar problem. My clients logo is beige and I would like to change the header color on blog post page so that logo is visible. Who could help me?https://silver-caribou-ejyk.squarespace.com/blogi/blog-post-title-one-3kzs4 password: kotoisa Edited February 23, 2021 by ilonapoutanen Link to comment
tuanphan Posted March 5, 2021 Share Posted March 5, 2021 (edited) On 2/23/2021 at 7:29 PM, ilonapoutanen said: I have a similar problem. My clients logo is beige and I would like to change the header color on blog post page so that logo is visible. Who could help me?https://silver-caribou-ejyk.squarespace.com/blogi/blog-post-title-one-3kzs4 password: kotoisa Hi. Add to Blog Page Header <style> .view-item img { content: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); } </style> Edited March 3 by tuanphan update a shorter code LucyDesigns and ilonapoutanen 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JennWalker Posted September 26, 2021 Share Posted September 26, 2021 On 3/5/2021 at 6:15 AM, tuanphan said: Hi. Add to Blog Page Header <style> .view-item .header-title-logo img { visibility: hidden; } .view-item .header-title-logo a { background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } </style> How do you upload the logo and get the url? Link to comment
tuanphan Posted September 27, 2021 Share Posted September 27, 2021 19 hours ago, JennWalker said: How do you upload the logo and get the url? Follow this guide: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
JohnNightingale Posted October 17, 2022 Share Posted October 17, 2022 Hi all, I'm having similar issues here. I can get tuanphan's code (thanks) to work on my Blog section (albeit adapting some of the CSS classes to work with my specific template), but I only want this new logo to appear on 'post' pages - not on the Blog listing page. Does anyone know a way to adapt this, so it only appears on the post pages? Thanks in advance. Link to comment
tuanphan Posted October 19, 2022 Share Posted October 19, 2022 On 10/17/2022 at 11:09 PM, JohnNightingale said: Hi all, I'm having similar issues here. I can get tuanphan's code (thanks) to work on my Blog section (albeit adapting some of the CSS classes to work with my specific template), but I only want this new logo to appear on 'post' pages - not on the Blog listing page. Does anyone know a way to adapt this, so it only appears on the post pages? Thanks in advance. In above comments, I posted 2 code, first for blog list + blog posts, second for blog posts. Which code did you use? This code for blog post individuals https://forum.squarespace.com/topic/184448-using-a-different-logo-on-blog-posts/?do=findComment&comment=446757 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment