Adding "strike through" style in a rich text element from a CMS collection

Design help CMS
1

Hi All,

I’m having trouble styling text in a rich text element that is bound with a cms collection. Does anyone know how I can do that? It’s a couple of lines that need to have the strikethrough.

Here is my public share link: LINK
(how to access public share link)

2

Unfortunately, inside a RTF field you can’t style a string of text that way, unless you overrode the styling of one of the elements that are supported. Example > give the Rich Text element a class. Then modify the styling for All Italics, when nested inside of “class” you gave to the RTE. Of course this will effect all italicized text on all dynamic pages inside. You could do that to an H6 element, which might be a better target.

image

CloudApp

Elements you can create inside of a rich text:
  • Paragraphs
  • Headings (H1-H6)
  • Images
  • Image Captions
  • Image alt attributes
  • Block quotes
  • Unordered Lists (bulleted)
  • Ordered Lists (numbered)
  • Videos (Youtube, Vimeo)
  • Rich media (Google maps, SoundCloud, Imgur, Giphy, Codepen, and more)

For any of the text elements you can add additional formatting:

  • Links (URL, page, email, etc)
  • Bold text
  • Italic text
3

Hi there

Thanks for responding. Kinda sucks that you can’t style text in a RTE field. Anyways, I found a simple workaround. I used a strikethrough generator and added that text in the collection editor. It works but the only drawback is I can’t use a custom font on the added text. It’s a good enough solution for now though.

Cheers,

1 Like
4

I will add that you can create and style spans in text fields / paragraph fields. Glad you found a solution that worked for you.

5

Hello! Could You please help me with this? As I understand not all fonts allow strike trough. Image added. Or I did it wrong?

Снимок экрана 2021-01-25 в 12.20.28
Снимок экрана 2021-01-25 в 12.20.282800×1942 469 KB

6

@Mia - If you have that font installed on your computer you could give it a check; I don’t. I can’t see the full element in the designer without you sharing a project read-only.

7

Link:
https://preview.webflow.com/preview/jordan-59076b?utm_medium=preview_link&utm_source=designer&utm_content=jordan-59076b&preview=59ed15a58690dcb1ccb8def0afb914c1&mode=preview

In photoshop it is all good

Снимок экрана 2021-01-25 в 12.42.29
Снимок экрана 2021-01-25 в 12.42.291434×1246 265 KB

8

@mia - So It seems that the strikethrough works on deskop (chrome / edge tested) but not on Mobile. I tested an Samsung S20 w/chrome and and iPhone12 with Safari, Chrome (both failed).

I would suggest testing another font.