Jump to content

Line through words

Recommended Posts

Thanks tuanphan, do you know if there is another way to achieve this? I only want to cross the price of one item, and unfortunately i can only use css by upgrading package, which will increase the cost of my squarespace package by 50% a year. Just to cross one word, (no good value at all in my case) I'll provably have to reconsider squarespace . 

Link to comment
4 hours ago, jose1570048420 said:

i can only use css by upgrading package

Fortunately, that's not true. The CSS editor is available on all plans, including the personal plan. 

If you had included a working link to the page in your question, one of us could have been more specific about the CSS to use.

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
10 hours ago, paul2009 said:

Fortunately, that's not true. The CSS editor is available on all plans, including the personal plan. 

If you had included a working link to the page in your question, one of us could have been more specific about the CSS to use.

 

Thanks for your reply Paul. Here is the page I was talking about:

 https://www.weddingwonders.ie/wedding-videography-prices

all I want is to cross the price. Actually I think I built this page based on your help and recommendations on this forum a while ago. Thanks for that too, all your suggestions were really helpful.

Kind regards

Ivan   

Link to comment

You're welcome. I can see that the numbers are just text - they aren't prices in the 'Squarespace' sense of the word because they aren't on a Product Page or in a Product Block. You therefore have two ways to do this. That just means that we need to isolate the numbers in some way.

One way to do this is to add the text that you want to strikethrough, and then format it as italic, using the text toolbar. We can then add some CSS to Design > Custom CSS that will format the italic text as strikethrough instead. Of course, this assume that you aren't using italics elsewhere on the site.

Is this what you want to achieve? 

1712982787_Screenshot2020-01-22at10_13_26.thumb.png.cc46517bea8f209e8d2e166abc87bead.png

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
12 hours ago, paul2009 said:

You're welcome. I can see that the numbers are just text - they aren't prices in the 'Squarespace' sense of the word because they aren't on a Product Page or in a Product Block. You therefore have two ways to do this. That just means that we need to isolate the numbers in some way.

One way to do this is to add the text that you want to strikethrough, and then format it as italic, using the text toolbar. We can then add some CSS to Design > Custom CSS that will format the italic text as strikethrough instead. Of course, this assume that you aren't using italics elsewhere on the site.

Is this what you want to achieve? 

1712982787_Screenshot2020-01-22at10_13_26.thumb.png.cc46517bea8f209e8d2e166abc87bead.png

Thanks Paul, Yes, that's exactly it. Targeting the italics is a great idea as I'm not using then anywhere else. Didn't know you can add snippets of css on the design section.

 

Im adding the line  

{
   text-decoration: line-through ;
}

but i don't know how to target the italics, everything that I've tried so far has not worked for me. 

Regards

Ivan

Link to comment
  • 4 weeks later...

Once you've formatted the text as italics (using the text formatting toolbar), you can add:

/* Replace italics with strikethrough */
em {
  text-decoration: line-through;
  font-style: normal;
}

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 1 year later...
  • 2 months later...
  • 1 year later...
On 3/3/2021 at 3:45 AM, CubeSquared said:

Easiest way might be to just create the text in a Word / Pages document, strike it through, then copy'n'paste it. Works for me!

I found that even this, oddly, didn't work: when I pasted strikethrough-formatted text from Word into the About page on my website, Squarespace stripped out the strikethrough formatting. But I did find a workaround!
I typed the word I wanted struck through into one of my site's blog pages and used the strikethrough formatting button available on the blog page (but not available in About for some weird reason). Once Squarespace had formatted the strikethrough using whatever markup it uses, the formatting stuck when I pasted it into my About page.
Seems face-palmy to me: the functionality is everywhere, so why not just consistently use the same toolbar everywhere as well, instead of stripping out the button ...sometimes? Maybe it's just an oversight and they forgot to update all the toolbars when they added the feature, I dunno.
 

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.