How to remove Bricks Comments default styling?

How To
1

On my pages, the post-123.min.css file contains a Bricks @layer containing this comments styling:

@layer bricks {
    @keyframes load8 {
        0% {
            -webkit-transform: rotate(0deg);
            transform:rotate(0deg)
        }

        to {
            -webkit-transform: rotate(1turn);
            transform:rotate(1turn)
        }
    }

    @keyframes spin {
        to {
            -webkit-transform: rotate(1turn);
            transform:rotate(1turn)
        }
    }

    @keyframes scrolling {
        0% {
            opacity:1
        }

        to {
            opacity: 0;
            -webkit-transform: translateY(10px);
            transform:translateY(10px)
        }
    }

    .brxe-post-comments {
        width:100%
    }

    .brxe-post-comments .comment-form-cookies-consent {
        align-self: center;
        display: flex;
        gap:.5em
    }

    .brxe-post-comments .comment-form-cookies-consent input {
        cursor: pointer;
        position: relative;
        top:2px
    }

    .brxe-post-comments .comment-form-cookies-consent label {
        cursor: pointer;
        margin:0
    }

    .brxe-post-comments .comment-reply-title, .brxe-post-comments .comments-title {
        margin-bottom:30px
    }

    .brxe-post-comments .comment-navigation .nav-links {
        display: flex;
        justify-content:space-between
    }

    .brxe-post-comments #comment-nav-above, .brxe-post-comments #comment-nav-below {
        margin-bottom:15px
    }

    .brxe-post-comments ol, .brxe-post-comments ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .brxe-post-comments .comment-list {
        border-bottom: 1px solid var(--bricks-border-color);
        line-height: inherit;
        margin: 0 0 60px;
        padding-bottom:30px
    }

    .brxe-post-comments .comment-list.no-avatar .children {
        margin-left: 60px;
        padding-left:0
    }

    .brxe-post-comments .comment {
        border-top: 1px solid var(--bricks-border-color);
        padding-top:30px
    }

    .brxe-post-comments .comment:not(:last-child) {
        margin-bottom:30px
    }

    .brxe-post-comments .comment-body {
        display: grid;
        gap: 20px;
        grid-template-columns: auto 1fr;
        position:relative
    }

    .brxe-post-comments .children {
        margin-top:30px
    }

    .brxe-post-comments .depth-2, .brxe-post-comments .depth-3 {
        margin-left:60px
    }

    .brxe-post-comments .comment-respond {
        margin-top:1em
    }

    .brxe-post-comments .comment-content p {
        hyphens: auto;
        word-break:break-word
    }

    .brxe-post-comments .comment-avatar {
        position:relative
    }

    .brxe-post-comments .comment-avatar .administrator-badge {
        background-color: #1ebea5;
        border: 2px solid;
        border-radius: 50%;
        color: #fff;
        cursor: default;
        font-family: sans-serif;
        font-size: 12px;
        font-weight: 900;
        height: 24px;
        line-height: 20px;
        position: absolute;
        right: -2px;
        text-align: center;
        top: -2px;
        width:24px
    }

    .brxe-post-comments .avatar {
        border-radius: 50%;
        max-width:none
    }

    .brxe-post-comments .comment-author .fn {
        font-family: inherit;
        font-size: 1.1em;
        line-height: 1;
        margin:0 0 5px
    }

    .brxe-post-comments .comment-author .fn a {
        font-weight:700
    }

    .brxe-post-comments .comment-meta {
        color: var(--bricks-text-light);
        font-size: .9em;
        margin-bottom:1em
    }

    .brxe-post-comments .comment-meta .reply {
        margin:0 .5em
    }

    .brxe-post-comments .comment-meta .comment-reply-link {
        background-color: var(--bricks-bg-light);
        border-radius: 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1;
        padding: 5px;
        position: absolute;
        right: 0;
        text-transform: uppercase;
        top: 0;
        transition:.1s
    }

    .brxe-post-comments .comment-meta .comment-reply-link:hover {
        background-color: var(--bricks-bg-dark);
        color:#fff
    }

    .brxe-post-comments .comment-respond small {
        font-size: 100%;
        margin:0 .25em
    }

    .brxe-post-comments #cancel-comment-reply-link {
        font-weight: 400;
        opacity:.5
    }

    .brxe-post-comments #cancel-comment-reply-link:hover {
        opacity:1
    }

    .brxe-post-comments .comment-form .form-group {
        margin-bottom:15px
    }

    .brxe-post-comments .comment-form .form-group textarea {
        resize:vertical
    }

    .brxe-post-comments .comment-form .logged-in-as a:last-child {
        text-decoration:underline
    }

    @media (max-width: 639px) {
        .brxe-post-comments .comment-avatar {
            gap:30px
        }

        .brxe-post-comments .comment-avatar img {
            max-width:60px
        }

        .brxe-post-comments .children {
            margin-left: 0 !important;
            margin-right:0 !important
        }

        .brxe-post-comments .depth-2, .brxe-post-comments .depth-3 {
            margin:0
        }
    }
}

How can I remove this? It’s messing with my style. I don’t need Bricks’s intervention here.

2

In your child theme use something like this regex removal which targets the specific CSS output.

// Add custom CSS that overrides the Bricks styles
add_action(‘wp_head’, function() {
?>

@layer bricks.overrides {
   /* Reset the post-comments styles */
   .brxe-post-comments .comment-list {
      border-bottom: none !important;
      margin: 0 !important;
      padding: 0 !important;
   }

   .brxe-post-comments .comment {
      border-top: none !important;
      padding-top: 0 !important;
    }
    
   .brxe-post-comments .comment-meta .comment-reply-link {
      all: unset !important;
      /* Add your custom styles here */
    }
    /* Add more overrides as needed */
}
</style>
<?php

}, 999);
1 Like
3

Thanks! I realise that when I use a Bricks Component, the corresponding CSS for that Block loads as a layer in the CSS styling. I want to remove or edit that CSS, but this will suffice - thanks :ok_hand:

1 Like
4

Excellent, glad it was able to work for your situation. =]