TauryAnderson2
7 years agoQrew Trainee
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>"
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>"