Borders around text elements - how to?

[heathyboy]

Hello! Another question - hopefully with a quick solution… I’ve got some disclaimer ‘text’ to put in a text element and would like to put a “stand out red” border round it like in the image below.

Is there a way to do this in the new Evolve? (I know one way round it is to use a graphic with an image of the text and border - but I want it screen-reader’able’ if possible).

Thanks guys.

Andy

[hbailey]

Hey Andy!

Check out the Canvas element. Make one to your chosen dimensions, add a text box and then add a border to that text box. Simple and screen-reader compatible too

[heathyboy]

Awesome. Thanks for the tip.

Looks good for the desktop - though I can’t find how to get the ‘theme’ font - see Fig 2. And unfortunately as seen in Fig 3, the text font size isn’t responsive and shrinks for the tablet and phone view.

Fig 1 - looks good - though not picking up theme font

Fig 2 - styling options - also the text colour doesn’t pick up theme colours

Fig 3 - mobile phone view - text has shrunk

[hbailey]

Thank you so much for that feedback! Very good points. I have fed these on to the developers so they can look to add these to the canvas element operation, as well as maybe just adding border to elements etc which would be the easiest!

In the meantime, here are two other options:

EITHER

1. Put a background colour of your border choice on the row containing the text
2. Then make your column’s background white/cream or whatever you want as the inner color.
3. Change the row padding so that it is minimal (customise the pixels) so you get a thin border, as below:

OR

Check out the Card types for your text element:

You can personalise the Card types in your Theme and set one to be how you want it for your element and then apply to it to all text elements you want to have this style.

Any questions just ask!