Forum Discussion

TauryAnderson2's avatar
TauryAnderson2
Qrew Trainee
6 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 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>"



App builders
Formulas and functions
  • XavierFan's avatar
    XavierFan
    Qrew Cadet
    6 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>"
    • LeoSanchez's avatar
      LeoSanchez
      Qrew Trainee
      6 years ago
      Would you mind sharing a screenshot of the final result? I am curious of the capabilities of Quickbase when it comes to customizing something to this level.
      Thank you,