HOWTO: WYSIWYG - Blinking Text

6 posts by 3 authors in: Forums > CMS Builder
Last Post: Yesterday at 3:07pm   (RSS)

By richb - Yesterday at 12:23pm

Is there a way to add "blinking" text to WYSIWYG field?  If no, can it be done in a different field type?

By Dave - Yesterday at 12:25pm

Hi Rich, 

Do you have any plain HTML (and/or JS & CSS) that already does what you want?  That would be the first step.

Dave Edis - Senior Developer
interactivetools.com

By Dave - Yesterday at 1:05pm

Hi Rich, 

I had AI mockup a quick example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Blinking Text Demo</title>
  <style>
    /* CSS animation that toggles visibility every 0.5 s */
    @keyframes blink {
      50% { visibility: hidden; }
    }

    .blink {
      animation: blink 1s step-start infinite; /* 1 s cycle; adjust as needed */
    }
  </style>
</head>
<body>
  Normal text… <span class="blink">blinking text</span> …normal again.
</body>
</html>

What you can do is insert the content you want displayed inside the span tag.

It's also possible to update the WYSIWYG to include a pulldown menu that lets users select a class, but that involves a few more steps. 

Let me know which solution you prefer.

Dave Edis - Senior Developer
interactivetools.com

By richb - Yesterday at 1:10pm

Would prefer to use the WYSIWYG field vs editing the file.  I have someone editing the site and they do not know how to download file, edit and then upload.   Thx. 

By Tim - Yesterday at 3:07pm

Hi Richb,

One thing you can try is putting the code that Dave gave you right into the WYSIWYG field. Here are the steps...

  1. In CMSB, go to your target WYSIWYG field content.
  2. In the toolbar look for an icon that shows "<>". Pressing this button will put you into an HTML mode.
  3. At the top of the content (before anything else) put the line...
<style> @keyframes blink { 50% { visibility: hidden; }} .blink { animation: blink 1s step-start infinite; }</style>

Then wherever you want the text to blink you can wrap that content with the span tag...

<p>Normal text… <span class="blink">blinking text</span> …normal again.</p>

Notice that we wrap the text we want to blink with the span tag and its class is what is defined in the style tag at the top. Make sure you put the style at the top so that it should be defined before the blinking text. 

NOTE: If you have multiple WYSIWYG fields on a page and each one you want something to blink in, put the style tag in the first one and I believe (not tested) that you can leave it out of the others and it should work for them all. 

This solution is a bit of a workaround for special case, but a more solid solution exists by creating a custom CSS file that will need to be put into CMSB. Since you said you didn't want to do anything like that, this solution above should work fine. I have tested it myself on WYSIWYG fields on my development systems.

I hope this helps! :)

Tim Hurd
Senior Web Programmer
Interactivetools.com