Forum Discussion

TauryAnderson2's avatar
TauryAnderson2
Qrew Trainee
7 years ago

How to enter both CSS and HTML in a rich text field

I am trying to add CSS to a rich text field, but I cannot figure out exactly how to modify the CSS so that the field actually displays what I want it to (I am trying to overlay text on an image).  I k...
App builders
Formulas and functions
XavierFan's avatar
XavierFan
Qrew Cadet
7 years ago
Try this:
"<div style='position:relative;color:white;'>"  & "<img src=" & URLRoot() & "up/" & [_DBID_IMAGES] & "/a/r17"& "/e6v0' width='300' />"  & "<div style='position:absolute;top:10px;left:10px;'>TEXT</div>"  & "</div>"
Note:

1)  Restricted HTML tags in a Rich Text field
There are restrictions on which tags can be used in a Rich Text field - so for example <body>, <html>, and <style> will most likely be stripped out or not function as they would in a stand-alone web page (as you already saw).

2)  Use "style" attribute for CSS
Within a tag (for example the <div> tag), you can use the "style" attribute to specify the CSS directly.

The "class" attribute is used for a CSS class that is already defined, but in this case, you should use "style".

3)  Text colors and other font attributes
In this example, line 1 specifies "color:white;" for the whole container.  But you could specify individual text colors and other CSS attributes (like font size) in each text block.

So line 3 could look like this if you want to have red text and font-size = 30px just for that text block:

& "<div style='position:absolute;top:10px;left:10px;color:red;font-size:30px;'>TEXT</div>"