Jump to content

Adding Superscript throughout website to a company name

Recommended Posts

Site URL: https://earthworm-octahedron-jelm.squarespace.com/

I have been reading older posts about using Code Blocks to add a superscript. The company I am working with has a ® at the end of their name. The site is pretty much built and now I need to figure out how to turn every ® in body copy and headlines to a superscript.

Is there any easy way to do this with code block? When I tried by adding ..  <p>TommyBars<sup>®</sup> text.</p> I basically ended up with the code block showing the right thing and nothing else. I really don't want to go back and redo all the type in multiple markdown blocks. 

Thanks so much.

Katherine

 

Website: https://earthworm-octahedron-jelm.squarespace.com/

Password: TBZigg3

Link to comment

You could try this in your footer Code Injection.

<script>
  /* superscripting all ® which aren't already */ 
window.addEventListener("DOMContentLoaded", function(){
    document.querySelectorAll("p, a, h1, h2, h3, h4, h5, h6, label").forEach(function (el) {
        el.innerHTML = el.innerHTML.replace(/®(?!\<\/sup)/g, "<sup>®</sup>");
    })
});
</script>

 

Edited by tazmeah
added labels
Link to comment

Hi @tazmeah. It's me again. You have been so helpful and I am hoping you might be able to resolve a problem with the code above for the superscript. The code does exactly what I need in terms of the registration superscript for for some reason it then deletes the two gallery blocks (film photos and media logs) below the testimonial gallery block. I tried deleting the gallery blocks below and adding them as a new section and that didn't work. Basically anything below the testimonial was blank. Do you have any idea why? Thanks so much. I am new to SquareSpace and on a big learning curve and this forum and people like you have been so helpful. It is very much appreciated!

Screenshot 2021-01-04 at 11.23.04.png

Link to comment
On 1/4/2021 at 6:26 PM, BrownKatUK said:

Hi @tazmeah. It's me again. You have been so helpful and I am hoping you might be able to resolve a problem with the code above for the superscript. The code does exactly what I need in terms of the registration superscript for for some reason it then deletes the two gallery blocks (film photos and media logs) below the testimonial gallery block. I tried deleting the gallery blocks below and adding them as a new section and that didn't work. Basically anything below the testimonial was blank. Do you have any idea why? Thanks so much. I am new to SquareSpace and on a big learning curve and this forum and people like you have been so helpful. It is very much appreciated!

Screenshot 2021-01-04 at 11.23.04.png

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/7/2021 at 6:35 PM, BrownKatUK said:

@tuanphan Yes please re: superscript. 

Can you duplicate page, add code there, share duplicate page url, we can check easier?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

@tazmeah I came across this thread and your solution helped me solve my issue to some extent, but I hope you can give some additional guidance. I'm using the ® in the title for a range of products. When viewing the product in detail the ® is superscript, but when looking at the products overview/product grid, it's not. Is there something that can be added to the code to achieve it here also?

Thanks for your help!

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.