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>
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.