Support » Plugin: Gutenberg Blocks – Ultimate Addons for Gutenberg » How to add box-shadow to the blocks

  • Resolved Abu Maryam

    (@abu-maryam)


    Hello,

    first of all: the Ultimate Addons for Gutenberg is a great plugin.
    It makes the Gutenberg Blocks much easier to work with.

    I was wondering:

    is there a way to add box-shadow effects to the different blocks and other elements?

    Thanks a lot!!!

    Abu Maryam

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hey,

    Thank you for getting back to us. I am glad you love our plugin.
    You can add custom class and custom CSS. I will help you do it if you face any issue.

    I hope that helps.

    Regards,
    Vrunda Kansara

    Thanks a lot for your reply!

    There are quite a lot of different UAG-blocks/elements were I would like to add the box-shadow effect. Unfortunately I don’t know the CSS-classes of the UAG-blocks to use the custom CSS.

    If you could be so kind, you can help me to add the box-shadow to some of the most frequent used UAG-blocks: For example: SECTION, ADVANCED COLUMNS, INFO BOX.

    It would be really great if the box-shadow can be a customizable property in a upcoming version of UAG-plugin.

    Thanks for your incredible job!!!

    Abu Maryam

    • This reply was modified 1 year, 4 months ago by Abu Maryam.

    Hi,

    I figured out how to do it.
    For those who want to know, this is how I did it:

    – In each block there is an advanced option (at the bottom) to add an extra CSS class.
    – Choose a name for your extra CSS class (for example: uag-new-class).
    – In the admin section of WordPress go to Appearance >> Customizer.
    – In the Customizer (at the bottom) add the Extra CSS class as:

    uag-new-class {
    box-shadow: 5px 5px 5px;
    }

    You can add any CSS property you like and you can use the same CSS class name for different blocks.

    It would be really great if the box-shadow can be a customizable property in an upcoming version of the UAG-plugin.

    Thanks a lot!
    Really great plugin!!!

    Abu Maryam

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hey @abu-maryam ,

    I am glad you found the solution. I will add a feature request to our task list. We appreciate your patience and efforts to bring this to us.

    Also, the above solution you provided is very correct.

    Regards,
    Vrunda Kansara

    Thanks a lot!!!

    I actually forgot the dot (.) in the CSS styling.
    It should be:

    .uag-new-class {
    box-shadow: 5px 5px 5px;
    }

    Greetings,
    Abu Maryam

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add box-shadow to the blocks’ is closed to new replies.