Streaming live at 10am (PST)

Inline italic style CMS Name Field

#1

CMS question:
I have a branded name in my name field that needs to be italicized


https://www.dropbox.com/s/787gmqzpxe57ywu/2018-05-10_10-41-53.png?dl=0

It is an H2


https://www.dropbox.com/s/q2faargfsumivwp/2018-05-10_10-45-25.png?dl=0

So How do I do it?

Thanks!
Julie

#2

The name field is unformatted - No way by the CMS.

Maybe add some custom code JS (Select the word and change it to italic).

First, Add id for the heading (By webflow UI)

<h2 id="demo">Visit UMF</h2>

Next, Add this code for post page (before body)

<script>
function changeUMFtoItalic() {
    var str = document.getElementById("demo").innerHTML; 
    var italicStr = str.replace("UMF", "<i>UMF</i>");
    document.getElementById("demo").innerHTML = italicStr ;
}
changeUMFtoItalic();
</script>

https://www.w3schools.com/code/tryit.asp?filename=FR7PEERD1247

This code will work fine for post page (change one heading). For collections you should use another code (loop throw all h2 inside some wrapper)

#3

super awesome. JavaScript FTW! Thanks ! :grinning:

1 Like
#4

Great :slight_smile: mark as solved to close this topic

#5

This conversation was a while ago, but thought I’d share in case anyone comes across it.

An alternative approach is to us the HTML Embed component (drag it from Add -> Components -> Embed). I’ve used it to create a heading with inline styles. I have two CMS fields, one which gets the green highlight and the other that is black.

You could do the same thing by creating two CMS fields, one that will have italics, and the other that won’t.