How can I add text shadows to the Impulse theme for better readability?

Store Design
,
1

Hi there,

I’m having trouble with my webshops text readability. I’d like to add text shadows so that the text is always readable no matter the background. Impulse has a Theme setting called “Image Treatment” where you can adjust a certain type of text. This is the text I want to give shadows. You’ll recognize it because it’s the only grey text on the website and as you can see covers quite the significant portion of it. I’m not quite sure where in the code I need to add something to change this.

Thanks in advance!

My shops url is: https://atelierhelsloot.com/

2

@werkbenjaminb
put below css into theme.css file

.animation-contents {
    text-shadow: 2px 2px #ff0000 !important;
}
3

Hello @werkbenjaminb

It’s GemPages support team and glad to support you today.

You can refer to the CSS code for text-shadow here. and apply it to the element you want

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_text-shadow

4

Where in the file do i need to add this code? And where in my editor would I then be able to see this option?

5

Add into theme.css file at the end paste that above code.

6

Would it be possible to only add shadows to text with the color code #5E5E5E? So lets say : .animation-contents {Only if text color:#5E5E5E
text-shadow: 2px 2px #ff0000 !important;
}

What code would work for this?

7

text-shadow: 2px 2px #ff0000 !important; :backhand_index_pointing_left: this one with text shadow there will be create 2 layer so it would be look like shadow.

8

I’m not sure you understand my question. I got your code to work with no problem. However it only applies to certain pieces of text, some I want it to, some I don’t want it to and some I want it to but it doesn’t.

All the text on my website with the color code #5E5E5E needs to get a shadow. Is there a way to make your earlier code only apply to text with that color code?

9

@werkbenjaminb yeah you can use that color code also .

.animation-contents {
    text-shadow: 2px 4px #5e5e5e !important;
}
10

Hello @werkbenjaminb

I would like to give you a solution to support you:

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
.animation-contents {
        text-shadow: 0 0 5px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 2px #fff, 0 0 3px #fff !important;
}
11

Thank you for your answer, this however still doesn’t solve my problem. The problem is not getting text shadows to work but getting them to work with right kinds of text on my website.

All the text on my website with this hex code: #5E5E5E needs to get a shadow. Your code does not target text with a specifick hex code. Is there any way you know of which makes this possible?