Jump to content

CSS : DIV ID keeps changing

Recommended Posts

Site URL: https://salmon-hibiscus-r5wx.squarespace.com

Hey guys,

Sitepassword: dante123

I am trying to customise simple CSS like padding and the ID keeps changing from the source code! Where do I find the permanent DIV ID?

I'm finding the DIV ID through firefox 'inspect' then I copy the DIV ID and change it. But when I save it, the DIV ID changes.

I spoke to chat and they said my website is not using any 'cover pages' and I should be all good.

How come the DIV ID keeps changing? Or am I inspecting the wrong website area? Where can I get the right #ID so my padding permanently stays?

Capture.JPG

Link to comment
  • Replies 10
  • Views 2.6k
  • Created
  • Last Reply
9 minutes ago, hasher22 said:

Site URL: https://salmon-hibiscus-r5wx.squarespace.com

Hey guys,

Sitepassword: dante123

I am trying to customise simple CSS like padding and the ID keeps changing from the source code! Where do I find the permanent DIV ID?

I'm finding the DIV ID through firefox 'inspect' then I copy the DIV ID and change it. But when I save it, the DIV ID changes.

I spoke to chat and they said my website is not using any 'cover pages' and I should be all good.

How come the DIV ID keeps changing? Or am I inspecting the wrong website area? Where can I get the right #ID so my padding permanently stays?

Capture.JPG

Use this plugin to find the fixed id of the block

Squarespace ID Finder - Chrome Web Store (google.com)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
22 minutes ago, hasher22 said:

Thanks! I just downloaded it! Very helpful!

I just found out through searching the forums, only "#block" can be used as ID's for CSS. But how can I edit a non #block ID? such as yui ID within that #block? How can I target that precise yui ID?

They are generated at run time and changed over time

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 minute ago, bangank36 said:

They are generated at run time and changed over time

Thanks but is there any way of me just changing the padding on the price only, I am struggling to target the price only as per my screenshot.

I mean if we can only target 'blocks' then how does one really adjust other elements in CSS like padding, colour and such not for the whole block but elements in the block?

This is quite counter-productive if we can only target blocks

Link to comment
46 minutes ago, hasher22 said:

I am trying to customise simple CSS like padding and the ID keeps changing from the source code! Where do I find the permanent DIV ID?

As you've found, some IDs change often and others stay the same. I wrote an article about this here:

In Squarespace, what are the differences between #block-yui and #yui selectors?

However, IDs are only useful if you want to select ONE element on the page.

If you want to change all the price elements on product blocks, it's easier to use a class rather than an ID. Most elements have a class name specific to them and these are really useful for adjusting every element of the same type on your site. For example, to reduce the default padding on the price element from 25px to 8px, you could add this instead:

.product-block .productDetails .product-price {
  padding-top: 8px;
}

 

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
38 minutes ago, paul2009 said:

As you've found, some IDs change often and others stay the same. I wrote an article about this here:

In Squarespace, what are the differences between #block-yui and #yui selectors?

However, IDs are only useful if you want to select ONE element on the page.

If you want to change all the price elements on product blocks, it's easier to use a class rather than an ID. Most elements have a class name specific to them and these are really useful for adjusting every element of the same type on your site. For example, to reduce the default padding on the price element from 25px to 8px, you could add this instead:



.product-block .productDetails .product-price {
  padding-top: 8px;
}

 

Thanks!

Very useful and I have started targeting classes instead of blocks. Though classes are universal and not individual. The question remains unanswered, can I target individual IDs?

One problem I also faced with one class:

.product-quantity-input,  {
  display: none;
}

This css removed the quantity of the products on the home page only, NOT the quick view or the full view of the product. The reason I used "display: none;" is because the elements below it bumped up.

BUT if I used

.product-quantity-input,  {
  visibility: hidden;
  display: none;
}

Then the quickview and full view of the product removes the quantity.

Now here's my question, why is it that a class that suppose to be universal, how come display: none; worked on my homepage only where as display: none; & visibility: hidden; together worked on ALL pages?

Also using visibility: hidden does NOT bump up elements under neath it which I wanted like it did with display: none

Link to comment
20 minutes ago, hasher22 said:

The question remains unanswered, can I target individual IDs?

Yes, you can target individual IDs, but not YUI IDs. 

21 minutes ago, hasher22 said:

One problem I also faced with one class.. This css removed the quantity of the products on the home page only, NOT the quick view or the full view of the product.

This is due to CSS hierarchy and is not specific to Squarespace. If there are two or more conflicting CSS rules that point to the same element, for example 'display: block' and 'display: none', the browser follows some rules to determine which one is most specific and therefore wins out. There are a number of great free tutorials on YouTube that can help you with the basics of CSS.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
10 hours ago, paul2009 said:

Yes, you can target individual IDs, but not YUI IDs. 

Thank you, though which ID can I change individual elements? I've been searching and copying and pasting IDs (not YUI IDs) and I can't seem to find individual IDs? What do they look like?

 

 

10 hours ago, paul2009 said:

This is due to CSS hierarchy and is not specific to Squarespace.

Thanks! I will def. brush up on css as I am fairly new to it.

Link to comment

For SS the general rule for which ids you can target is...

ones that begin with yui are ephemeral, it's useless to target them

ones that begin with block, page-section, etc are more stable

But the thing to understand is that not all elements are required to have an id! So to get to a particular element you need to build up a selector. The selector is like directions on how to get to a particular thing you want to change. You can also think of selectors like an address or a path. As you dig into CSS you'll learn more about selectors.

So lets take your Obsidian cake as an example. The product block has and id of block-yui_3_17_2_1_1619701295913_34863 and we want to target the product price for some changes.

So the CSS selector is going to look like..

#block-yui_3_17_2_1_1619701295913_34863 .product-price

...and the the full ruleset (another term to learn about from CSS) might look something like...

#block-yui_3_17_2_1_1619701295913_34863 .product-price {

  padding-top : 20px;
  
  }

Not sure if that helps but there you go.

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.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.