• Resolved boppar

    (@boppar)


    I use cover blocks with text and buttons for my categories. In typography I’ve choosen XL. I want even larger font size. However if I choose typography XXL the font becomes larger but it also zooms in on the cover image.

    Question1: Is there a way to enlarge the font size without zooming in on the image?

    Question 2: Is it possible to drop a shadow on the text so it becomes easier to read?

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter boppar

    (@boppar)

    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?

    Saif

    (@babylon1999)

    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!

    Thread Starter boppar

    (@boppar)

    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?

    Thread Starter boppar

    (@boppar)

    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.

    Direct link to inage: https://snipboard.io/2vWVtR.jpg

    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.

    Thread Starter boppar

    (@boppar)

    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!

    Thread Starter boppar

    (@boppar)

    Hi @anastas10s.

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Problem with text on cober block.’ is closed to new replies.