Jump to content

Custom CSS on a banner

Recommended Posts

Anyone have this moronic issue where you edit the CSS on a banner like:

 

#yui_3_17_2_1_1571080309234_318 .small-button-style-solid .sqs-block-button .sqs-block-button-element--small, .medium-button-style-solid .sqs-block-button .sqs-block-button-element--medium, .large-button-style-solid .sqs-block-button .sqs-block-button-element--large {
  font-family: 'recoleta';
  font-size: 12px;
  margin: -50px 0 0 0;
}

#yui_3_17_2_1_1571080309234_318 h2 { font-family: 'america';
font-size: 12px;
  color: #f15a24;
  margin: 0 0 22px 0;
}

#yui_3_17_2_1_1571080309234_318 h3 { font-family: 'america';
font-size: 10px;
  color: #f15a24;
  margin: -55px 0 22px 40px;
  text-transform: none;
}

#yui_3_17_2_1_1571080309234_318 { background: #ffd585;
 padding: 20px 20px 25px 70px;
}

Only to save it and refresh the page and the #ID changes???

Anyone know how to get a consistent selector to work?

 

Thanks

Link to comment
  • Replies 1
  • Views 569
  • Created
  • Last Reply

Hi @codeexist.

What you're encountering are dynamic IDs generated by YUI, a JavaScript framework that Squarespace uses. As that implies, such IDs will change on each page render. The first time a designer/dev runs into this issue, it definitely tries one's patience.

To resolve this, checkout this related answer over on SO, but you can find a whole bunch more posts/pages on this too. Take a look at those and you'll find what to do. In summary: use block IDs instead.

 

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

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.