How can I add an opaque box behind all text on my website?

Solved

How can I add an opaque box behind all text on my website?

EpicQuest
Excursionist
19 0 4

Hello!

 

I'm trying to figure out how to add an opaque box behind all of the text on my site because I have a very detailed image set as my background, and the text is very difficult to read over this background. Are there any scripts I can use that will affect all text boxes to be opaque?

 

Site URL: https://epicquestperfumes.com/

Password: bcrowfoot

Accepted Solution (1)
made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @EpicQuest,

 

With the opaque container, you have to target each of the container, and change the background like so.

 

1. In your Admin Page > Go to Online store > Themes > Actions > Edit code

2. Under the Asset folder, open the base.css

3. Add the code below at the very bottom of the file

 

.footer-block.grid__item {
background: rgba(0,0,0,0.5);
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 4 (4)

made4Uo
Shopify Partner
3840 716 1177

Hi @EpicQuest,

 

You can try adding a text shadow instead. 

 

1. In your Admin Page > Go to Online store > Themes > Actions > Edit code

2. Under the Asset folder, open the base.css

3. Add the code below at the very bottom of the file

span, h1, h2, h3, h4, p {
text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;;
font-weight: bold;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
EpicQuest
Excursionist
19 0 4

@made4Uo, thank you for the assistance! That definitely helps, but I still think an opaque box would fit better because it would make the text more legible. Is this even an option? I love this text shadow idea, though! 

made4Uo
Shopify Partner
3840 716 1177

This is an accepted solution.

Hi @EpicQuest,

 

With the opaque container, you have to target each of the container, and change the background like so.

 

1. In your Admin Page > Go to Online store > Themes > Actions > Edit code

2. Under the Asset folder, open the base.css

3. Add the code below at the very bottom of the file

 

.footer-block.grid__item {
background: rgba(0,0,0,0.5);
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
EpicQuest
Excursionist
19 0 4

@made4Uo Perfect! This is exactly what I needed! Thank you so much!!!