Hi,

Thanks for your question.

SP Page Builder addons are not defined in the UI—they come from addon files in the system. You can find them here:

/components/com_sppagebuilder/addons/
/plugins/sppagebuilder/

Each addon has files like:

admin.php (settings in builder)

site.php (frontend output)

⚠️ Please note, modifying these files requires coding and changes may be overwritten after updates.

You should use Custom CSS, instead of editing core files directly. If you need any help to remove it via custom CSS please let me know.

Regards 🙂

Thanks for the clarification.

With CSS, you can only visually modify DOM elements, but not remove them, right?

I set the height to 0 using CSS, so the brown bar has visually disappeared, but it’s still present in the DOM, which isn’t ideal. Is there anything else I can do with CSS besides what I’ve already done? I’ve included the CSS code above.

A question about the add-on files: is this brown bar its own add-on file, or is it a snippet of code in a larger file?

OK, I understand. Custom CSS is claer, however that means removing the element only visually, e.g. height=0, what I did. Real removing the element via Custom CSS is not possible, is that right?

Could you please give me your site URL? I need to check.

The website hasn't been published yet. There's no need to access the website, as my question is of a very general technical nature.

It's a very simple question for a technician—could you please ask Atick Eashrak Shuvo. He has already been very helpful on several occasions.

Its a simple issue, You dont need to touch the core files, just use custom CSS and remove it.

Thank you.

Thanks for your answers, but there’s a misunderstanding. I realize that I can make the element invisible—i.e., hide it—using Custom CSS. That means the element is no longer visible but still exists in the DOM. So it hasn’t been removed.

You, on the other hand, write that the element can be removed using Custom CSS. I’m specifically concerned with this technical difference between removing and making invisible.

Removing means removing from the DOM, not just making it invisible.

Could you please tell me how to remove the element from the DOM using Custom CSS.

Apologies for the inconvenience.

The vertical brown bar is coming directly from the template code, not SP Page Builder.

You will find it in:

/templates/justice/scss/theme.scss

Around lines 3619–3640, in the .hero-section pseudo-element definition:

.hero-section,
.hero-section .sppb-row-overlay {
    &:before {
        content: "";
        position: absolute;
        width: 116px;
        max-width: 10%;
        max-height: 80%;
        height: 0px;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 98.9%, 0 100%);
        transition: all 0.6s ease-in-out;
    }

    &.start-animation:before {
        top: 48%;
        height: 635px;
    }
}

To remove the bar completely, you should delete (or comment out) the &:before block and its corresponding .start-animation:before rule.

However, please note this is part of the core template SCSS file, so any direct changes will be overwritten during future template updates.

We appreciate your patience and understanding.

Thank you, Atick, for supporting me and answering my question in detail.

Of course, the question arises as to why this element is hard-coded in the template. The following element, which is technically even more complex, was simply implemented in the SP Page Builder by entering SVG code.

https://imgur.com/a/UDBzfuY

This element can be easily modified and, of course, deleted as well

Can you tell me why you chose to hard-code the brown bar in the template?