Forum Discussion

MelanieProebste's avatar
MelanieProebste
Qrew Trainee
2 years ago

How to write Rich Text HTML to have Multi-Colors

How would I revise this code to have the word ORANGE in color #FFA200 and then the rest of the sentence in green again.

"<div style=\"color:#34a853;font-size:300%;font-weight:bold;\"align=\"left\">"&"To update the work ticket: Please use the orange SAVE AND RETURN TO MRI button ABOVE to save this review and update the work ticket."&"</div>"



------------------------------
Melanie Proebstel
------------------------------
  • It's not perfect but if you wrap your orange text in a span and style that as orange it should do the trick

    "<div style=\"color:#34a853;font-size:300%;font-weight:bold;\"align=\"left\">"&"To update the work ticket: Please use the <span style=\"color: #FFA200\">orange</span> SAVE AND RETURN TO MRI button ABOVE to save this review and update the work ticket."&"</div>"



    ------------------------------
    Chayce Duncan
    ------------------------------
    • BrianSeymour's avatar
      BrianSeymour
      Qrew Assistant Captain

      Sometimes I'll extract the styles to variables and use concatenation to kinda mimic HTML indentation too. The intent is to help our future selves and other developers with maintainability. The main issue is the carriage returns (hitting the "Enter" or "Return" key) creates whitespace when you are editing the Formula Text field, but it's typically stripped out and escaped with "\n" when the field is saved.

      var Text base    = "color: #34a853; font-size: 300%; font-weight: bold; align: left;";
      var Text callout = "color: #ffa200";
      
      "<div style=\"" & $base &  "\">"
          & "To update the work ticket: Please use the"
          & "<span style=\"" & $callout &  "\"> orange </span>"
          & "SAVE AND RETURN TO MRI button ABOVE to save this review and update the work ticket."
      & "</div>"

      Anyway, Chayce's suggestion of wrapping the word orange in a styled span tag is the same approach I'd take here too!



      ------------------------------
      Brian Seymour
      ------------------------------