Inline italic style CMS Name Field

CMS question:
I have a branded name in my name field that needs to be italicized
image
https://www.dropbox.com/s/787gmqzpxe57ywu/2018-05-10_10-41-53.png?dl=0

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

So How do I do it?

Thanks!
Julie

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)

super awesome. JavaScript FTW! Thanks ! :grinning:

1 Like

Great :slight_smile: mark as solved to close this topic

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.

1 Like

I’m having a similar problem, but it is to do with in-line styling within a Rich Text Field.

I have a series of sets of vocabulary in my CMS, and I want to style the Word differently to the Translation. I know that this is possible by creating different styles for h1-6, but then this will mean that the word and translation will be set on different lines. Does anyone have a solution for how in-line styling for Rich Text Elements can be achieved? thanks.