Justice Template - Home Page - Delete Brown Vertical Bar - Question | JoomShaper
Back to the questions

Justice Template - Home Page - Delete Brown Vertical Bar

H

Hans

Template 4 days ago

The Justice Template has on its Home Page a brown vertical bar. How to delete it?

Screenshot:

https://imgur.com/a/0JloFGp

Where to find its definition in the SP Page Builder? Where is the code?

Sure I can tweak the Custom.css with a vertical height: 0px, like that, and then it is gone:

.hero-section.start-animation:before, .hero-section .sppb-row-overlay.start-animation:before {
    top: 48%;
    height: 0px;
}

But that's a dirty solution. Please tell me where the code is so I can delete it.

0
8 Answers
Order by
Oldest Newest Votes
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 4 days ago #221952

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 🙂

0
H
Hans
Accepted Answer
4 days ago #221973

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?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 day ago #222126

It's included in the core file, which is why we recommend not touching the core files. It's good to use custom CSS if you want to remove it.

0
H
Hans
Accepted Answer
1 day ago #222132

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?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 day ago #222133

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

0
H
Hans
Accepted Answer
1 day ago #222135

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.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 day ago #222136

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

Thank you.

0
H
Hans
Accepted Answer
19 hours ago #222147

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.

0