OL Learn

How can I insert outline text?

I’ve tried a few CSS properties, like text-stroke, or text-shadow, but they dont seem to work in Connect Designer. How can I create a watermark text element in Connect Designer?

<span style="font-size: 36pt; text-shadow: -1px 0px black, 0px 1px black, 1px 0px black, 0px -1px black; color: white;">Attendance List</span>

This works for me in Connect 2018.2 The trouble with that, of course, is that the text isn’t actually transparent. It’s just white with a black outline. I don’t actually know of a way to generate transparent text in this case to do a true Watermark style text. Maybe someone else will though.

Is SVG supported?

CSS:

svg{
  font: bold 50px 'Arial';
  width: 50%;.
  height: 50px;
}

text{
  fill: none;
  stroke: black;
  stroke-width:2px;
  stroke-linejoin: round;
}

Markup:

<p>
    <br>
</p>
<div anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 713px; height: 428px; top: 48.2333px; left: 48.2px; background-color: WebBlue;" offset-x="85.99999923706055" offset-y="86.03329923706055">
    <svg viewBox="0 0 350 50"><text y="40">Outlined Text</text></svg>
</div>

@TDGreer, don’t think so, I tried this but no luck in Connect 2018.2.1

I tried it and it works fine! I’m running 2018.2.1 as well.

Put the CSS into the context_print_styles.css style sheet. (Remember when you edit a style sheet you have to click “save” when you’re done.)

Put the markup into the Source of your Print Section.