XF 2.2 How to give the text on my nodes a border?

[Kone]

Hi, users on my site have been complaining the text on my nodes are hard to see and while I have been able to change the color to something more visible, the text is still rather obscured due to the colors on the node(s) wallpaper. Is there any code that can be used to wrap the text in a black border or something along those lines so the text stands out more and is more visible? Only asking as the style I'm using doesn't offer that in the settings and I'm hoping there's a workaround for it.

An example of said issue:

 

[Paul B]

Use text-shadow CSS - that allows for white text, with a black edge.

Without:


With:

 

[Davyc]

I found that the easiest way for me was to just edit the template and move things around (see below) so the text was not lost in the background. This is the member_view template.

 

[abi_dev]

Hi,
You can use a background with opacity like
.node- body { background: rgba (0,0,0,0.4);}
Then your text will be more visible

 

[Kone]

Use text-shadow CSS - that allows for white text, with a black edge.

Without:
View attachment 284417

With:
View attachment 284416

Stupid question but where am I putting this code exactly? Brain is in power saving mode at the moment it seems haha

 

[Paul B]

In the extra.less template.

Start with something like this:

.node
{
    text-shadow: 2px 2px black;
}

Then customise it to suit.

You can target just the node title, or other elements as required.

Use the browser inspector (F12) to experiment.

For example, this is purple:

 

[Kone]

In the extra.less template.

Start with something like this:

.node
{
    text-shadow: 2px 2px black;
}

Then customise it to suit.

You can target just the node title, or other elements as required.

Use the browser inspector (F12) to experiment.

For example, this is purple:

View attachment 284421

Did a bit of playing around and it all looks much better. Thanks so much again for your help, you're a life saver.