Support » Theme: Storefront » How change color of selected words in a text box? Create box around text block?

  • Resolved boppar

    (@boppar)


    I’m remaking my site without using Elementor page builders which I used before. I’m surprised how good the block editor is.

    2 questions:
    1. In a text block, is it possible to change the text colour of just a few words? Whe changing the text colour it changes all the text in the box. Is there a way around it?
    2. Is there a way to get a box (or a shadow) around some text blocks to make it stand out? I know I can change the background colour, but it won’t cover between the textboxes.

    P.S I want to achieve this without installing a plugin.

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

    (@boppar)

    Actually I’m not sure if this is the right place to ask question regarding WordPress built-in block editor? If it’s not I apologize.

    Another question. I’m using the handpicked products block. Is there a way to put a border/frame around it and also a title?

    Cheers

    Hey @boppar,

    As you suspected, some of your questions are not really related to the Storefront theme but to the WordPress Block Editor.

    Gutenberg Blocks
    You can certainly modify the blocks, which will require you to add custom CSS code to your site based on what you’re saying.

    I recommend asking for further help on the Gutenberg support forum.

    You can learn more about the different blocks here: https://wordpress.org/support/article/blocks/.

    Products Blocks

    I’m using the handpicked products block. Is there a way to put a border/frame around it and also a title?

    The Products Blocks is part of WooCommerce rather than Storefront. However, Storefront does modify the look.

    To add a title to the Products block, I recommend adding a Heading block above the Products block.

    If you’d like add a border/frame around the block, please could you let us know if you’d like add the border/frame around the entire block or for each product within the block?

    Thread Starter boppar

    (@boppar)

    OK, I’ll ask in the right forum.

    @boppar to clarify, we’re happy to help you with the Products Block styling, as that can be styled in Storefront:

    If you’d like add a border/frame around the block, please could you let us know if you’d like add the border/frame around the entire block or for each product within the block?

    Thread Starter boppar

    (@boppar)

    @wpniall
    How nice of you!
    I would like a border/frame around the whole block.

    @boppar You’re welcome!

    Here’s the code to add a border/frame around the whole Product Block:

    
    /* Add border around Products Blocks  */
    .wc-block-grid__products {
      border: 1px solid #000000;
    }
    

    I set the border width to 1px and the color to #000000 (black), so feel free to adjust those to your preferences.

    I recommend adding the code to the Appearance > Customize > CSS section in your WP-Admin dashboard.

    Thread Starter boppar

    (@boppar)

    Thanks @wpniall
    It works well to add a frame around the product block.

    However that’s not what I want to achive. I want a border around the product block and a title block.

    I make a group block. Inside this group I add a title block AND a product block (the title block is to tell what kind of produts that are shown in the product block). Then I want a border around the group block.

    Can this be done?

    Niall a11n

    (@wpniall)

    You’re welcome @boppar

    Could you please share a link to the page on your site you would like to customize, so we can take a closer look?

    Thanks!

    Thread Starter boppar

    (@boppar)

    Hi @boppar,

    I noticed you’ve added the my-shadow-box class to the block groups, so I used that to add the borders. That way, we can prevent the border showing from a block group that you may not want to have a border. Here’s the code for adding a border:

    
    /* Add border around Blocks group using the my-shadow-box class  */
    .wp-block-group.my-shadow-box {
      border: 1px solid #000000;
    }
    

    If you need to add a border to a different block group, please share screenshots of where you’d like to add those using something like https://snipboard.io.

    Thread Starter boppar

    (@boppar)

    Thanks @wpniall
    It works well.

    I don’t really like the shadowbox, I might skip it.

    If I just want to add a border (without shadow), how will the CSS look like?

    Thread Starter boppar

    (@boppar)

    Forget my last question. Thanks for your help, @wpniall.

    Hi @boppar,

    You’re welcome!

    If you have any further questions or need additional help with the Storefront theme, please start a new thread and we’ll be able to help you out there. Thanks!

Viewing 13 replies - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.