Streaming live at 10am (PST)

Adding color to words in a paragraph


#1

So far I've been just adding multiple text blocks, but wondering if there's a more simple way to add styles like color & size to specific words in a paragraph.


#2

Hey @Asgard, I'm working on a brand new rich text editor experience right now, and it's almost done. It will allow you to wrap text with span tags, insert links, and assign custom classes/styles to your text elements. Really appreciate your patience - it's coming very soon!


#3

Excellent... Thanks!!


#4

Sounds handy………………………


#5

It looks like this rich text editor feature was added a few days ago -- thanks! It is a great improvement! A question: @callmevlad, is there a way yet to style in-paragraph links? I love that I can have links now, but I don't really want them to be the default blue/purple. Thanks!


#6

Yes, of course! Once you've inserted the link in the text editor, just click outside of the paragraph, then click on the link, and add a class just like you would to any other element. Let me know if that works for you.


#7

I tried this, but it didn't seem to work. I can add a class, as with any other element, and then I can change the typography colors (and other colors) but that only seems to change the base 'font-color.' The link anchor tag is overriding those color choices (I think) and it doesn't look like I can access the anchor tag from the UI.

For example, if I add my class as, say, "linkColor," it seems like I really need to be able to style "linkColor a" and "linkColor a:visited" etc to get at that blue/purple.

But I might be missing something in the UI -- any thoughts? Thanks very much for your help!


#8

You should be able to add a class directly to the link element, not the container (paragraph, heading, etc) that it's inside of. Here's an example of me selecting a link directly, giving it a class 'Fancy Link', and styling it:

Note that the top of the right panel says 'Link' and has a little chain icon. Does that work for you?

If you look at the exported code for this example, it should be something like this:

<p>Lorem ipsum.... <a href='www.google.com' class='fancy-link'>dolor interdum</a> ...tristique posuere.</p>

And not:

<p class='fancy-link'>Lorem ipsum.... <a href='www.google.com'>dolor interdum</a> ...tristique posuere.</p>


#9

Thanks for the further info! I tried again, and this time it did work.

I think the issue was some confusion from spans of text that I had 'mock underlined' with the old text editor, and trying to convert those into links with the new text editor. When I follow your instructions on a new piece of text, it works. When I try to convert text that I had previously underlined with the old editor, the system builds everything in a "text span" element rather than a "link" element. That's why I couldn't get at that link styling, I think.

So, hopefully this use case won't come up too much for other people and everything will work fine! Would still love to be able to style all links rather than giving a class to each, but I can live with this smile

Thank you very much for your explanation and fast reply!


#10