jdb99 Posted November 28, 2023 Share Posted November 28, 2023 So, I'm trying to make very specific changes to some CSS styles. I figure I'll probably have to use these long class names and IDs as selectors, right? For example, this is just part of one selector: #yui_3_17_2_1_17011......... > div.fe-block.fe-block-51ced305e6f..... However, I'm on a chat with a Squarespace agent right now who told me "So it looks like the ID numbers of the block will change dynamically in version 7.1 sites, so any code targeting a specific ID may not work when the site is refreshed or reloaded." That's clearly an issue for custom css, no? Again I'm not trying to change every .button or every p, I'm trying to access very specific buttons and text divs, and I feel like I need those IDs and class names to stay the same! TIA Link to comment
Solution tuanphan Posted November 28, 2023 Solution Share Posted November 28, 2023 Block has 2 type of ID #yui-.. it will change if you reload the page #block-yui_ or #block-... it is static id, you should use this ID To find Block ID, you can use this free tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff cami_leisk and SaranyaDesigns 2 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
SaranyaDesigns Posted November 28, 2023 Share Posted November 28, 2023 @tuanphan this is great information to have... but what if all the blocks ONLY have #yui ids? how would I target this block, for example? Link to comment
tuanphan Posted November 30, 2023 Share Posted November 30, 2023 (edited) You can use this Text Block ID to target it #enter-text-block-id + .row >.span-8>row:nth-child(1) Reference: https://www.w3schools.com/cssref/css_selectors.php Edited November 30, 2023 by tuanphan 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
SaranyaDesigns Posted November 30, 2023 Share Posted November 30, 2023 13 hours ago, tuanphan said: You can use this Text Block ID to target it #enter-text-block-id + .row >.span-8>row:nth-child(1) Reference: https://www.w3schools.com/cssref/css_selectors.php @tuanphan oy that makes it very cumbersome... annoying that they won't just generate static IDs for all the blocks, that would make targeting for CSS MUCH cleaner overall. Silly choice by Squarespace! Link to comment
tuanphan Posted December 1, 2023 Share Posted December 1, 2023 16 hours ago, SaranyaDesigns said: @tuanphan oy that makes it very cumbersome... annoying that they won't just generate static IDs for all the blocks, that would make targeting for CSS MUCH cleaner overall. Silly choice by Squarespace! You can also use JS code to attach a class name to it 😆 Use ideal here SaranyaDesigns 1 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
JA_ATL Posted April 3 Share Posted April 3 Hi @tuanphan, I'm in the same boat and trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you! Also, I've been trying like hell to get the hover state to change the text to blue on hover and can't seem to override the existing style. I've tried !important and targeting the block ID and no dice. Cleared cache. Any pointers? My current best attempt looks something like this: #block-yui_3_17_2_1_1712158021426_22128 .sqs-block-button-element--small:hover a { color: blue !important; } Link to comment
tuanphan Posted April 7 Share Posted April 7 On 4/4/2024 at 12:21 AM, JA_ATL said: Hi @tuanphan, I'm in the same boat and trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you! Also, I've been trying like hell to get the hover state to change the text to blue on hover and can't seem to override the existing style. I've tried !important and targeting the block ID and no dice. Cleared cache. Any pointers? My current best attempt looks something like this: #block-yui_3_17_2_1_1712158021426_22128 .sqs-block-button-element--small:hover a { color: blue !important; } Can you share link to page where you use text/button? We can check easier 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
jmaasberg Posted May 20 Share Posted May 20 On 4/3/2024 at 10:21 AM, JA_ATL said: trying to create a new class to target a set of specific buttons without having to manually update each block individually. Assume I need to use JS to attach a class name to them? Can you give me any pointers on how I'd go about creating a ".custom-price-button" class so I could simply target this custom class? Thank you! Did you ever figure out how to do this? 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