[Resolved] Style conflict with Toolset Containers

Home Forums Support [Resolved] Style conflict with Toolset Containers

Home Forums Support Style conflict with Toolset Containers

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1626074
    Harry

    Is there a way to remove this

    .entry-content > [class*="wp-block-"]:not(:last-child) {
        margin-bottom: 1.5em;
    }

    from <style id='generate-style-inline-css'>.

    It is causing a conflict with Toolset Containers, which have these CSS classes:
    <div class="wp-block-toolset-blocks-container tb-container">
    and this markup:
    .tb-container[data-toolset-blocks-container=”a2b624e1050bc0278a34ef57cb57b665″]

    The margin-bottom attribute is overwritten by “.entry-content > [class*=”wp-block-“]:not(:last-child)”, so this has no effect:
    .tb-container[data-toolset-blocks-container="a2b624e1050bc0278a34ef57cb57b665"] { margin-bottom: 50px; }

    #1626148
    David
    Staff
    Customer Support

    Hi there,

    do each of the TB Containers have the same margin-bottom ?

    If so you can overwrite that CSS with something like this:

    .entry-content > [class*="wp-block-"].tb-container {
        margin-bottom: 50px;
    }

    If the margins are variable then thats a little more tricky.

    Let me know.

    #1626164
    Harry

    Hi David,

    it’s a bit more tricky indeed, I couldn’t solve it with CSS, although I’m a (humble) professional ๐Ÿ˜‰

    The margin can be specified in the block editor, the markup is always the same with varying hashes attached to .tb-container (e.g. [data-toolset-blocks-container=”a2b624e1050bc0278a34ef57cb57b665″])

    I could implement the same margin for all those cases like you did, or with this, but it must be flexible.
    .entry-content > [class*="wp-block-"]:not(:last-child).tb-container

    Would be cool if you had any other idea? If it’s too complex or too much of a hastle I’ll think of something else.

    I think a solution could be (for me) to change the GeneratePress CSS line to this:
    .entry-content > [class*="wp-block-"]:not(:last-child):not(.tb-container)

    #1626537
    David
    Staff
    Customer Support

    Try this CSS:

    .entry-content > [class*="wp-block-"]:not(:last-child) {
        margin-bottom: unset !important;
    }
    #1627240
    Harry

    Hey David, I already tried “unset / initial / inherit”, but it’s still overwriting the CSS from the Block editor, because it’s more specific.

    #1627403
    David
    Staff
    Customer Support

    Yeah didn’t think so – always worth a shot.
    I am going to run this by Tom to see if we can filter out that CSS from the dynamic CSS function.

    In the meantime could ask Toolset if they have any filters for their CSS generation ? May be simpler to add to their CSS.

    #1628176
    Tom
    Lead Developer
    Lead Developer

    I’ve added a filter in 3.1.0 that will allow us to prevent the CSS from rendering ๐Ÿ™‚

    Thanks!

    #1628852
    Harry

    Didn’t expect that, thanks guys, that’s great! I’ll check the documentation when 3.1.0 is out.

    #1629590
    Tom
    Lead Developer
    Lead Developer

    No problem! Once 3.1.0 is out, you’ll be able to do this:

    add_filter( 'generate_do_wp_block_margin_bottom', '__return_false' );

    #1630189
    Harry

    Cheers Tom!

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