CSS : DIV ID keeps changing

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?

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?

Use this plugin to find the fixed id of the block

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

4 minutes ago, bangank36 said:

Use this plugin to find the fixed id of the block

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

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?

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

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

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;
}

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

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.

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.

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.

22 hours ago, creedon said:

So the CSS selector is going to look like..

THANKYOU!

Yes it helped a HUGE BUNCH!