Add black outline to text on slideshow image?

Store Design
1

Hi everyone,

We change our images and text in our front page’s multiple slideshows - white is the text color my team wants, all other text colors are ugly, black is sub-par… So I’d love to stick with white excepts that it makes a lot of slides literally unreadable.

Could someone tell me, in easy idiot-proof steps, how to change the code to add a 1px or 2px black outline to the white slideshow text (both heading and subheading)?

I know there’s a few simple lines of code to add, I just need to know how to do that.

See the front page of https://phoenixdomes.com to witness many slides being unreadable, especially the subheadings.

2

@PhoenixDomes

add this code to your theme.css file.

Navigate to online store >> Click edit theme code.

Now find theme.css and paste the following code:

.slideshow__title, 
.slideshow__subtitle{outline: 2px solid black !important;}
3

@eFoli-Marvic

Thank you Marvic for your time, your answer is exactly what I needed but… when “Edit Code” and searching through, I don’t find theme.css but only the following: theme.liquid, theme.js, and theme.scss.liquid… Could you direct me to the right place? Se grateful, thanks!

4

@PhoenixDomes Paste the code bottom into the theme.scss.liquid file.

5

@eFoli-Marvic

Got it - but I was looking for a black outline around the white font letters themselves - when I tried it the code it created an outline rectangle around the text block - not looking great.