Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS : DIV ID keeps changing


hasher22

Question

Posted (edited)

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

Edited by hasher22
Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

THANKYOU! Yes it helped a HUGE BUNCH!

Posted Images

10 answers to this question

Recommended Posts

  • 0
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)

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
Posted (edited)
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?

Edited by hasher22
Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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 post
  • 0
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;
}

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0
Posted (edited)
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

Edited by hasher22
Link to post
  • 0
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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

Link to post
  • 0
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 post
  • 0

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 best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...