Problem with text on cober block.

I guess the answer to question 1 is that’s not possible.

I’m still trying to find a way to drop shadow in th text on the cover block. Anybody have any ideas?

Hello @boppar,

You can enlarge the font size without magnifying the image and alter the font’s appearance to make it more readable from the block settings.

Please refer to this screencast for reference: https://d.pr/v/mua6MM

If you prefer a more customized approach, you can assign a unique CSS class to the text in the paragraph, as demonstrated in the screenshot below, and implement your own modifications. Feel free to provide more information on what you’re aiming to accomplish, and either I or another contributor might be able to help you out. ??

Just remember to assign the element a unique class name, ideally with numbers.

Link to image: https://d.pr/i/Qeyzwa

Cheers!

Hello @babylon1999

Thanks for answering my question. I did as you showed in the screencast, but when I enlarge the font the image get zoomed in and also results in a larger image size.

What I really want is to make the text in the cover blocks to stand out more.

If I assign a unique CSS class to the text, will it be possible to drop a shadow on the text?

Hi Saif @babylon1999

I want to drop a shadow on the text in the cover block. I assigned a unique class to the paragraph. I called it textshadow. My problem is i don’t know what CSS to add. I think it might be something like:

#textshadow XXXXX { text-shadow: 0px 0px 5px black !important; }

However I don’t what the XXXXX should be? Do you have any ideas?

Hi there @boppar

Kindly note that a unique CSS class has to be created first, like .10t_cover_block_text.

Then, the text-shadow CSS property values need to be defined. The site at https://www.cssportal.com/css3-text-shadow-generator/ is a good resource for styling it as you like.

The resulting code in my example would be:

/* adding text shadow on cover block text 6427029-zen */
.10t_cover_block_text {text-shadow: 3px 3px 2px rgba(7, 7, 7, 1);}

As an alternative, consider adding Storefront extensions to your site; the Storefront Powerpack in particular.

I trust that points you in the right direction.

Hi @anastas10s

Unfortunately it didn’t work.

Hi @boppar

Kindly try again, with the following code:

/* adding text shadow on cover block text 6427029-zen */

.wp-block-cover {
text-shadow: 6px 4px 6px black;
}

I hope that helps, let us know how it goes!

Hi @anastas10s.

It worked great. Thank’s a lot for your excellent support!