Docs

[MichaelAnthonyMurray]

Hello!
I’m having trouble making my overlay text stand out against the image.
http://dev.deltarescue.org.php56-5.ord1-1.websitetestlink.com/dogs/

I have several questions aimed at making the text pop.

1. Is it possible to change the background color directly behind the text?
[I do it now and it change the entire row. I would like to control the color directly behind the text.]

2. Also how would I make this applicable to all h1?

3. Also how would I give this text a 1px black stroke?

[Friech]

Hi There,

Thank you for writing in! #1 You can add this under Custom > CSS in the Customizer.

.page-id-40 h1 span {
	background-color: rgba(255,0,0,0.5);
    padding: 1% 2%;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

You can generate your color value here. The last value (0.5) is the color opacity. The padding gives the text a little space from the edges of the background color.

#2 If you mean the dog’s name, yes it well.

#3 See the text-stroke property on #1. However, your text is already in black so a black stroke would not be visible.

Hope it helps, Cheers!

[MichaelAnthonyMurray]

Thank you that worked!

How would I add this to other page ID’s?

[Friech]

Hi There,

Just replace the page-id-40 with the other page ID on my code above.

How to Locate Post/Page IDs

Thanks.

[MichaelAnthonyMurray]

Oh I understand that… but how would I add multiple pages?
Do I just add commas?

.page-id-40,id-42,id-43 h1 span {
background-color: rgba(255,0,0,0.5);
padding: 1% 2%;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}

ALSO

I was able to add a color background [THANK YOU] but how would I add a slight transparency?
Not a “white” background exactly, but moreso a clear background?

Thank you! I’m sorry if I’m not explaining it adequately.

M.M.

[Friech]

Hi There,

You can add a multiple selector on the CSS separated with comma [ , ]

e.g.

.page-id-40 h1 span,
.page-id-41 h1 span,
.page-id-42 h1 span {
	background-color: rgba(255,0,0,0.5);
    padding: 1% 2%;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

The last value of rgba(255,0,0,0.5) is alpha/transparency. 0 is transparent, 1 is solid.

Thanks.

[MichaelAnthonyMurray]

Thank you!
Got it almost figured out.

The background is so much larger than the text.
How would I shrink it to be the same size as the text?

[Rue Nel]

Hello There,

Thanks for updating in! We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Please do what could possibly match with your site design as much as possible.

Best Regards.

[MichaelAnthonyMurray]

I’ve changed the padding percentages which shrinks the width.

How do I change the padding height?

Am I able to change them separately?

[Joao]

Hi There,

You can use padding-top: 2px; or padding-bottom: 20px;

Use the px values according to your wishes.

Hope it helps

Joao

[MichaelAnthonyMurray]

Boom!

Thank you Joao and Freich!

[Joao]

Glad to hear it 🙂

Joao

[MichaelAnthonyMurray]

🙂

[Prasant Rai]

Let us know if you have any other questions. 🙂

[Author]

Posts