Jump to content

How to inject custom code to edit banner text

Recommended Posts

I am looking to strikethrough a portion of the text overlaying my banner image in the Hayden template. Of course, this requires code as strikethrough is not a basic tool. Is there a way to inject this code into the banner text somehow? Many thanks!


<h1><p style="text-align: center;"><del>marketing consultations.</del></h1></p>


Link to comment
  • Replies 10
  • Created
  • Last Reply

It helps if we can view your site. Please include a link to your site and check your site's visibility settings are suitable for us to view it.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Cute. What do you want to strikethrough? I couldn't see it.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

OK. Can add the text to the banner. Then, this may sound weird but, format the strikethrough part as italics using the formatting toolbar. I can provide some code to remove the italics and convert this part to strikethrough.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Perfect. Now add this to Design > Custom CSS:


 #collection-5c7db4b47817f73e6c594c76 .desc-wrapper p em {
  text-decoration: line-through;
  font-style: normal;
}

This will work by limiting changes to this page only (using its unique collection ID). It will style any paragraph text (p) in the Banner Description (.desc-wrapper) that is italic (em) into strikethrough text (text-decoration: line-through) without italics (font-style: normal).

I hope that helps.

Paul

Like other moderators on this forum, I post answers to help fellow Squarespace users understand how to customise their sites.
If I've correctly answered your question, please Accept the answer by clicking Accept below. If it didn't help, feel free to ask for more help or wait for forum users to add their comments and/or answers.

To everyone else who reads this answer and finds it helpful, please vote it up using the up arrow. This will let other users know it's a good answer.
For more useful Squarespace tips see our website.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Success! I cannot thank you enough for sharing all of your Squarespace knowledge. Virtually every question I’ve ever Googled has been answered by you :) Really appreciate it. All my best! Emma

Link to comment

Archived

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

Guest
This topic is now 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.