David_Ledger Posted August 5, 2020 Share Posted August 5, 2020 Site URL: https://mushroom-sapphire-grdc.squarespace.com/ (This code will allow a little outer glow around a specific image:) If I put it in Design>Custom CSS, and it works, but I am trying to put page specific code on their respective pages to try to organize a bit better: #block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}} How do I translate this code to a single blog page where I am either suppose to inject it into either the "Page Header Code Injection” area or the "Post Blog Item Code Injection” I thought it would be this but it is not working: <style> #block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}} </style> Any thoughts? Thanks in advance, Link to comment
derricksrandomviews Posted August 5, 2020 Share Posted August 5, 2020 (edited) That bloc id is for a specific image, Custom css applies it to all pages, so the one with the block will work, but if you post it in the header of any single page, it will not. This means you need to target the image block id put it in the code and apply the code to the page the image is on. You can id specific blocks with a free Chrome plug in: https://chrome.google.com/webstore/detail/squarespace-id-finder Once you id the block just change it in your code insert in the header of the page you want. Edited August 5, 2020 by derricksrandomviews Link to comment
David_Ledger Posted August 5, 2020 Author Share Posted August 5, 2020 (edited) Thanks Derrick, That is the plug-in I used to id the block. Like I said previously, it works when added to Design>Custom CSS, but I am not sure how to write it if I just wanted to add it to the Page Header Code Injection area of my blog page instead of the Design>Custom CSS area. Edited August 5, 2020 by David_Ledger Link to comment
derricksrandomviews Posted August 5, 2020 Share Posted August 5, 2020 Oh, now I see, to add it to just one page, just add this to the front and end of the code <style> actually when you type that into the header it will add the second <style> command just paste the code between then two. Link to comment
David_Ledger Posted August 5, 2020 Author Share Posted August 5, 2020 (edited) I did that and it did not work. I put this into the Into the Blog Page>Advanced>Page Header Code Injection: <style>#block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}}</style> Edited August 5, 2020 by David_Ledger Link to comment
derricksrandomviews Posted August 5, 2020 Share Posted August 5, 2020 I have code for specfic blocks on certain pages in custom css, sometimes that is the only way to get certain effects to work. Link to comment
David_Ledger Posted August 5, 2020 Author Share Posted August 5, 2020 I appreciate you reaching out. I originally put everything in the Design>Custom CSS area. I was hoping to tidy up the site by moving CSS that only effected single pages pages over to the Code Injection areas. No worries, it still works in the Custom CSS area. Thank you! Link to comment
lstrauss831 Posted December 4, 2020 Share Posted December 4, 2020 (edited) My code injection doesn't work on mobile devices on Product pages my client website. Stop working yesterday. I didn't have the problem before. Thank you for your help. Please check this page. I can't rate the product and write review on iPhone, any mobile device. I test it both browsers Google and Safari on mobile and it doesn't work. I am using Facebook Comment Plugin code and Rating-Widget code in code injection and code blocks. https://www.newdaywholehealth.com/essential-oils/eaters-digesthttps://www.newdaywholehealth.com/essential-oils/brain-power Edited December 4, 2020 by lstrauss831 Link to comment
tuanphan Posted December 6, 2020 Share Posted December 6, 2020 On 12/5/2020 at 1:52 AM, lstrauss831 said: My code injection doesn't work on mobile devices on Product pages my client website. Stop working yesterday. I didn't have the problem before. Thank you for your help. Please check this page. I can't rate the product and write review on iPhone, any mobile device. I test it both browsers Google and Safari on mobile and it doesn't work. I am using Facebook Comment Plugin code and Rating-Widget code in code injection and code blocks. https://www.newdaywholehealth.com/essential-oils/eaters-digesthttps://www.newdaywholehealth.com/essential-oils/brain-power Hi. Have you solved this yet? 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
delicatehammer Posted September 14, 2021 Share Posted September 14, 2021 @tuanphan Hi, I'm having the same issue. I've entered CSS to change the background color of store and product page, however, on mobile and incognito, the background does not show up on page load (once I reload, it appears; have had it tested on other phones and same problem.) Site URL: https://www.delicatehammerstudio.com/tributary-collection Password is DHVIP2021 And the custom code used on this specific page's Page Header Code Injection is below: <style> .Main { background-color: #212931 !important; } </style> I've also tried applying the CSS to the site, targeting the specific store pages—this solves the loading problem for the store pages, but is NOT applying the background color to all product pages within that store. That code used is here: body#collection-6094f797c91c8270768fdbf7 .Main { background: #ffffff !important; Link to comment
paul2009 Posted September 14, 2021 Share Posted September 14, 2021 3 hours ago, delicatehammer said: I've entered CSS to change the background color of store and product page, however, on mobile and incognito, the background does not show up on page load As you're using a Brine family template, you should only add your styles to Design > Custom CSS. Your site's template uses Ajax Page Loading to improve performance (read more) and so you should not add styles using Code Injection. They'll only load whilst you're logged on; visitors won't see them (except on refresh). Regarding store pages, they'll have a collection class (prefix with ".") not a collection ID (prefix with "#"), so your CSS would start with: body.collection-6094e977b128ae3b58601c3b Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links.Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)Buy me a coffee 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