MJohn Posted August 6, 2021 Posted August 6, 2021 Is there a way to name sections in 7.1 or apply classes? I want to apply specific code to multiple sections and listing them one by one is tedious. Beyondspace 1 👋 Michelle John 💕 Catchafire volunteer 🖥️ Web & graphic design for churches, nonprofits & small businesses 🔗 brambledesign.co
iamdavehart Posted August 6, 2021 Posted August 6, 2021 this is actually a pretty interesting question! I don't think Squarespace lets you directly modify attributes on the elements like class and name. However, they do use nice html elements rather than just divs everywhere, which means that you can do some pretty cool stuff with css nth-child selectors. My guess is you don't like looking up the IDs, so this could do something instead of that (although if you rearrange the order of the sections you'll have to be careful!) Squarespace uses an <article> tag for its non-header/footer content and the <section> tag for sections in a 7.1 layout so we'll start there and use our nth-child selector. At it's most basic, you do this kind of thing, supply a number and it picks that section. <style> /* this will apply a red border to the top of the 3rd section */ section:nth-child(3) { border-top:solid 2px red; } </style> However, the nth-child selector in css has some tricks up its sleeve, because it can accept a function that is applied to the n in the form An+B. It can also accept odd or even. so you can do things like this: <style> /* put a red border on the top of section 1,3,5 */ article section:nth-child(odd) { border-top: solid 2px red; } /* put a blue border on the top of the first three sections */ article section:nth-child(-n+3) { border-top: solid 2px blue; } /* put a green border on the top of the third section and all following */ article section:nth-child(n+3) { border-top: solid 2px green; } /* combine them for a range! put an orange border on the top sections 2-4 */ article section:nth-child(n+2):nth-child(-n+4) { border-top: solid 2px orange; } </style> Things to note: n starts at zero for formulae it has to be An+B. this is why you don't write 3-n, you have to write -n+3. squarespace will also use a section for the pagination so you need to make sure that the article part is in the css rule. you might also want to use an id for the top level or put this in a code block to make sure it doesn't happen on every portfolio/layout reordering sections will cause n to change so if you want the sections to stay even when reordered you'll have to use IDs in terms of specificity all the rules are the same, which means that they get applied in the order they're listed, so in that example, the last rule (orange) will overwrite earlier rules. you can find out more about the nth-child selector here: :nth-child() - CSS: Cascading Style Sheets | MDN (mozilla.org) Hope that gives you some ideas. you could also combine this technique with css first-child and last-child selectors too. creedon and tuanphan 2 Dave Hart. Software/Technology Consultant living in London. buymeacoffee
creedon Posted August 6, 2021 Posted August 6, 2021 @iamdavehart makes excellent points in his post. I'll add that it is also possible to use Javascript to add almost anything in the way of attributes to an element. Such as class names or element ids. Javascript is not magic or a shortcut in many cases because the same issues iamdavehart mentions about targeting elements also applies to using Javascript. However I've found a few cases where there just doesn't seem to be to a way to target an element through straight CSS. This happens because SS creates the structure of their documents to solve their problems. Not ALL of our problems. So there are bound to be some logical gaps in how to target an element. In other words how to get from point a to z. So it ends up being a matter of picking the right tool(s) for the job. tuanphan and iamdavehart 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.
MonicaW Posted October 5, 2022 Posted October 5, 2022 Is this still the case? No way to assign an ID to sections? I want to assign an ID to multiple sections through out the site (that are not always in the same layout or order), in order to assign a style globally. Perhaps more efficiently.... Beyondspace 1
KimmyBartle Posted October 26, 2023 Posted October 26, 2023 Wondering about this too. Any updates? Beyondspace 1
Beyondspace Posted June 21 Posted June 21 On 10/27/2023 at 12:36 AM, KimmyBartle said: Wondering about this too. Any updates? I had a workaround that proved working https://beyondspace-showcase.squarespace.com/section-identifier-demo?noredirect Here's a workaround using video backgrounds URL with URL parameters Steps: Prepare a Video Link: Use a placeholder video, e.g., Quote https://www.youtube.com/watch?v=D0UnqGm_miA Append URL Parameters: Add a unique ID as an URL parameter. For example: section-id is the url param and section-pilot is the param value Quote https://www.youtube.com/watch?v=D0UnqGm_miA§ion-id=section-pilot Insert the Video URL: Set this URL as the background video of your section. This embeds the ID in the DOM under data-current-context. Change or Remove Background: After setting the video URL, change the background to anything else or remove it. The ID persists. Targeting the Section: Use this CSS selector to target the section: [data-current-context*='section-id=section-pilot'] Side Notes: This method only works for sections supporting video backgrounds. If using Squarespace-hosted videos, target by the video file name instead Disclaimer: This workaround is using an undocumented Squarespace feature and may not be future-proof. BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - PDF Lightbox popup - ...) </> 🗓️ Delivery Date Picker (Date picker form field) Gallery block 7.1 workaround </> No-code customisations for Squarespace
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment