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

  • 0
  • 1
  • Question
  • Updated 1 month ago
  • Answered
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 know I have to use both CSS and HTML.  HTML I understand how to use within a formula field, but it is just displaying my CSS as text instead of implementing it.  I think I must just be missing some small but important keystrokes in how to denote CSS vs. HTML in the field. 

Below, you see my little bit of HTML at the bottom in quotations as needed in the formula field.  I have tried putting the CSS into quotations as the HTML is written, but that apparently does not work.  I have done quite a bit of searching through old conversation to try to find reference to this (CSS for dummies?!?!) but there is a little too much assumed knowledge, it seems.

This is what my field currently contains:

<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
 
"<div class='container'>"&
  "<img src=" & URLRoot() & "up/" & [_DBID_IMAGES] & "/a/r17"& "/e6v0' width='300' >"&
  "<div class=position:absolute;top:8px;right:16px>Top Left</div>"&
  "<div class='top-right'>Top Right</div>"&
  "<div class='centered'>Centered</div>"&
"</div>"&

"</body>"&
"</html>"



Photo of Taury Anderson

Taury Anderson

  • 170 Points 100 badge 2x thumb

Posted 1 month ago

  • 0
  • 1
Photo of Xavier Fan

Xavier Fan, Champion

  • 410 Points 250 badge 2x thumb
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>"
Photo of Taury Anderson

Taury Anderson

  • 170 Points 100 badge 2x thumb
Yes, this works!  Great!  Thank you so much!